开发者需要理解的色彩模型

屏幕上的颜色是 被当作光来解读的数字。开发者很少直接「看见」颜色，而是在 CSS、SVG、设计令牌与 API 载荷里操作 数值。

同一颜色，多种字符串

以下可能描述同一 sRGB 颜色：

• #2563EB
• rgb(37, 99, 235)
• hsl(221, 83%, 53%)

设计工具、浏览器与表格软件默认格式不同。格式转换是日常动作，不是一次性技巧。

通道与色域

多数 UI 工作使用 sRGB——红、绿、蓝三通道，各 0–255（或部分函数中用 0–100%）。广色域屏（P3）可显示比 sRGB hex 更鲜艳的颜色；这对营销站比内部后台更敏感。

典型产品 UI 中，sRGB + 一致令牌 优于在无流程时追逐特殊色域。

感知与测量

人类对亮度的判断 非线性。RGB 平均值相近的两色，明度感可能不同。因此有 HSL、Lab 等模型——便于在设计上分离色相与明度。

CSS 仍常交付 hex/rgb；需要「同色相、略深 hover」时 HSL 更顺手。

透明度是独立通道

Alpha 控制透明。#2563EB 不透明；rgba(37, 99, 235, 0.5) 是相同 RGB 叠在背景上 50% 透明。

对比度检查必须用 合成后 在真实背景上的颜色——不能只看白底色块。

代码中的颜色

• CSS 自定义属性（--color-primary）
• Tailwind / 主题配置
• 图表库与状态徽章
• CSS 支持有限的 PDF / 邮件模板

要点

把颜色当作有多种视图（HEX/RGB/HSL）的 结构化数据。设计系统定 唯一真相源，再向各工具与平台转换。