色彩空间中的HSL,HSV,HSB有什么区别
发布网友
发布时间：2022-04-23 00:20
共2个回答
热心网友
时间：2022-04-06 13:13
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.mg.com/4af6abf0370ee6b6dc0f03716cba7f26_b.jpg" data-rawwidth="771" data-rawheight="361" class="origin_image zh-lightbox-thumb" width="771" data-original="http://pic3.mg.com/4af6abf0370ee6b6dc0f03716cba7f26_r.jpg">
但是我们放在 Sketch 里面看一下，显示的 HSB 数值为，H(297), S(100), B(100) ：
<img src="http://pic4.mg.com/9f02c36cc4b4e55db2bf6a5238e2fc6b_b.jpg" data-rawwidth="214" data-rawheight="423" class="content_image" width="214">
同样，需要提醒一下的是，CSS 里头支持的是 HSL，而不是 HSB，不要把 HSB 的数值直接套用了，不然的话你看到的可能会是不一样的颜色。
HSL 和 HSB 哪一个更适合人机界面，是有争议的，实际运用的区别会和我上面的例子一样，具体的区别和优劣势，可移步到这看：
热心网友
时间：2022-04-06 14:31
下面为hsl的三张图：
下面为hsb(hsv)的三张图：
