▶️运行示例代码
RGB原理
RGB色彩模式是工业界的一种颜色标准，是通过对红（R）、绿（G）、蓝（B）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
RGB是从颜色发光的原理来设定的，当它们的光相互叠合的时候，色彩相混，而亮度却等于两者亮度之总和，越混合亮度越高，即加法混合。
红、绿、蓝三个颜色通道每种色各分为256阶亮度，当三色灰度数值相同时，产生不同灰度值的灰色调，即三色灰度都为0时，是最暗的黑色调；三色灰度都为255时，是最亮的白色调。
HSL原理
HSL色彩模式是工业界的另一种颜色标准，是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色相，饱和度，明度三个通道的颜色。
HSL的H(hue)分量，代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。
HSL的S(saturation)分量，指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从灰度到纯色的变化。
HSL的L(lightness)分量，指的是色彩的明度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。
HSB（HSV）原理
HSB又称HSV，表示一种颜色模式：在HSB模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度HSB模式对应的媒介是人眼。
色相（H,hue）：在0~360°的标准色轮上，色相是按位置度量的。在通常的使用中，色相是由颜色名称标识的，比如红、绿或橙色。黑色和白色无色相。
饱和度（S,saturation）：表示色彩的纯度，为0时为灰色。白、黑和其他灰色色彩都没有饱和度的。在最大饱和度时，每一色相具有最纯的色光。取值范围0～100%。
亮度（B,brightness或V,value）：是色彩的明亮度。为0时即为黑色。最大亮度是色彩最鲜明的状态。取值范围0～100%。
HSB（HSV）和HSL区别
HSB 和 HSL 在字面意思上是一样的：
H指的是色相（Hue），就是颜色的名称，例如‘红色’、‘蓝色’等。
S指的是饱和度（Saturation），即颜色的纯度。
L(Lightness)和B(Brightness)是明度，颜色的明亮程度。
在原理和表现上，HSL和HSB中的H（色相）完全一致，但二者的S（饱和度）不一样，L和B（明度）也不一样。
HSB中的S控制纯色中混入白色的量，值越大，白色越少，颜色越纯；
HSB中的B控制纯色中混入黑色的量，值越大，黑色越少，明度越高。
HSL中的S和黑白没有关系，饱和度不控制颜色中混入黑白的多寡；
HSL中的L控制纯色中的混入的黑白两种颜色。
实际应用场景中，Photoshop和Affinity Designer的拾色器。两者分别使用了HSB和HSL颜色模型，两个拾色器都是X轴表示饱和度，越往右，饱和度越高；Y轴表示明度，越往上明度越高。
Photoshop的HSB颜色模型拾色器，如下图所示，HSB的B（明度）控制纯色中混入黑色的量，越往上，值越大，黑色越少，颜色明度越高。
如下图所示，HSB的S（饱和度）控制纯色中混入白色的量，越往右，值越大，白色越少，颜色纯度越高。
Affinity Designer的HSL颜色模型拾色器，如下图所示，Y轴明度轴，从下至上，混入的黑色逐渐减少，直到50%位置处完全没有黑色，也没有白色，纯度达到最高。继续往上走，纯色混入的白色逐渐增加，到达最高点为纯白色，明度最高。
HSL和HSB（HSV）最大的差别是对于白色的理解，HSL当L达到最大时是白色，与饱和度S无关，所以可以理解此处的亮度L其实指的是白的量，白的量越多就越白，越亮越白比较像大自然的光。HSB（HSV）饱和度最低的时候是白色。明度B(V)改变只会改变颜色与颜色对比时的明暗关系。所以这里的饱和度S，可以理解为是彩色的量，彩色的量为0了，就自然是白色的。饱和度越高颜色越鲜明。
RGB空间和HSL空间
左为 RGB 空间，右为 HSL 空间
RGB到HSL或HSV的转换
HSL到RGB的转换
HSB(HSV)到RGB转换
HSL/V/B在各种环境下的取值范围
» 知识库
