[sc name=”zhuanzai” author=”jonathantneal” link=”https://github.com/jonathantneal/convert-colors/tree/master/src” ][/sc]
HEX and RGB
@无名 正则hex转rgb
function hexToRgb(hex) {
var result;
hex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/gi, '$1$1$2$2$3$3');
hex.replace(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/gi, function (match, $1, $2, $3) {
result = [parseInt($1, 16), parseInt($2, 16), parseInt($3, 16)];
});
return result;
}
function hex2rgb(hex) {
// #<hex-color>{3,4,6,8}
const hexColorMatch = /^#?(?:([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])?|([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})?)$/i;
const [, r, g, b, a, rr, gg, bb, aa] = hex.match(hexColorMatch) || [];
if (rr !== undefined || r !== undefined) {
const red = rr !== undefined ? parseInt(rr, 16) : parseInt(r + r, 16);
const green = gg !== undefined ? parseInt(gg, 16) : parseInt(g + g, 16);
const blue = bb !== undefined ? parseInt(bb, 16) : parseInt(b + b, 16);
const alpha = aa !== undefined ? parseInt(aa, 16) : a !== undefined ? parseInt(a + a, 16) : 255;
return [red, green, blue, alpha].map(c => c * 100 / 255);
}
return undefined;
}
export function rgb2hex(rgbR, rgbG, rgbB) {
return `#${((1 << 24) + (Math.round(rgbR * 255 / 100) << 16) + (Math.round(rgbG * 255 / 100) << 8) + Math.round(rgbB * 255 / 100)).toString(16).slice(1)}`;
}
HSL and hsv
function hsl2hsv(hslH, hslS, hslL) {
const hsv1 = hslS * (hslL < 50 ? hslL : 100 - hslL) / 100;
const hsvS = hsv1 === 0 ? 0 : 2 * hsv1 / (hslL + hsv1) * 100;
const hsvV = hslL + hsv1;
return [ hslH, hsvS, hsvV ];
}
function hsv2hsl(hsvH, hsvS, hsvV) {
const hslL = (200 - hsvS) * hsvV / 100;
const [ hslS, hslV ] = [
hslL === 0 || hslL === 200 ? 0 : hsvS * hsvV / 100 / (hslL <= 100 ? hslL : 200 - hslL) * 100,
hslL * 5 / 10
];
return [ hsvH, hslS, hslV ];
}
hwb-hsv
function hwb2hsv(hwbH, hwbW, hwbB) {
const [ hsvH, hsvS, hsvV ] = [
hwbH,
hwbB === 100 ? 0 : 100 - hwbW / (100 - hwbB) * 100,
100 - hwbB
];
return [ hsvH, hsvS, hsvV ];
}
function hsv2hwb(hsvH, hsvS, hsvV) {
const [ hwbH, hwbW, hwbB ] = [
hsvH,
(100 - hsvS) * hsvV / 100,
100 - hsvV
];
return [ hwbH, hwbW, hwbB ];
}
rgb-hsl
function rgb2hsl(rgbR, rgbG, rgbB, fallbackhue) {
const hslH = rgb2hue(rgbR, rgbG, rgbB, fallbackhue);
const hslV = rgb2value(rgbR, rgbG, rgbB);
const hslW = rgb2whiteness(rgbR, rgbG, rgbB);
// calculate value/whiteness delta
const hslD = hslV - hslW;
// calculate lightness
const hslL = (hslV + hslW) / 2;
// calculate saturation
const hslS = hslD === 0 ? 0 : hslD / (100 - abs(2 * hslL - 100)) * 100;
return [ hslH, hslS, hslL ];
}
function hsl2rgb(hslH, hslS, hslL) {
// calcuate t2
const t2 = hslL <= 50 ? hslL * (hslS + 100) / 100 : hslL + hslS - hslL * hslS / 100;
// calcuate t1
const t1 = hslL * 2 - t2;
// calculate rgb
const [ rgbR, rgbG, rgbB ] = [
hue2rgb(t1, t2, hslH + 120),
hue2rgb(t1, t2, hslH),
hue2rgb(t1, t2, hslH - 120)
];
return [ rgbR, rgbG, rgbB ];
}
rgb-hsv
function rgb2hsv(rgbR, rgbG, rgbB, fallbackhue) {
const hsvV = rgb2value(rgbR, rgbG, rgbB);
const hsvW = rgb2whiteness(rgbR, rgbG, rgbB);
const hsvH = rgb2hue(rgbR, rgbG, rgbB, fallbackhue);
// calculate saturation
const hsvS = hsvV === hsvW ? 0 : (hsvV - hsvW) / hsvV * 100;
return [ hsvH, hsvS, hsvV ];
}
function hsv2rgb(hsvH, hsvS, hsvV) {
const rgbI = floor(hsvH / 60);
// calculate rgb parts
const rgbF = hsvH / 60 - rgbI & 1 ? hsvH / 60 - rgbI : 1 - hsvH / 60 - rgbI;
const rgbM = hsvV * (100 - hsvS) / 100;
const rgbN = hsvV * (100 - hsvS * rgbF) / 100;
const rgbT = hsvV * (100 - (100 - rgbF) * hsvS / 100) / 100;
const [ rgbR, rgbG, rgbB ] = rgbI === 5
? [ hsvV, rgbM, rgbN ]
: rgbI === 4
? [ rgbT, rgbM, hsvV ]
: rgbI === 3
? [ rgbM, rgbN, hsvV ]
: rgbI === 2
? [ rgbM, hsvV, rgbT ]
: rgbI === 1
? [ rgbN, hsvV, rgbM ]
: [ hsvV, rgbT, rgbM ];
return [ rgbR, rgbG, rgbB ];
}