· 全部指南
颜色表示法
同一物理颜色可写成 Hex（#3B82F6）、RGB（rgb(59, 130, 246)）或 HSL（hsl(217, 91%, 60%)）。设计稿从 Figma 导出 Hex；CSS 变量可能用 HSL 便于调主题；旧版 Android 资源期望 #AARRGGBB。格式间数值漂移时，按钮看起来「差不多」却通不过对比度检查。
color-converter 可在浏览器内在 Hex、RGB、HSL 等格式间互转。实操流程：收到带 Pantone 参考的品牌 PDF → 从设计文件取样最近屏幕 Hex → 在 color-converter 转为 HSL → 定义 CSS 自定义属性，使明暗主题仅调 lightness。示例：主色 #2563EB 即 hsl(221, 83%, 53%)；暗色模式可将 lightness 降至 45% 而保持色相稳定。
Hex 适合写入 Git 的设计 token，紧凑明了。HSL 便于直观调整——「亮度 +10%」——无需反复打开取色器。RGB 直接对应 canvas API 与部分图表库。常见错误：以为 #RGB 简写在所有预处理器中展开一致；忽略 #RRGGBBAA 的 alpha；在广色域显示器上混用 sRGB 与 display-P3 资源而未转换。
无障碍对比度
WCAG 2.x 用相对亮度定义对比度。正文与背景至少 4.5:1；大号字（18pt 以上或 14pt 粗体）至少 3:1。WCAG 2.1 对 UI 组件与图形对象亦有相关要求。多数产品以 AA 为基线；AAA（正文 7:1）可作为长文阅读目标。
color-contrast-checker 输入前景/背景色即可得 AA/AAA 判定，并提示邻近可调方案。审计步骤：逐对检查落地页文字/背景 → 运行 checker → 上线前修复失败项 → 暗色模式微调后再测。勿仅靠颜色传达状态——红绿指示应配合图标、文案或图案，照顾色觉障碍用户。
实例：成功横幅用 #22C55E 字于 #DCFCE7 底，肉眼尚可但小号辅助文字达不到 4.5:1。将绿色加深为 #15803D 可在不改版式下通过 AA。渐变须按最差段评估：若 hero 渐变任一段在白标题后低于 4.5:1，整体即不合格。
调色与品牌
从摄影中提取配色可加速早期 mockup。color-palette-extractor 对上传图片采样主色，适用于落地 hero、应用图标或季节性 campaign。输出仅作起点，非最终品牌规范：提取色用作字/底配对可能冲突，且常忽略无障碍。
人工精炼色板，写入 design token（--color-primary、--color-surface），并在 color-contrast-checker 中验证每一对。品牌指南应规定主色、辅色、中性色与语义色（成功、警告、错误）的明暗两套变体。常见错误：采用 trendy 霓虹 accent 在白底上对比不足；从压缩 JPEG 伪影提取导致偏褐调色板。
开发提示
用 CSS 变量集中主题色，勿在数十组件中散落 Hex 字面量。暗色模式不是 filter: invert(1)——图片反转失真，对比关系也会崩。应独立重调表面、边框与文字；color-converter 可帮你从同一色相推导暗色变体。
实现焦点环与键盘导航时，确保 :focus-visible 轮廓与相邻色达到 3:1。测试系统高对比度模式。数据可视化勿只靠语义红绿——图表应加形状或标签。Towalles 颜色工具本地运行，客户通话中迭代品牌色无需把素材上传到第三方分析站。