Get best of the week

CSS LCH颜色

我一直对色彩科学感兴趣。 2014年，我在各种会议上发表讲话，谈到CSS Color 4规范，在此之前，2009年，我编写了一个选择颜色的程序。她使用一个隐藏的Java小程序来支持ICC颜色配置文件并与CMYK一起正常工作。据我所知，这是同类程序中的第一个。我从未发布过它，但是导致了该出版物的出版。对色彩的兴趣将我带到了成为我丈夫的男人。 在2019年，我成为CSS Color 5规范的联合编辑。我的目标是具体化我的建议。



颜色修改，旨在允许设计人员任意自定义颜色通道以创建颜色选项。我也想将我的报价与此报价结合起来。CSS LCH颜色确实让我着迷。我深信，设计师在了解LCH颜色的更多知识时，会因他们仍然没有机会使用这些颜色而感到愤怒。

什么是LCH？


CSS Color 4模块除其他外，还具有LCH colors的定义。如今，所有主要的浏览器都已开始实施其支持，或者正在认真考虑这种可能性：


LCH是一种色彩空间，与每个人都习惯使用CSS的RGB / HSL色彩空间相比，它具有一些优势。实际上，我会走得更远，将LCH称为可以显着改变网络颜色工作方式的技术。这里有三个事实使我能够发表这样的声明。

▍1。与sRGB相比，LCH可以访问约50％的颜色


这是向前迈出的一大步。现在，我们可以设置的任何CSS颜色都在sRGB颜色空间中定义。几年前，这已经足够了，因为除专业显示器外，所有显示器的色域均小于sRGB。但是，现在一切不再如此。今天，大多数显示器的色域（即可以显示的颜色范围）接近P3。而且此色彩空间的体积增加了50％比空间sRGB的数量大。CSS当前绝对不能访问这些颜色。让我重复一遍：我们无法获得现代显示器可以显示的三分之一的颜色。这与一些次要颜色无关。我们正在谈论监视器可以显示的最鲜艳的色彩。由于监控器硬件的发展速度快于CSS规范和浏览器实现的速度，因此我们的站点看上去很苍白。


色彩空间sRGB和P3

▍2。LCH（和Lab）是感知上一致的色彩空间


使用LCH时，颜色空间中的相同数值变化会在颜色之间产生相同的感知差异。色彩空间的这种特性称为“感知均匀性”。RGB或HSL颜色空间在感知上不一致。这是此功能的一个非常有启发性的示例（这是该示例的来源）。


HSL颜色感知的异质性，

上排和下排的颜色在色调上相差20度。您认为这些颜色之间的感知差异是否相同？

▍3。LCH的亮度是一个指标，它意味着


在HSL色彩空间中，亮度是毫无意义的指标。颜色可能具有相同的亮度，但是其感知的亮度差异很大。我最喜欢的示例是黄色和蓝色的比较。您可能不相信我，但是下面显示的颜色具有相同的HSL亮度。


具有相同亮度的HSL颜色

两种颜色的亮度均为50％，但是它们肯定根本不具有相同的感知亮度。 HSL中“亮度”概念的含义是什么？

在这里，您可以与我争论，说至少在相同的色调（色相）和色彩饱和度下，亮度才有意义。即-在同一颜色内更改亮度时。事实是：增加HSL亮度，我们得到较浅的颜色，而减小-则得到较暗的颜色。但是发生的情况不一定是相同的颜色。


在恒定的色调和色彩饱和度下调整亮度

这两种颜色具有相同的色调和相同的饱和度，但是它们看起来像是同一颜色的较暗和较亮版本吗？

当使用LCH颜色模型时，具有相同发光度的颜色被感知为具有相同亮度的颜色，并且具有相同色度的颜色被感知为具有相同饱和度的颜色。

LCH颜色如何排列？


LCH是亮度，色度，色相（亮度，颜色，色调）的缩写。此颜色模型中的颜色成分与HSL颜色模型的成分有一定关系。但是这些颜色模型的组件之间存在严重差异。

LCH中的俯仰角与HSL音调不完全匹配。即-0-这不是完全红色。这种颜色更接近品红色。180不是绿松石色，而是蓝绿色，并且是完全互补的。


具有相同感知亮度的

颜色请注意，尽管这些颜色在色调上有很大差异，但看起来像具有相同感知亮度的颜色。

在HSL色彩空间中，饱和度由0-100的整洁值范围表示。事实是，此空间是将RGB简单转换为极坐标的结果。但是，在LCH中，色度分量的值在理论上是无限的。 LCH标准（如Lab）旨在能够代表人类感知的所有颜色。并非所有这些颜色都可以在监视器上显示，即使是支持P3色彩空间的一种。此外，我们不仅在谈论最大数量的显示颜色（取决于显示器的色域），而且还在谈论颜色的差异。

如果我通过一个例子来说明这个想法，也许会更容易理解。为了简单起见，让我们假设有一个监视器，其色域与sRGB色彩空间完全匹配。为了进行比较，2013 MacBook Air屏幕可以输出大约60％sRGB，但是正如已经提到的，大多数现代显示器可以显示150％sRGB。对于L = 50和H = 180（上图中的青色样本），C的最大值仅为35！对于L = 50和H = 0（粉红色），C的值可以达到77，而不会超出sRGB。如果L = 50且H = 320（紫色），则C的值可以达到108！

尽管缺乏边界可以被视为令人恐惧的事情（无论是关于人还是色彩空间），但没有什么可担心的：如果设置的颜色无法在特定显示器上显示，它将被还原为显示器支持的相似颜色。最后，没有什么新的：在显示器获得超过sRGB功能的色域之前，这正是色域小于sRGB的显示器上显示的普通CSS颜色所发生的情况。

