颜色

oklch

https://oklch.com

函数记号 oklch() 在 Oklch 颜色空间中表示指定颜色。此函数记号与 oklab() 有相同的 L 轴，但使用极坐标 C（色度）和 H（色相）。

oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

• L 为介于 0 和 1 之间的 或介于 0% 和 100% 之间的 ，此处数值 0 对应 0%（黑），数值 1 对应 100%（白）。L 指定了感知明度。

• C 为 或 ，此处 0% 对应 0，100% 对应数值 0.4。此值衡量了色度（大概表示“颜色的量”），其有用的最小值为 0，最大值无理论上限（但实际不超过 0.5）。

• H 为 或 ，指定了沿正半 a 轴（紫红方向）的色相角。90deg 指向正半 b 轴（芥末黄方向），180deg 指向负半 a 轴（蓝绿方向），270deg 指向负半 b 轴（天蓝方向）。

• A（alpha）可为介于 0 和 1 之间的 或介于 0% 和 100% 之间的 ，此处数值 1 对应 100%（完全不透明）。

hsl() / hsla()

color: hsl(0, 100%, 50%); /* 红色 */
color: hsla(0, 100%, 50%, 0.5); /* 半透明红 */

lab

color: lab(54.29% 80.82 69.88);

明度（L）+ 绿色/红色（a）+ 蓝色/黄色（b）

lch()

color: oklab(0.5 0.1 0.1);

基于 lab，但用色调角度表示，更易控制颜色变化

L 明度，C 色度，H 色调角度

oklab() / oklch() ✅ 推荐

color: oklab(0.6279 0.2247 0.125);
color: oklch(0.6279 0.2479 29.2345);

2020 年提出，更贴近人眼视觉感知，支持高对比色设计

color-mix()（颜色混合，CSS Color Level 5）

color: color-mix(in srgb, red, blue);

用于颜色合成、过渡、主题调整，需现代浏览器支持（如 Chrome 111+）。