更科学高效的配色方案
作者：新像素UI教育
来源：新像素UI教育
发布日期：2023年04月14日
照惯例，先看视频再看笔记。 前面刚给大家介绍过HSB和HSL...
照惯例，先看视频再看笔记。 前面刚给大家介绍过HSB和HSL这两种调色方案，它们的优势就是可以很直观的调出我们想要的颜色，但是这种调色方案也有劣势：当我们想要相同饱和度和亮度的其他颜色时，只调整色相是不行的。比如下面两个按钮的饱和度和亮度是一样的，但是我们肉眼看到的亮度或者对比度是不一样的，这个就是使用HSB和HSL调色的弊端。
我给大家看一个测试，当我们把饱和度去掉的时候，可以发现它们的亮度是不一样的，有明有暗，这才导致了这边这样一个情况。所以这就引出了我们这今天要说的主题——符合我们人眼感官对比度或者感官亮度一致的调色工具。
之前跟大家说过色彩空间还有色域，里面提到了RGB的色彩空间，这个色彩空间是靠红绿蓝这三个色混出来我们想要的颜色，不符合我们人类的直觉。而刚给大家演示过的HSL和HSB也是基于RGB的色彩空间，只不过中间有一个什么转换。 所以，为了解决这个感官亮度不一致的问题，CIE又出了一个色彩空间叫CIELab，这个CIELab跟RGB有点像，只不过RGB是红绿蓝三个颜色，CIELab是红绿蓝黄四个颜色。 很明显，我们要是调整这四个色值的话更不直观，所以为了方便我们调节，就有了类似于HSL的那种调法，只不过它叫HCL或者叫LCH。
这个HCL跟HSL是很像的，首先H都是色相，然后这个C叫“Chroma”，翻译过来叫色度，为了方便大家理解，我们可以把它当成饱和度去用，其实效果差别不是很大。但是这个色度跟饱和度要是严谨的来讲它们是有区别的，色度多了一个光照的影响，并且它跟饱和度在数学模型上是不一样的。
单从理解上来看，没有什么难的，只不过这个HCL它是符合我们人眼感官亮度的，我们再去看那个彩虹条，这次把它的饱和度去掉之后，亮度基本看不出有什么太大的差别了。这样一来，我们就能通过HCL去生成出来一个感官亮度一致的其他颜色。
在Figma中，我们可以借助“Color Space”插件，打开插件之后，我们先选中一个颜色，然后下面的Hue里会显示感官亮度一致的其他颜色，再点击一下我们想要的颜色就可以了。
然后还有一个调色模式，是谷歌今年才出的HCT，相比较于HCL，可以明显的看出来HCT的颜色就没那么亮了，这个就是它们两个的计算公式或者计算模型不一样，而且HCL还有一个问题，就是调整亮度档位的时候，颜色会慢慢的发生位移，比如蓝色会慢慢偏紫，这个也是它的一个缺点。
其实还有一个更好的方案是叫OKLCH，OKLCH是基于OKLab的色彩空间，它主要就是去解决刚才说的LCH的问题，所以OKLCH也是一个感官亮度统一的色彩空间。
我们直接拿工具来演示一下，从工具上可以看出，每一个图表都是参差不齐的，这个恰恰就是因为它是根据我们人眼感官亮度统一的模型去创建的。 我们人眼有一个视锥细胞，就是这个东西导致我们看某些颜色哪个能看的多一点，哪个能看的少一点，显示器也是一样的，总之就是人眼加显示器的这些限制，就导致了图表会参差不齐，说白了这个就是我们人眼所有可见颜色的一个范围。
我们再来说一下这个调色工具，L是亮度，H是色相，C是色度，并且色度理论上是没有上限的，不过我们最终调整的时候，左上角会有显示，超出的话它会告诉我们某些色彩空间的设备就显示不出来了，所以这块也算是它不太好的一个地方，就是调起来没那么直观方便。 然后中间的下方还有三个选项，这个跟图表是息息相关，如果我们想展示P3的，把P3打开就可以了。Rec2020大概是更高规格的一些显示设备，它显示的会比P3更多一点。
这里我们就可以去对比一下OKLCH跟普通的LCH在亮度变化上的区别，OKLCH就不会再有亮度上色差的偏移，之前的LCH会慢慢的发紫。
好了，这里我再给大家捋一下，之前讲的HSL和HSB的优点就是我们在软件里面调起来非常方便，但是这两个并不能产出我们感官亮度统一的颜色，所以就有了HCL和OKLCH这两种更好的方式。不过这两种调色方式也有劣势，那就是太新了，相关的工具和软件支持的都少。
