![飞机杯](/f/yejiang.png)
![飞机杯](/f/yejiang.png)
04/21
2020
RGB 是用三原色的混合来表示颜色的,HSL 的三个维度则是色相、饱和度、亮度。
RGB 比较贴近显示器的发光原理,大部分电脑屏幕的每个像素都是由 红绿蓝 三个发光点组成,根据 RGB 值控制发光强度。但是对于普通人来说,看 RGB 值的数字比较难以理解,很难从 RGB 值里面出这个颜色是什么颜色,饱和度高不高,亮度高不高。HSL 正是直接描述这三个维度的,因此在进行一些图像处理时,HSL 会更加合适。
根据搜索到的转换公式,我编写了一个函数,用于将 RGB 值转换成 HSL 值。
function rgb2hsl(r, g, b) { r = r / 255 g = g / 255 b = b / 255 const max = Math.max(r, g, b) const min = Math.min(r, g, b) let h let s let v let base if (max === min) { h = 0 } else { if (max === r) { base = 60 * ((g - b) / (max - min)) if (g >= b) { h = base } else { h = base + 360 } } if (max === g) { base = 60 * ((b - r) / (max - min)) h = base + 120 } if (max === b) { base = 60 * ((r - g) / (max - min)) h = base + 240 } } h = Math.round(h) if (max === 0) { s = 0 } else { s = Math.round((1 - min / max) * 100) / 100 } l = Math.round(((max + min) / 2) * 100) / 100 return [h, s, l] }
把 rgb 值作为参数传进去就行,例如:
// 输入: rgb2hsl(76,188,27) // 输出: [102, 0.86, 0.42]
这是 HSL 色彩空间的示意图。它像是一个圆柱体。
H 色相,单位是度数,0° - 360°。以我自己的理解,如果按 60° 为一个单位,那么 0°-360° 的颜色依次为 红 黄 绿 青 蓝 紫 红,所以根据 H 的度数,我们就可以知道这是什么颜色。
S 饱和度,单位是百分比,0% 到 100%,从没有饱和度(白色)到完全饱和。
L 亮度,单位是百分比,0% 到 100%,从没有亮度(黑色)到全亮(白色)。
假如一个 HSL 颜色值是 300,0.4,0.4
,你能想到它是什么颜色吗?
saber,saber你能不能帮找一下天地23的未删减合集,找了一星期了都没消息