JavaScript, HSV 或 HSL 色码转换 RGB
HSL 颜色编码为(Hue 色调、Saturation 饱和度、Lightness 亮度)。CSS 中 Hue 色调以 0 ~ 360 圆圈展开使用整数 <number> 表示为色环的角度。Saturation 饱和度和 Lightness 亮度以 0% ~ 100% 百分比表示。
以下列 range 数字滑动条,调整 Hue, Saturation, Lightness 直接显示颜色结果。
亦可输入 HEX (十六进位色码) 或点选下方 216 网页安全颜色来计算。建议在桌型电脑,行动装置可能不太理想。
几种 CSS 色码转换相关的 JavaScript 程式代码,但整合后使用相关软体测试比较时,例如 Photoshop 的色彩选择器,JavaScript 色码转换上有些部份仍有一点点因为小数点的进位,产生了些微小差距您可以尝试比较看看。
https://zh.wikipedia.org/wiki/HSL和HSV色彩空间
HSV 转换为 RGB
HSV (色相、饱和度、明度) 是描述颜色的模型,可以用圆锥体来表示。HSV 转换为 RGB (红、绿、蓝) 的过程是将圆锥体的底面切成六个扇形,每个扇形代表其中基本颜色,然后根据色相的角度和饱和度的半径来选择扇形内的颜色,最后根据明度的高度来调整颜色的亮度,得到 RGB 的三个分量。
function HSVtoRGB(h, s, b) {
s /= 100;
b /= 100;
let a = function (n) {
return b * (1 - s * Math.max(0, Math.min((n + h / 60) % 6, 4 - (n + h / 60) % 6, 1)));
};
return [255 * a(5), 255 * a(3), 255 * a(1)]
}
以 Array 阵列方式返回结果。
(200, 60, 10) ➔ 102, 204, 255
RGB 转换为 HSV
function RGBToHSV(r, g, b) {
let max = Math.max(r, g, b),
min = Math.min(r, g, b),
d = max - min,
h,
s = (max === 0 ? 0 : d / max),
v = max / 255;
switch (max) {
case min:
h = 0;
break;
case r:
h = (g - b) + d * (g < b ? 6 : 0);
h /= 6 * d;
break;
case g:
h = (b - r) + d * 2;
h /= 6 * d;
break;
case b:
h = (r - g) + d * 4;
h /= 6 * d;
break;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
v: Math.round(v * 100)
};
}
return 以 object 物件返回结果,乘数是为了依照 CSS 符合格式的值。
(102, 204, 255) ➔ 200, 60, 10
HEX 转换为 RGB (十六进位)
十六进位转换到 RGB 颜色,JavaScript 已经有 parseInt() 可以直接转换。
function HextoRGB(hex) {
let R = parseInt("0x" + hex.substr(0, 2), 16);
let G = parseInt("0x" + hex.substr(2, 2), 16);
let B = parseInt("0x" + hex.substr(4, 2), 16);
return [R, G, B];
}
以 Array 阵列方式返回 R, G, B 结果。
(66CCFF) ➔ 102, 204, 255
RGB 转换为 HEX (十六进位)
将 RGB 转换为 16 进位色码,将红色、绿色、蓝色的值从十进制转换为十六进制。HEX (十六进制) 是用六个数字或字母来表示颜色的编码方式,它可以用一个立方体来表示。HEX 转换为 RGB 的过程是将六个数字或字母分成三组,每组代表一种基本颜色的强度,然后根据十六进制的规则将每组转换为十进制的数字,得到 RGB 的三个分量。
function toFixHEX(n) {
if (n.length == 1) {
n = "0" + n;
}
return n;
}
function RGBtoHEX(r, g, b) {
let ColorR = Math.ceil(r).toString(16);
let ColorG = Math.ceil(g).toString(16);
let ColorB = Math.ceil(b).toString(16);
let ColorRGB = "#" + toFixHEX(ColorR) + toFixHEX(ColorG) + toFixHEX(ColorB);
return ColorRGB;
}
(102, 204, 255) ➔ #66CCFF