色彩空间中的HSL、HSV、HSB有什么区别？

作者：大蔚陈
链接：https://www.zhihu.com/question/22077462/answer/29483467
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

这是特别容易混淆的几个概念。

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="https://i-blog.csdnimg.cn/blog_migrate/256ef21e204751583e07ffe9471108e3.png" data-rawwidth="771" data-rawheight="361" class="origin_image zh-lightbox-thumb" width="771" data-original="https://pic3.zhimg.com/4af6abf0370ee6b6dc0f03716cba7f26_r.jpg">

• 但是我们放在 Sketch 里面看一下，显示的 HSB 数值为，H(297), S(100), B(100) ：

<img src="https://i-blog.csdnimg.cn/blog_migrate/84b18dd82068398895719aac438e737a.png" data-rawwidth="214" data-rawheight="423" class="content_image" width="214">
同样，需要提醒一下的是，CSS 里头支持的是 HSL，而不是 HSB，不要把 HSB 的数值直接套用了，不然的话你看到的可能会是不一样的颜色。

HSL 和 HSB 哪一个更适合人机界面，是有争议的，实际运用的区别会和我上面的例子一样，具体的区别和优劣势，可移步到这看：
Color Models: RGB, HSV, HSL