最近在做canvas渲染时，需要对颜色进行转换整合，主要参考CSS Color Module对颜色的处理方式，整理了rgb(包括具名颜色和16进制颜色转rgb)和hsl颜色相关的转换与合并处理方案(大量公式预警！！！)。
具名颜色(Named Color)转换16进制颜色(HEX Color)
具名颜色指的常见的颜色指示关键字，由 CSS Color Module规范定义，包括常见的white，black, orange等。
常见的具名颜色需要转换为其它格式便于修改颜色的饱和度，明度之类的信息。
以下是整合后版本
/**
* 已知的颜色描述词转为16进制颜色
*/
const NAMED_COLORS = {
black: '#000000',
silver: '#c0c0c0',
gray: '#808080',
white: '#ffffff',
maroon: '#800000',
red: '#ff0000',
purple: '#800080',
fuchsia: '#ff00ff',
green: '#008000',
lime: '#00ff00',
olive: '#808000',
yellow: '#ffff00',
navy: '#000080',
blue: '#0000ff',
teal: '#008080',
aqua: '#00ffff',
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
blanchedalmond: '#ffebcd',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff', // 同aqua
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgreen: '#006400',
darkgrey: '#a9a9a9',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkslategrey: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
gold: '#ffd700',
goldenrod: '#daa520',
greenyellow: '#adff2f',
grey: '#808080', // 同gray
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavender: '#e6e6fa',
lavenderblush: '#fff0f5',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#fafad2',
lightgray: '#d3d3d3',
lightgreen: '#90ee90',
lightgrey: '#d3d3d3',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff', // 同fuchsia
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370db',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
oldlace: '#fdf5e6',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#db7093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
rebeccapurple: '#663399',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
slategrey: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
thistle: '#d8bfd8',
tomato: '#ff6347',
transparent: '#00000000',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
whitesmoke: '#f5f5f5',
yellowgreen: '#9acd32'
};
16进制颜色(HEX Color)转换为RGB颜色(RGB Color)
16进制颜色色值为3位或者4位时需要重复补齐为6位或8位再处理，比如#345补齐后#334455,然后再分别将三通道的色值以及透明度转换为10进制数据即可。
示例代码如下
// 以#33445566为例
const r = parseInt('0x33', 16);
const g = parseInt('0x44', 16);
const b = parseInt('0x55', 16);
const a = parseInt(`0x66`, 16) / 255;
HSL转RGB
维基百科上提供了两种推导公式 公式1 和公式2，有简单的推导过程。CSS COLOR4也提供了简单转换示例，使用的是维基百科上的公式2，推导过程可前往查看。以下则为简单示例(去除数据预处理)
/**
* HSL => RGB
* @params number hue∈[0， 360）
* @params number sat∈ [0， 1]
* @params number light∈[0， 1]
* @return [r, g, b] r∈[0， 255], g∈[0， 255], b∈[0， 255]
*/
const HSLToRGB = (hue, sat, light) => {
function f(n) {
let k = (n + hue / 30) % 12;
let a = sat * Math.min(light, 1 - light);
return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
}
return [f(0) * 255, f(8) * 255, f(4) * 255];
};
RGB转HSL
维基百科上提供了推导公式。CSS COLOR4也提供了简单转换示例, 详细推导过程参见维基百科公式。以下则为规范提供的简单示例(去除数据预处理)
/**
* RGB => HSL
* @params R, G, B ∈ [0, 1]
* @params number sat∈ [0， 1]
* @params number light∈[0， 1]
* @return [H, S, L] H∈[0，360], S∈[0， 1], L∈[0， 1]
*/
const RGBToHSL = (R, G, B) => {
const M = Math.max(R, G, B);
const m = Math.min(R, G, B);
const C = M - m;
const L = (M + m) / 2;
const S = L === 1 || L === 0 ? 0 : C / (1 - Math.abs(2 * L - 1));
if (M === R) {
const H_ = ((G - B) / C) % 6;
const H = H_ * 60;
return [H, S, L];
}
if (M === G) {
const H_ = (B - R) / C + 2;
const H = H_ * 60;
return [H, S, L];
}
if (M === B) {
const H_ = (R - G) / C + 4;
const H = H_ * 60;
return [H, S, L];
}
};
计算两个颜色的对比度
推荐一篇很棒的博文，作者讨论了在深浅主题背景下文本颜色的选择，很值得一读。以下则为最简单的一种方式： 使用背景颜色的十六进制值与纯黑色和纯白色的中间值进行比较。如果小于中间值文本取白色，否则取黑色。
const getContrast50 = (hexcolor) => {
return (parseInt(hexcolor, 16) > 0xffffff/2) ? 'black':'white';
}
同时W3C内容可访问性指南提供了一些关于颜色对比度以及如何确定任意两种颜色之间是否有足够的对比度的处理方式，使其确保背景和文本之间有足够的对比度，以下则为简单示例
/**
* 计算颜色的相对亮度(0-1) 0表示最深的黑色 1表示最浅的白色 用于比较两个颜色的对比度
* 相对亮度参见规范https://www.w3.org/TR/WCAG20/#relativeluminancedef
* @params R, G, B ∈ [0, 255]
* @returns L ∈ [0, 1]
*/
const getRelativeLuminance = (R, G, B) => {
const R_sRGB = R / 255;
const G_sRGB = G / 255;
const B_sRGB = B / 255;
const getRelativeValue = (value) => {
if (value <= 0.03928) return value / 12.92;
return ((value + 0.055) / 1.055) ** 2.4;
};
const R = getRelativeValue(R_sRGB);
const G = getRelativeValue(G_sRGB);
const B = getRelativeValue(B_sRGB);
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};
/**
* 计算两个颜色的对比度 1-21（通常写成1:1到21:1）
* 对比度参见规范https://www.w3.org/TR/WCAG20/#contrast-ratiodef
* @param L1 相对亮度
* @param L2 行对亮度
* @return L ∈ [1, 21]
*/
const getColorContrast = (L1, L2) => {
const L_lighter = L1 > L2 ? L1 : L2;
const L_darker = L1 > L2 ? L2 : L1;
return (L_lighter + 0.05) / (L_darker + 0.05);
};
反转颜色
该方案存在一个问题 如果颜色恰好是在灰色附近（比如rgb(127,127, 127)），它的反色和它自己差别不大
/**
* @params R, G, B ∈ [0, 255]
* @returns R1, G1, B1 ∈ [0, 255]
*/
const getNegationColor = (R, G, B) => [255 - R, 255 - G, 255 - B]
混合两种颜色
如果两种颜色的透明度相同，无需考虑透明度影响，可参考npm包color的处理方式，其实现方式参考了sass的颜色混合处理方式
如果两种颜色透明度不同，则需要考虑不同透明度的混合影响，处理方式则完全不同，可参考CSS COLOR5规范中的color_mix()方法的处理方案，以下为简单示例
/**
* 混合两种颜色 考虑透明度影响
* @param color1=[R1, G1, B1, Alpha1] R1, G1, B1 ∈ [0, 255], Alpha1 ∈ [0, 1]
* @param color2=[R2, G2, B2, Alpha2] R2, G2, B2 ∈ [0, 255], Alpha2 ∈ [0, 1]
* @param weight ∈ [0, 1] color1混合时所占权重 默认为0.5
*/
const mixColors = (color1, color2, weight) => {
const [R1, G1, B1, Alpha1] = color1;
const [R2, G2, B2, Alpha2] = color2;
const w1 = weight === undefined ? 0.5 : weight;
const w2 = 1 - w1;
const Alpha = Alpha1 * w1 + Alpha2 * w2;
const [R1_, G1_, B1_] = [R1 * Alpha1, G1 * Alpha1, B1 * Alpha1];
const [R2_, G2_, B2_] = [R2 * Alpha2, G2 * Alpha2, B2 * Alpha2];
const [R_, G_, B_] = [
R1_ * w1 + R2_ * w2,
G1_ * w1 + G2_ * w2,
B1_ * w1 + B2_ * w2,
];
const [R, G, B] = [R_ / Alpha, G_ / Alpha, B_ / Alpha];
return `rgba(${R}, ${G}, ${B}, ${Alpha})`;
};
参考
- CSS Color Module level4 drafts.csswg.org/css-color/
- CSS Color Module level5 drafts.csswg.org/css-color-5…
- W3C内容可访问性指南 www.w3.org/TR/WCAG20/
- 维基百科HSL&HSV en.wikipedia.org/wiki/HSL_an…
- github color github.com/Qix-/color
