取色与校对流程

把稿面颜色落到生产环境是 流程，不是一次性吸管点击。

第一步：锚定品牌令牌

从设计系统的主色、中性色与语义色阶出发——不要采信截图压缩后的随机 hex。

若营销只给了 PNG，编码前应对照官方品牌 PDF 或 Figma 组件库。

第二步：谨慎取样

浏览器吸管读 单个像素。JPEG 色带、亚像素抗锯齿与 Retina 缩放都会骗人。

在纯色区域取样，或直接从设计稿读数。在 live 站点取样时关闭缩放，并分别检查浅色/深色模式。

第三步：转换并记录各视图

令牌存规范 hex（或 OKLCH），再派生：

• 图表 API 用 RGB
• 主题生成器用 HSL
• 背景旁文档化通过对比度的文字色

转换器可在设计师要「同一蓝色的 HSL」时保持数值一致。

第四步：校验对比度与状态

每个交互组件检查默认、hover、focus、disabled。焦点环常需 第三种 颜色，且在默认与 hover 底上都达标。

评审单应记录失败比值——而非「我笔记本上看着还行」。

第五步：以 CSS 变量交付

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-on-primary: #ffffff;
}

组件引用语义名（--color-on-primary），不要在模块里散落 raw hex。

交付清单

项	完成标准
令牌命名	设计与开发共用 --color-*
对比度文档	文字配对达到 AA
深色模式	单独表或覆盖已列出
非 CSS 场景	邮件/PDF hex 已导出

要点

把吸管当作 documented 流水线里的 测量工具：取样、转换、验对比度、发布令牌。这样 #2563EB 才不会在生产里变成五种略不同的蓝。