介绍
在 JavaScript 中，我们经常需要对颜色进行转换和处理。例如，我们可能需要将颜色从 RGB 格式转换为 HEX 格式，或者将颜色从十六进制字符串转换为 RGB 数组。
RGB 转 HEX
RGB 和 HEX 是两种常见的颜色表示方式。RGB 表示红、绿、蓝三种颜色的强度值，通常用一个包含三个数字的数组或对象表示。例如，红色可以表示为 { r: 255, g: 0, b: 0 } 或 (255, 0, 0)。而 HEX 表示颜色的十六进制值，通常以 # 开头，后面跟着六个十六进制数字。例如，红色可以表示为 #FF0000。
将 RGB 颜色转换为 HEX 颜色的方法比较简单。我们只需要将 RGB 值转换为十六进制，并将其拼接成一个字符串即可。
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
这个函数接受三个参数，分别是红、绿、蓝三种颜色的强度值。它使用位运算和字符串切片来将 RGB 值转换为 HEX 值。例如，将 (255, 0, 0) 转换为 HEX 值的结果是 #FF0000。
HEX 转 RGB
将 HEX 颜色转换为 RGB 颜色的方法也比较简单。我们只需要将十六进制值拆分为三个部分，分别转换为十进制，并将它们包装在一个数组或对象中即可。
function hexToRgb(hex) {
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
return { r, g, b };
}
这个函数接受一个参数 hex，表示要转换的 HEX 颜色值。它使用 parseInt 函数将 HEX 值转换为十进制，并将其包装在一个对象中。例如，将 #FF0000 转换为 RGB 值的结果是 { r: 255, g: 0, b: 0 }。
RGB 转 HSL
除了 RGB 和 HEX 之外，HSL（色相、饱和度、亮度）也是一种常见的颜色表示方式。HSL 颜色包括三个属性：色相、饱和度和亮度。其中，色相指的是颜色的基本色调，饱和度指的是颜色的纯度或强度，亮度指的是颜色的明暗程度。
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
let max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
let 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;
}
return { h, s, l };
}
这个函数接受三个参数，分别是红、绿、蓝三种颜色的强度值。它使用一些计算公式将 RGB 值转换为 HSL 值，并将其包装在一个对象中。例如，将 { r: 255, g: 0, b: 0 } 转换为 HSL 值的结果是 { h: 0, s: 1, l: 0.5 }，其中 h 表示色相，s 表示饱和度，l 表示亮度。
HSL 转 RGB
function hslToRgb(h, s, l) {
let r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
let 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;
}
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
let p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
}
这个函数接受三个参数，分别是色相、饱和度和亮度。它使用一些计算公式将 HSL 值转换为 RGB 值，并将其包装在一个对象中。例如，将 { h: 0, s: 1, l: 0.5 } 转换为 RGB 值的结果是 { r: 255, g: 0, b: 0 }。
