場景：不同顏色線條上的點有文字標(biāo)注，實現(xiàn)文字顏色與線條同色系刻像，但是能看清锹安；拿到rgb顏色值后轉(zhuǎn)成hsl短荐，然后讓l量加某個數(shù)值；以下所有方法均已在項目中驗證可行叹哭。
image.png
- 十六進(jìn)制(#ff00ff)轉(zhuǎn)RGB
function hexToRgb(hex) {
// 確保十六進(jìn)制代碼以“#”開頭
hex = hex.replace(/^#?/, "#");
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
}
- RGB轉(zhuǎn)十六進(jìn)制
function rgbToHex(r, g, b) {
return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
- RGB轉(zhuǎn)HSL
/**
* RGB 顏色值轉(zhuǎn)換為 HSL.
* 轉(zhuǎn)換公式參考自 http://en.wikipedia.org/wiki/HSL_color_space.
* r, g, 和 b 需要在 [0, 255] 范圍內(nèi)
* 返回的 h, s, 和 l 在 [0, 1] 之間
* @param Number r 紅色色值
* @param Number g 綠色色值
* @param Number b 藍(lán)色色值
* @return Array HSL各值數(shù)組
*/
function rgbToHsl(r, g, b) {
(r /= 255), (g /= 255), (b /= 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;
}
return [h, s, l];
//return this.hslToRgb(h, s, l + 0.25); // l+0.25使得明亮度增加
}
- HSL轉(zhuǎn)rgb
/**
* HSL顏色值轉(zhuǎn)換為RGB.
* h, s, 和 l 設(shè)定在 [0, 1] 之間
* 返回的 r, g, 和 b 在 [0, 255]之間
* @param Number h 色相
* @param Number s 飽和度
* @param Number l 亮度
* @return Array RGB色值數(shù)值
*/
function hslToRgb(h, s, l) {
var r, g, b;
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
)}`;
}
HSL：https://zhuanlan.zhihu.com/p/140478770?utm_id=0
色彩有三個基本的屬性忍宋，“色相（Hue）、飽和度（Saturation）风罩、亮度（Lightness）”糠排，取首字母簡稱為hsl功能。
- hsl可以單獨對某一個顏色的色相超升、飽和度入宦、明度進(jìn)行調(diào)整哺徊；
- 色相的調(diào)整只能在該顏色周圍變化，例如藍(lán)色變?yōu)樗{(lán)紫色乾闰、藍(lán)綠色落追，不能直接變成紅色，
- 色相：什么顏色
- 飽和度：濃淡
- 亮度：明暗
image.png
image.png
