HSL 和 HSV:你该用哪种色彩模型?

https://i0.wp.com/www.tobiamontanari.com/wp-content/uploads/2023/05/HSL_HSB_TobiaMontanari2.png?fit=1920%2C1080&ssl=1
科普版块

目录

●HSV 和 HSL

●HSV/HSB 色彩模型

●HSL 色彩模型

●实例

●总结

在之前的文章中,我们讨论过色彩模型和色彩空间,以及它们之间的重要区别。本文中,我们将深入了解两种很受欢迎的色彩模型 —— HSV(或 HSB)和 HSL —— 并探索它们在实践中的差别、优势和劣势。

在我们开始前,我需要做一个快速的免责声明:HSV 和 HSB 在亮度的算法上有些许差别。但值得注意的是,许多软件程序将 HSV 和 HSB 用作可互换的术语,并以同样的方式执行这两种模型。因此,在实践中,这两者之间没有区别。就本文而言,我们将其视为可互换使用的表达;若你想了解更多内容,可下划到文末查看快速解释。

HSV 和 HSL

HSV/HSB 和 HSL 常常分别以锥体和双锥体来表示。

Visual representation of HSV/HSB and HSL color models as a cones and a bi-cone.

HSV/HSB 模型中,锥体表示了从纯白到纯黑的色彩范围,色相则沿着锥体的圆周变化。饱和度值从中心点(白色)向锥体外围增长,最饱和的色彩就在外缘上。

HSL 模型中,双锥体表示了从白到黑的相同色彩范围,色相则沿着双锥体的圆周变化。饱和度值从中心点向双锥体外围增长,同样,最饱和的色彩就在外缘上。

虽然两者听起来很类似,但其中有一些需要考虑到的关键差别

HSV/HSB 色彩模型

HSV/HSB 色彩模型 —— 即色相(Hue)、饱和度(Saturation)、明度(Value),或色相(Hue)、饱和度(Saturation)、亮度(Brightness)—— 以三个维度来表示色彩:

色相:色相是色彩在色轮上的位置,以0°-360°来衡量。

饱和度:饱和度代表色彩的纯度。饱和度越高,色彩就显得越纯。饱和度以0%-100%来表示。在 HSV/HSB 色彩模型中,0%饱和度以白色来表示

明度/亮度:明度/亮度表示色彩的明亮程度。明度或亮度维度以0%-100%来表示。百分比越低,色彩就越暗;百分比越高,色彩才最为纯粹

HSL 色彩模型

HSL 色彩模型 —— 即色相(Hue)、饱和度(Saturation)、亮度(Lightness) —— 虽类似 HSV/HSB 色彩模型,但存在几个关键差异:

色相:色相仍是色彩在色轮上的位置,以0°-360°来衡量。

饱和度:饱和度仍代表色彩的纯度,以0%-100%来表示。在 HSL 色彩模型中,0%的饱和度以中灰来表示

亮度:亮度表示色彩的明亮程度。亮度越高,色彩就显得越明亮。亮度以0%(黑)-100%(白)来表示

(未完待续)


出处:Tobia Montanari,CSI

翻译:LorianneW | 盖雅翻译小组

views
https://i0.wp.com/www.tobiamontanari.com/wp-content/uploads/2023/04/Additive_Subtractive_Color.png?fit=1456%2C816&ssl=1
科普版块
初学者指南:加色法 VS 减色法

加色法和减色法。

https://i0.wp.com/www.tobiamontanari.com/wp-content/uploads/2023/04/Color_Model_vs_Color_Space.png?fit=1664%2C960&ssl=1
科普版块
初学者指南:色彩模型 VS 色彩空间

色彩模型和色彩空间。

uhdtv2.png
科普版块
欧洲广播联盟 UHDTV 科普

超高清电视是高清电视向更高保真度电视标准的自然进化。