RGB 是对机器很友好的色彩模式，但并不够人性化，因为我们对色彩的认识往往是”什么颜色？鲜艳不鲜艳？亮还是暗？”。HSL 模式和 HSV(HSB) 都是基于 RGB 的，是作为一个更方便友好的方法创建出来的。HSB 为 色相，饱和度，明度，HSL 为 色相，饱和度，亮度，HSV 为色相，饱和度，明度。HSB 和 HSV 是是一样的，只是叫法不同，HSL 则还有一些细微的区别：在所有的情况下，H(Hue) 代表色相，S(Saturation) 代表饱和度。Hue（色相）是指取值范围在0-360°的圆心角，每个角度可以代表一种颜色。B 在 HSB 模式中是 Brightness 的意思, V 在 HSV 中是值，但是所表述的是一个东西：对光的量或光源的功率的感知。色相和明度（值）可以在0 - 1或者0% - 100%间取值。HSL 稍微有一些不同，Hue（色相）和 HSB/HSV 模式中一样用数值表示，但是， S，同样代表“饱和度”，定义不一样，且需要转换。 L 代表亮度，和 Brightness/Value 不一样。Brightness（明度）是被认为是”光的量“，可以是任何颜色。而 Lightness（亮度）是作为”白的量“来理解的。Saturation（饱和度）不一样，因为在两个模型中，饱和度都按比例缩放以适应明度或亮度的定义。两者的区别，和他们之间对于饱和度的定义的不同。咱们拿案例看吧，先选同一个色 #f200ff放入 HSL Color Picker，显示 HSL 数值为：H(297), S(100), L(50)<img src="http://pic3.zhimg.com/4af6abf0370ee6b6dc0f03716cba7f26_b.jpg" data-rawwidth="771" data-rawheight="361" class="origin_image zh-lightbox-thumb" width="771" data-original="http://pic3.zhimg.com/4af6abf0370ee6b6dc0f03716cba7f26_r.jpg">但是我们放在 Sketch 里面看一下，显示的 HSB 数值为，H(297), S(100), B(100) ：<img src="http://pic4.zhimg.com/9f02c36cc4b4e55db2bf6a5238e2fc6b_b.jpg" data-rawwidth="214" data-rawheight="423" class="content_image" width="214">同样，需要提醒一下的是，CSS 里头支持的是 HSL，而不是 HSB，不要把 HSB 的数值直接套用了，不然的话你看到的可能会是不一样的颜色。 HSL 和 HSB 哪一个更适合人机界面，是有争议的，实际运用的区别会和我上面的例子一样，具体的区别和优劣势，可移步到这看：
HSL 类似于 HSV。对于一些人，HSL 更好的反映了“饱和度”和“亮度”作为两个独立参数的直觉观念，但是对于另一些人，它的饱和度定义是错误的，因为非常柔和的几乎白色的颜色在 HSL 可以被定义为是完全饱和的。对于 HSV 还是 HSL 更适合于人类用户界面是有争议的。
W3C的CSS3 规定声称“HSL 的优点是它对称于亮与暗（HSV 就不是这样）…”，这意味着： 在 HSL 中，饱和度分量总是从完全饱和色变化到等价的灰色（在 HSV 中，在极大值 V 的时候，饱和度从全饱和色变化到白色，这可以被认为是反直觉的）。 在 HSL 中，亮度跨越从黑色过选择的色相到白色的完整范围（在 HSV 中，V 分量只走一半行程，从黑到选择的色相）。 在软件中，通常以一个线性或圆形色相选择器和在其中为选定的色相选取饱和度和明度/亮度的一个二维区域（通常为方形或三角形）形式提供给用户基于色相的颜色模型（HSV 或 HSL）。通过这种表示，在 HSV 和 HSL 之间的区别就无关紧要了。但是很多程序还允许你通过线性滑块或数值录入框来选择颜色的明度/亮度，而对于这些控件通常使用要么 HSL 要么 HSV（而非二者）。HSV 传统上更常用。
