一、四种常见写法
.box {
color: #2563eb; /* HEX，设计师最常用 */
color: #2563ebcc; /* 8 位 HEX，最后两位是 alpha */
color: rgb(37 99 235); /* 现代写法，空格分隔 */
color: rgb(37 99 235 / 80%); /* 带透明度 */
color: hsl(217 91% 60%); /* 色相 饱和度 亮度 */
color: hsla(217, 91%, 60%, .8);
}rgba() 与 rgb() 现在等价（都支持第四个参数），hsla() 同理，老写法仍兼容。
二、HEX 的简写与透明度
#RGB是#RRGGBB的简写，仅当每位重复时可用：#fff=#ffffff，#a1b2c3不能简写。#RGBA同理。- 8 位 HEX 的最后两位是 alpha：
#2563ebcc中的cc= 204/255 ≈ 80%。
注意 alpha 是「不透明度」，00 完全透明，ff 完全不透明。这一点和某些设计工具里的「透明度百分比」方向一致，但和 opacity 属性不同——opacity 会影响整个元素（包括子元素），alpha 只影响该颜色。
三、HSL 更好调
HSL 把颜色拆成三个直觉维度：
- H（色相）：0–360 度，0 红、120 绿、240 蓝。
- S（饱和度）：0% 灰，100% 最鲜艳。
- L（亮度）：0% 黑，50% 纯色，100% 白。
于是「把这个蓝调亮 10%」就是 hsl(217 91% 70%)，而用 HEX 只能靠工具换算。做主题色阶梯（hover 亮一点、active 暗一点）时，用 HSL 或 color-mix() 效率高得多：
:root { --brand: hsl(217 91% 60%); }
.btn:hover { background: hsl(217 91% 68%); }
.btn:active { background: hsl(217 91% 52%); }四、currentColor 与变量
.link { color: #2563eb; border-bottom: 1px solid currentColor; }currentColor 取当前元素的 color 值，做图标、下划线、边框时不用重复写色值，改主题只改一处。
配合 CSS 变量能做出完整色板：
:root {
--brand-500: #3b82f6;
--brand-600: #2563eb;
--text: #111827;
}五、对比度：颜色不只是好看
文字与背景的对比度不足，是常见的可访问性问题，也影响阅读体验。WCAG 建议：
| 文本类型 | 最低对比度 |
|---|---|
| 正文（小于 18pt） | 4.5:1 |
| 大号文本（≥18pt 或 14pt 加粗） | 3:1 |
| 图标、边框等非文本 | 3:1 |
浅灰字（#9ca3af）配白底大约只有 2.5:1，做正文不合格，只能用于辅助说明。设计时按这个标准自查，比上线后被用户吐槽好。
六、几个细节
- 颜色关键字只有 140 多个，
transparent等于rgba(0,0,0,0)。 - 十六进制大小写等价，团队里统一小写即可。
opacity会创建层叠上下文，影响position: fixed子元素的定位基准。- 打印时背景色默认不打印，需要
-webkit-print-color-adjust: exact。 - 暗色模式用
prefers-color-scheme或[data-theme]切换变量，而不是写两套样式。
七、换算工具
设计稿给 HEX、代码里想用 HSL，或者要从截图取色，用 颜色转换工具 在 HEX / RGB / HSL 之间互转，并直接看到色块预览。
小结
HEX 适合精确指定，HSL 适合调明暗，8 位 HEX 末两位是 alpha；currentColor 减少重复；正文对比度至少 4.5:1。选格式的标准是「以后谁改、怎么改」。