CSS颜色表示法演进

CSS的颜色表示方式经历了从简单到丰富的演进过程。CSS1只支持关键字颜色和十六进制（#RRGGBB）；CSS2增加了rgb()函数；CSS3引入了hsl()、rgba()、hsla()和透明度；CSS Color Level 4带来了新的语法（空格分隔、rgb(255 128 0 / 50%)）和hex alpha（#RRGGBBAA）；CSS Color Level 5引入了color-mix()、相对颜色语法和OKLCH色彩空间。了解这些演进，能帮你选择最合适的颜色表示方式。

HEX、RGB与HSL详解

HEX：最常见的颜色表示法，如#FF8800。每两位十六进制数对应R、G、B通道，范围00-FF（0-255）。4位简写#F80等价于#FF8800。8位HEX增加alpha通道，如#FF8800CC表示80%不透明度。HEX的优点是简洁，缺点是不直观——你很难从#FF8800判断出这是一个橙色。

RGB：用十进制数表示三通道，如rgb(255, 128, 0)。新语法支持空格分隔和斜杠alpha：rgb(255 128 0 / 80%)。RGB的缺点与HEX相同——不符合人类对颜色的感知方式。

HSL：色相（Hue，0-360度）、饱和度（Saturation，0%-100%）、亮度（Lightness，0%-100%）。HSL更符合人类对颜色的直觉理解：H=0是红色，H=120是绿色，H=240是蓝色；调整S可以改变鲜艳程度；调整L可以从暗到亮。HSL是调整配色方案时最方便的格式。

新一代色彩空间：OKLCH

OKLCH是CSS Color Level 5引入的色彩空间，由Björn Ottosson在2020年提出。它解决了HSL的一个重要问题——HSL的亮度（L）不等于感知亮度。在HSL中，纯黄色（hsl(60, 100%, 50%)）和纯蓝色（hsl(240, 100%, 50%)）的L都是50%，但人眼感知到的黄色比蓝色亮得多。OKLCH的L基于感知亮度，相同的L值对应相同的感知亮度，这在设计无障碍配色时至关重要。

OKLCH的参数：L（感知亮度，0-1）、C（色度/饱和度，0-0.4+）、H（色相，0-360度）。使用OKLCH可以轻松创建感知均匀的色彩梯度——只需要固定C和H，变化L即可得到从暗到亮的均匀过渡。

无障碍配色：对比度

WCAG 2.1要求文本与背景之间有足够的对比度：正常文本至少4.5:1（AA级），大文本至少3:1；增强标准（AAA级）要求正常文本7:1，大文本4.5:1。对比度计算基于相对亮度，而不是简单的颜色差异。深色背景上的浅色文字和浅色背景上的深色文字都可以满足对比度要求。

常见错误：浅灰色文字（如#999）在白色背景上对比度不足3:1，不符合无障碍要求；低饱和度的颜色组合可能在某些显示器上难以区分；仅依赖颜色传达信息（如红色表示错误）对色盲用户不友好。

CSS颜色实用技巧

currentColor：继承当前元素的color属性值，常用于SVG图标和边框颜色
color-mix()：CSS新函数，混合两种颜色，如color-mix(in oklch, blue, white 30%)
相对颜色语法：基于现有颜色派生新颜色，如oklch(from var(--base) l c calc(h + 120))生成互补色
CSS变量+HSL：定义--hue变量，通过调整H值快速生成主题色系
prefers-color-scheme：根据用户系统偏好自动切换明暗主题

工具推荐

使用我们的在线颜色转换工具，支持HEX、RGB、HSL、OKLCH等多种格式互转，实时预览颜色效果，自动计算WCAG对比度，帮助你设计无障碍配色方案。