LCH颜色选择器


我希望现在您也对使用LCH颜色的想法感兴趣。这就提出了如何可视化这些颜色的问题。

实际上，我很久以前就创建了相应的工具LCH Color Picker，主要用于帮助我和我的同事在编辑CSS Color 5时正确理解LCH功能。一种是了解理论，另一种是能够尝试使用滑块并亲眼看到结果。我什至买了一个域名css.land，在此发布相关示例。我们稍微使用了这个工具，我给它添加了新功能，但是我从未写过它。因此，此工具仅对我们和关注的人可用。这个 github仓库。


选择LCH颜色的方法

如果您对尝试使用LCH颜色感兴趣，则可以很好地使用此工具。以下是有关他的一些详细信息：

  • 颜色转换代码是由我们的一名团队成员编写的。我们相信，至少要在正确理解转换过程的基础上进行计算（也就是说，如果出现问题-这是代码中的错误，而不是对某些事物的误解的结果）。
  • 色度颜色分量支持在0到100以外的范围内进行更改，这使我们的工具与我们能够找到的其他工具有所区别。
  • 用户可以将任意CSS颜色加载到其中（使用“导入”按钮）。
  • 滑块仅允许您输入整数值，但是在滑块上方出现的黑色字段中，可以输入任何数字。
  • 在此过程中，您可以保存颜色并查看颜色的插值方式。
  • 支持颜色分析是否属于sRGB，P3颜色空间（或属于Rec.2020，甚至更广泛的颜色空间）。
  • 支持的透明度设置。
  • 最后，使用此工具非常有趣！特别是考虑到它是基于Mavo实现的（尽管这里使用了一些JavaScript，也就是说，它不是用纯HTML创建的Mavo项目）。

实际上，您可以在此处试用LCH拾色器。

问题和解答


我发表本文后，他们开始问我问题。我相信我应该在这里澄清一些常见的误解。

say您说尚未实现对浏览器中LCH颜色的支持，但我可以在文章中看到它们。这怎么可能？


本文中使用的所有颜色都属于sRGB色域。这是因为到目前为止，我们根本无法输出sRGB以外的颜色。sRGB是颜色空间，而不是颜色描述语法。例如，rgb(255 0 0)它们lch(54.292% 106.839 40.853)设置相同的颜色。

CHLCH拾色器如何显示sRGB以外的颜色？


我的程序LCH拾色器不显示此类颜色。而且，据我所知，Internet上没有任何程序可以显示这种颜色。 LCH拾色器项目是使用Web技术实现的，这意味着标准限制适用于任何其他网页。我将非输出颜色转换为sRGB。首先，我只是将RGB颜色分量带到了0-100％的范围内，但是由于有了PR，该程序现在使用了更为成功的算法。即，我们正在谈论降低LCH分量C的值，直到颜色落在sRGB限制之内。这就是为什么组分C的值增加到超过特定极限不会导致得出更亮的颜色的原因。事实是，尚不能使用CSS推论这种颜色。

▍我注意到Firefox显示的色彩比Chrome和Safari的色彩明亮。LCH支持有什么关系吗？


Firefox尚未实现规范中将CSS颜色限制为sRGB框架的部分。相反，浏览器只需将原始RGB值传递到屏幕即可。例如，rgb(100% 0% 0%)这是监视器可以显示的最亮的红色。尽管这似乎是一个明智的解决方案，但在这里我们面临着矛盾。事实是，使用这种方法，由于所有屏幕显示的颜色都不同，因此最多只能设置近似的颜色。通过将CSS颜色限制为已知的颜色空间（sRGB），我们获得了设备独立性。LCH和Lab颜色空间也与设备无关，因为它们基于实际测量的颜色。

about您能对彩色（display-p3 rgb）设计说些什么？自2017年以来，Safari一直在支持它！


我在发布本文后得知了这一点。我早就知道Safari正在使用此功能，但是不知何故我错过了它准备就绪的那一刻。实际上，上个月发布了这篇文章，描述了WebKit中的这种语法。惊人

设计color(colorspaceid params)是CSS Color 4中描述的功能。她在CSS的色彩管理方面可以与一把瑞士刀相提并论。此设计的妙处在于，它允许您指定ICC颜色配置文件以及从中获取的颜色。例如，如果要在网页上使用真实的CMYK颜色或Pantone颜色，这可能很有用。此设计还支持一些预定义的色彩空间，其中之一是display-p3。例如，color(display-p3 0 1 0)它为我们提供了P3颜色空间中最浅的绿色。要测试对此设计的支持，可以使用此测试。在没有支撑的情况下color()，将显示红色，如果可以的话，将显示浅绿色。

尽管这是一个了不起的功能（并且我需要重新制作LCH拾色器，以便在color()支持此功能的情况下程序可以使用它），但请注意，它只能解决我提到的第一个问题。即，我们正在谈论从色域访问所有颜色。但是，由于该工具color()基于RGB，因此它遭受了与RGB相关的所有缺点。通过统一的感知，通过调整颜色参数，无法通过统一的感知来区分，很难创建颜色选项（较浅或较深的选项，或多或少的明亮等等）。

此外，我注意到这是一个临时解决方案。现在可以应用了，因为这样的事实：罕见的屏幕可以显示不适合P3的颜色。但是，在对显示器进行了另一项改进之后，事实证明该设计color(display-p3 ...)将具有与RGB颜色相同的问题。

LCH和Lab的颜色空间与设备无关，它们可以表示人类可见的所有颜色，因此无论硬件如何发展，它们都将保持相关性。

亲爱的读者们！您是否对在CSS中使用LCH颜色感兴趣？

More articles:


All Articles