Hex hsl 转换 php,关于 RGB,HEX,HSL 颜色相互转换
最近一段时间在折腾一个微信在线编辑器的项目,使用 UEditor 进行二次开发。
关于 UEditor 的定制,用到的都太粗浅,官方文档上都能找得到。主题使用的样式表是 ueditor.css 而不是ueditor.min.css,定制主题要注意这一点。而对整个项目来讲,感觉难度最大的,应该是素材换色的功能。
牵扯到
网上找到了 张鑫旭 大神以前写的代码,改了bug 稍微改写了一下。
// HEX 颜色正则
var hexReg = /^\#([0-9a-f]{3}|[0-9a-f]{6})$/gi;
// RGB 转 HEX
String.prototype.colorHex = function () {
var that = this;
if (/^(rgb|RGB)/.test(that)) {
var aColor = that.replace(/(?:\(|\)|rgb)*/gi,'').split(',');
var strHex = '#';
for (var i = 0; i < aColor.length; i++) {
var hex = Number(aColor[i]).toString(16);
hex = hex.length == 1 ? "0" + hex : hex
strHex += hex
}
return strHex.toUpperCase();
} else if (hexReg.test(that)) {
var aNum = that.replace(/#/, '').split('');
if (aNum.length === 6) {
return that.toUpperCase();
} else if (aNum.length === 3) {
var numHex = '#';
for (var i = 0; i < aNum.length; i += 1) {
numHex += (aNum[i] + aNum[i])
}
return numHex.toUpperCase();
}
}
}
// HEX 转 RGB
String.prototype.colorRgb = function () {
var sColor = this.toLowerCase();
if (sColor && hexReg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = '#';
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
}
return 'rgb(' + sColorChange.join(', ') + ')';
} else {
return sColor;
}
}
关于色彩空间中的
概念问题我就不说太多了,HSB 与 HSV 是同一个概念,只是叫法不同。PhotoShop 的调色板里看到的就是HSB颜色模型。
在 CSS 中,使用的是
两个模型中,H (Hue) 都是色相的意思,取值范围为 0 – 360 指的是圆心角,每个角度代表一种颜色;
S (Saturation) 代表饱和度,但在两种模型中两个饱和度的定义并不一样,但可以相互转换,取值范围都是 0 – 1 (在 CSS 中,要写成百分数形式 ;
在 L(Lightness) 代表 亮度,是作为“白的量”来理解的;
而在 HSB 模型中,B (Brightness) 指的是 明度,被认为是“光的量”,可以是任何颜色。
下面的代码统一用原型链改写了一下,
// HSL 颜色正则
var hslReg = /^hsl\(.+?\)$/gi;
// RGB 转 HSL
String.prototype.rgb2Hsl = function () {
var c = this.colorHex();
var r = parseInt(c.substring(1, 3), 16) / 255;
var g = parseInt(c.substring(3, 5), 16) / 255;
var b = parseInt(c.substring(5, 7), 16) / 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
h = Math.round(h * 360)
s = Math.round(s * 100)
l = Math.round(l * 100)
return 'hsl(' + h + ', ' + s + '%, ' + l +'%)';
}
// HSL 转 RGB
String.prototype.hsl2Rgb = function () {
var r, g, b;
var o = this.replace(/hsl\(|\)|\s/gi, '').split(',');
h = parseInt(o[0]) / 360;
s = parseInt(o[1]) / 100;
l = parseInt(o[2]) / 100;
if (hslReg.test(this)) {
if (s == 0) {
r = g = b = l; // achromatic
} else {
var hue2rgb = function hue2rgb(p, q, t) {
if (t < 0) t += 1; if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return 'rgb(' + Math.round(r * 255) + ', ' + Math.round(g * 255) + ', ' + Math.round(b * 255) + ')';
}
END.
关于 RGB,HEX,HSL 颜色相互转换
Hex hsl 转换 php,关于 RGB,HEX,HSL 颜色相互转换相关推荐
- Hex hsl 转换 php,HEX和RGB和HSL颜色数值在线转换工具
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 //http://stackoverflow.com/questions/2353211/hsl-to-rg ...
- css rgb转hsl,HSL到RGB颜色转换
也是从这里,它很好地解释了它的数学原理. 这基本上是一堆可以与HSL(Hue Saturation Lightness)相互转换的函数 经过测试并在PHP 5.6.15上工作 TL; DR:完整代码可 ...
- Atitit 从 RGB 到 HSL 或 HSV 的转换
Atitit 从 RGB 到 HSL 或 HSV 的转换 1.1. 从 RGB 到 HSL 或 HSV 的转换公式与原理1 1.2. public static HSV RGB2HSV(Color ...
- 在C++Builder中可以利用FireMonkey的函数实现RGB与HSL之间的转换
RGB转换为HSL的算法一般需要自己编写,但是在C++Builder中可以利用FireMonkey的函数实现RGB与HSL之间的转换. 下面是利用FireMonkey的RGBtoHSL和HSLtoRG ...
- [Python模块学习]用colorsys模块转换颜色模型,常见颜色模型简介(RGB/HSV/HSL/YIQ)
colorsys模块 博主最近又进入了无聊模式,没事就翻Python标准库读源码读着玩.但是里面有几个模块确实规模比较大,所以坑挖了一半就停了-现在电脑桌面上一堆没填完的坑.总之慢慢填吧- 今天发现了 ...
- rgb hsl转换_python中的rgb hsl转换
rgb hsl转换 The most common ways of encoding colour values are RGB (red, green and blue) and HSL (hue, ...
- RGB生成颜色c语言,C++实现RGB和HSL颜色转换代码
#include "stdafx.h" #define min3v(v1, v2, v3) ((v1)>(v2)? ((v2)>(v3)?(v3):(v2)):((v1 ...
- 前端需要了解的颜色模型,RGB、HSL和HSV
目录 RGB模型 RGB颜色值 rgb 转 hex hex 转 rgb HSL模型 HSV(B)模型 RGB 与 HSL 的转换 rgb 转 hsl hsl 转 rgb 颜色模型,是用来表示颜色的数学 ...
- RGB、HSL、HSV及各种颜色选择器界面
你知道吗?原来颜色是种四维产物. 色彩体系模型 我们知道,在描述一个颜色时,往往需要4个变量,其中三个变量代表颜色,最后一个变量代表透明度. 以目前应用最广泛的孟塞尔色体为例,横切面展示了色相的变化. ...
最新文章
- mysql 存储过程 无限分类_mysql存储过程实现无限分类
- 更新至Android Studio4.1后发现as打不开的解决方案
- java遍历Set集合
- 华为switch上配置MSTP
- 深入理解linux网络技术内幕读书笔记(十)--帧的接收
- IO中的阻塞、非阻塞、同步、异步概念分析详解(通俗易懂)
- linux 命令缺失安装,Redhat7没有安装ifconfig命令的解决方法
- Java 编程语言单词汇总
- java web后台开发跟手机APP后台开发有什么不同? 二者怎么通信?
- 教育网Linux下赶mule
- Teredo Tunnel Adapter: Error Code 10
- 慎用!wordpress的额外css功能会浪费id资源!
- docker ss-pannel_如何构建Docker镜像
- php文本式留言,基于文本的留言簿_php
- 20了解网络设备管理工具 Ansible Network 的基本用法,包括配置管理、状态采集的教程
- 【STM32Cube】学习笔记(六):DHT11温湿度传感器
- vue3学习5:v-for
- Google Gmail邮箱一次性标记所有未读邮件为已读
- 基于Vue,ElementUI开发的一款表单设计器
- qq javax.mail.authenticationfailedexception
热门文章
- lua excel to mysql_在Lua程序中使用MySQL的教程
- 万字长文:对账系统从入门到精通(建议收藏)
- arduino蜂鸣器_板卡推荐BPIUNO32 arduino 开发板,支持webduino与arduino应用
- javaScript学习笔记之比较运算符||逻辑运算符||条件运算符(三目运算符)
- Android killer软件闪退的解决办法?
- 渗透测试神器CS(4.0)的使用
- java 获取服务器网络名_java-siger java使用siger 获取服务器硬件信息(CPU 内存 网络 io等) - 下载 - 搜珍网...
- 浏览器缓存原理以及本地存储
- Emacs中的Color Theme以及字体设置
- html笔记(二)html4+css2.0(元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹)