大家好,我是颜色世界的导游,今天咱们来聊聊CSS LCH 颜色空间里的 Gamut Mapping (色域映射) 和颜色校正,这两个家伙听起来高大上,其实也没那么玄乎,本质上就是“颜色搬运工”和“颜色美容师”。准备好了吗?咱们这就出发! 第一站:LCH 颜色空间的“前世今生” 在进入 Gamut Mapping 和颜色校正之前,咱们得先了解一下 LCH 颜色空间是个啥。简单来说,LCH 是一种基于人眼感知设计的颜色模型,它把颜色分解成三个部分: L (Lightness): 明度,从 0 (黑) 到 100 (白)。想象一下亮度调节滑块。 C (Chroma): 色度,颜色的鲜艳程度,从 0 (中性灰) 到理论上的无穷大(但实际设备有上限)。 类似于颜料的浓度。 H (Hue): 色相,就是我们常说的颜色名称,比如红、绿、蓝等等,用角度表示,从 0 到 360 度。想象一下色轮。 LCH 的优点在于它更符合人类的视觉感知。比如,在 RGB 中,改变一个数值可能同时影响明度和色度,而在 LCH 中,你可以单独调整亮度,而不影响颜色的鲜艳程度。 第二站:为什么要进行 Gamut Mappi …
CSS `lch()` / `lab()` 颜色空间:感知均匀性与广色域管理
各位老铁,早上好/中午好/晚上好! 今天咱们来聊聊CSS颜色空间里的“贵族”—— lch() 和 lab() 。这俩货听起来高大上,其实也没那么玄乎,咱争取用最接地气的方式把它俩给扒个精光。 一、前戏:为啥需要新的颜色空间? 话说当年,CSS颜色空间的世界还比较简单,RGB一家独大。RGB好用是好用,但有个致命的缺陷:它不符合人类的感知。啥意思呢?就是说,RGB值差不多的两个颜色,人眼看起来可能差异很大;而RGB值差异很大的两个颜色,人眼看起来可能差不多。这对于需要精确控制颜色的设计师和开发者来说,简直是噩梦。 比如,你想要让一个按钮的颜色逐渐变亮,用RGB控制,你会发现,亮到一半的时候,颜色可能就变得很刺眼了,或者干脆就没啥变化。这都是因为RGB在感知上是不均匀的。 所以,我们需要一种更符合人类感知的颜色空间,它能保证颜色值的变化和人眼感知的变化是线性对应的。这就是 lch() 和 lab() 登场的理由。 二、主角登场:lab() 和 lch() 是啥玩意? lab() 和 lch() 都是基于CIE Lab颜色空间建立的。CIE Lab颜色空间是由国际照明委员会(CIE)在197 …