HEX 就是 RGB
#RRGGBB 每两位是红绿蓝的十六进制（0–255）。#ff0000 就是纯红。它们只是同一数据的不同写法。
HSL 更适合人调色
HSL = 色相 / 饱和度 / 亮度。想「调亮一点」「换个色相」在 HSL 下只改一个数字；在 RGB 下三个数都得动。
透明度
加第八位或用 rgba() / hsla()：#rrggbbaa 的 aa 是 alpha（00 全透，ff 不透明）。
两个坑
- 不同色彩空间：sRGB 与 P3 屏幕显示不同，跨设备会有色差；
- 字符串大小写：HEX 不区分大小写，但别混用造成比对失败。
动手试试
各格式互转：颜色转换。
实战案例：三个颜色相关的坑
- 设计稿与页面有色差：设计稿使用 Display P3 广色域，网页按 sRGB 渲染，同一色值看起来更暗。要跨设备一致，应在 sRGB 下取色。
- 忘记 alpha 造成遮挡：以为写了半透明，实际用了不透明的
#rrggbb，把下层内容挡住。透明需要 8 位 HEX 或rgba()。 - HSL 亮度写成 0–255：HSL 的饱和度与亮度是百分比，写成 0–255 会被当作超范围值截断，颜色完全不对。
常见问题（FAQ）
HEX 和 RGB 互转会失真吗？不会，两者是同一数据的不同写法，转换无损。调色为什么常用 HSL？“调亮一点”“换个色相”在 HSL 下各对应一个数字，比在 RGB 里同时改三个分量直观。#f00 与 #ff0000 一样吗？一样，三位缩写按位复制成六位。深色模式怎么保证可读？按 WCAG 计算对比度，正文建议不低于 4.5:1，别只凭肉眼判断。
无障碍配色实操
颜色不只要好看，还要能读。落地时建议按下面的顺序做：
- 先定中性色阶：用 HSL 固定色相、只调亮度，得到 50–900 的灰阶，用于背景、边框、次级文字；
- 再定主色与状态色：主色、成功、警告、错误各取一个基准色，再各自生成 hover（降 8% 亮度）与 active（再降 8%）两档；
- 用对比度校验：正文与背景对比度不低于
4.5:1，大号文字与图标不低于3:1； - 不要只靠颜色传信息：错误状态除红色外还要有文字或图标，照顾色觉障碍用户。
常见误区
- 直接相减做变暗：在 RGB 里把三个通道各减 20，会让饱和度一起下降、颜色发灰；在 HSL 里只降 L 才更纯净；
- 忽略深色模式：深色下不能简单把前景背景互换，主色通常需要相应提亮，否则对比度不足；
- 把 alpha 当成“变淡的主色”：半透明叠加在深色背景上会偏色，必要时改用实色并单独调；
- 硬编码十六进制：把颜色写死在组件里，改主题时要全局替换，应统一收敛为设计令牌。
跨端一致性的处理顺序
先确认设计稿的色域（sRGB 还是 P3），再确认截图工具是否做了色彩管理，最后才比对色值。多数“有色差”的结论其实来自截图链路而非页面本身。
设计令牌落地建议
- 语义命名：变量名用
--color-danger而不是--color-red，换主题时不必改组件； - 只暴露有限档位：色阶提供 50–900 即可，避免出现 37 种近似灰导致视觉不一致；
- 同时提供深色值：每个语义色都应有一份深色模式取值，而不是靠滤镜或透明度硬凑；
- 导出为多格式：CSS 变量、JS 常量与设计工具变量保持同源，避免设计与实现各维护一份。
颜色与可维护性
同一处颜色不要在样式、图表配置与代码常量里各写一份十六进制值。应统一收敛到设计令牌，再分别导出；否则改一次主色要在五六个文件里同步，漏改一处就会出现“两种蓝”这类难以察觉的不一致。
打印与屏幕的差异
屏幕是加色（RGB），印刷是减色（CMYK），同一色值转到印刷会明显偏暗。涉及物料输出时应在设计阶段就使用 CMYK 或 Pantone 色卡校对，而不是把网页色值直接交给印厂，否则会出现“网上很好看、印出来发灰”的问题。