OKLCH是一种新的颜色模型，旨在实现感知上的均匀性，使颜色更符合人类视觉感知，便于操作。它由亮度、色度和色调三个值组成，基于OKLab色彩空间。与LCH不同，OKLCH在色彩空间上有所改进，适用于现代设备如Display-P3等色域。

OKLCH颜色模型简介

OKLCH是一种较新的颜色模型，旨在实现感知上的均匀性，这意味着它能够更准确地反映人类对颜色的感知，使得颜色处理更加简便。

颜色模型基础

颜色模型是描述颜色的系统，常见的包括RGB、HSL、LCH和OKLCH等。这些模型决定了颜色操作的难易程度。

色域

色域是颜色模型的应用范围，定义了可能的颜色。常见的色域包括sRGB（网页默认）和Display-P3（现代设备使用）。

OKLCH结构

OKLCH与LCH类似，由三个值组成：亮度（Lightness）、色度（Chroma）和色调（Hue）。OKLCH的独特之处在于其基于OKLab颜色空间。

• 亮度：从0到1或0%到100%的值，表示亮度的变化。
• 色度：控制颜色的强度，类似于饱和度。
• 色调：控制颜色的色调，范围从0到360度。

一致的亮度

在OKLCH中，可以通过保持亮度值不变，仅改变色调来创建感知上一致的颜色。这与sRGB或HSL模型不同，后者在调整色调时可能导致亮度不一致。

可预测的色调

OKLCH允许通过调整亮度值来创建不同的色调，而不会出现色调或饱和度的偏移。例如，蓝色在OKLCH中保持一致的色调，而在HSL中，较亮的色调可能偏紫，较暗的色调可能偏灰。

更好的渐变效果

OKLCH的渐变计算基于亮度、色度和色调，避免了sRGB中常见的中间色调浑浊和亮度不均的问题。

色域支持

OKLCH能够表示现代屏幕支持的更多颜色，如Display-P3色域中的颜色。对于不支持这些颜色的显示器，浏览器会将颜色映射回sRGB色域。

最大色度

OKLCH可以定义超出实际显示器色域的颜色。这些颜色在实际显示时会被裁剪或映射到最接近的可表示颜色。

浏览器支持与回退

OKLCH颜色在CSS Color Module Level 4中引入，现代浏览器普遍支持。对于不支持OKLCH的旧版浏览器，可以使用CSS的@supports指令提供回退方案。

OKLCH工具

作者开发了一个名为oklch.fyi的工具，帮助生成OKLCH颜色调色板，并将现有的CSS变量转换为OKLCH颜色。

总结

OKLCH颜色模型在颜色处理上提供了更高的准确性和一致性，特别适合需要精细颜色控制的场景。通过使用OKLCH，设计师可以更轻松地创建感知上均匀的颜色调色板，并实现更平滑的渐变效果。

评论内容总结：

1. 对OKLCH的积极评价

   • 多位评论者认为OKLCH是一个直观且易于使用的颜色模型，尤其是在处理渐变和颜色一致性方面表现出色。
   • 引用：
     • "Really happy about oklch. You do have to learn the hue numbers, but once you do, everything is more intuitive."
     • "seems like a great idea, this will make working with colors so much easier."

2. 对OKLCH的批评与质疑

   • 有评论指出OKLCH在处理色域边缘时存在问题，尤其是在渐变过程中可能导致颜色超出人类感知范围，且牺牲了感知一致性。
   • 引用：
     • "The gradient shown (in either case) is a good example of a way that perceptual colour spaces are really bad to work in."
     • "With OKLCH you order green salad you get beet soup."

3. 与其他颜色模型的比较

   • 评论者讨论了OKLCH与OKLab、HSL等模型的差异，认为OKLab在某些情况下可能是更安全的选择，尤其是在处理渐变时。
   • 引用：
     • "When you’re looking for better gradients, if you’re caring about perceptual uniformity, you should probably default to interpolating in Oklab instead."
     • "OKLCH gradients aren’t objectively best, they’re consistently colorful."

4. 对颜色一致性和调色板的讨论

   • 有评论提到OKLCH在生成调色板时表现良好，但设计师可能仍需要手动调整色调和饱和度以达到最佳效果。
   • 引用：
     • "So I think OKLCH is a nice starting base for palettes and a quick way to generate a color you need in CSS."
     • "Designers will always want to tweak the hue and saturation of each shade so it looks just right."

5. 对文章内容的补充与建议

   • 评论者建议在文章中包含发布日期，以便读者更好地理解内容的时效性。
   • 引用：
     • "Can anyone explain the modern trend of not including publishing dates in blog articles?"
     • "The 'newer' part of that sentence will get dated quicker than you think."

总结：评论者对OKLCH的评价总体积极，认为其在颜色处理上具有优势，但也指出了其在色域边缘处理和渐变中的局限性。同时，评论者建议在实际应用中结合其他颜色模型，并根据需要进行手动调整。