sRGB
大多数屏幕沿用了数十年的标准色彩空间。所有十六进制色值都属于这个空间。它的色域有限：现代屏幕能显示的一些颜色，sRGB 无法描述。
#4080c0红色 · R
绿色 · G
蓝色 · B
色彩
P3 广色域
P3大多数现代屏幕支持的更宽广的色彩空间。它能呈现 sRGB 无法达到的更鲜艳的颜色，尤其是绿色和红色。
sRGB
Display P3
P3 需要屏幕和浏览器支持。其他屏幕上的两个圆都使用 sRGB 备用色。
OKLCH
符合人类亮度感知方式的色彩空间。与 HSL 不同，明度值相同的两种颜色，看起来确实一样亮。适合生成调色板和满足无障碍需求的混色。
HSL · L 65%OKLCH · L 65%明度 · L
同一行的颜色使用相同的 L 值。比较两行颜色的明暗起伏。
Alpha 透明通道
Alpha颜色的透明度分量，从完全不透明到完全不可见。带 Alpha 透明度的边框会融入下方表面，实色十六进制颜色则浮在表面之上。这种差别很微妙，却始终能被感知。
Alpha 50%
#808080不透明度
切换底色，比较透明边框与实色 #808080 边框。
语义化变量
Semantic token根据用途而非具体色值命名的颜色变量。例如 --color-border-subtle，而不是 #e0e0e0。这个值改变时，所有使用该变量的地方都会更新。
进行中一个新想法
项目名称
继续--color-border-subtle
#e0e0e0修改 --color-border-subtle，三处边框一起更新。
对比度
Contrast ratio前景色与背景色之间的亮度差异。WCAG 要求正文达到 4.5:1，大号文字和 UI 组件达到 3:1。
AA 正文 · 通过AA 大字 · 通过AA 组件 · 通过
文字灰度
WCAG AA：正文至少 4.5:1，大号文字和 UI 组件至少 3:1。