HTML颜色值系统梳理：从十六进制、HSL到CSS变量色板

上周帮朋友看他那个后台系统的样式表，打开一看差点没坐住：同一个主色，七个文件里出现了七次，写法还各不相同——#3B82F6、rgb(59,130,246)、hsl(217, 91%, 60%)，另有一个地方直接写了blue。改一版主题色，得全局搜四遍还得人工比对。这事儿跟技术水平没关系，纯粹是HTML 颜色值这门“基础课”没打牢。颜色值这东西，学起来十分钟，用错能拖垮一个中大型项目的样式维护成本。这篇内容我按“原理—写法规则—色板搭建—排查—踩坑”的顺序，把颜色值从头到尾捋一遍：颜色关键字、十六进制 3/4/6/8 位、rgb()与rgba()的逗号语法和空格语法、hsl()色相环推导、hwb/lab/lch/oklch这些新面孔，以及 alpha 叠加的真实计算。适合刚入门的前端同学，也适合写了几年样式但一直靠取色器“手感调色”的朋友。看完你至少能做到两件事：任意一个颜色值都能手算出来它是怎么来的；能自己推一套从 50 到 900 的完整色阶，不依赖任何取色网站。

1. 先想清楚：颜色值在项目里到底扮演什么角色

1.1 颜色写法不统一，是样式腐化的起点

很多人把颜色当成“填个值就行”的小事，实际上它是样式系统里最高频、最分散、最难约束的一类值。一个中等规模的后台项目，颜色声明通常在 800 到 2000 条之间，散落在组件样式、工具类、行内style、甚至 JS 里拼出来的字符串里。写法一旦不统一，第一层代价是可搜索性归零：你想把主色从蓝色换成绿色，搜#3B82F6只覆盖了 60% 的引用，剩下的藏在rgb()、hsl()、rgba()和 SCSS 变量里，漏掉一个就是线上色块不一致。

第二层代价更隐蔽——主题化和深色模式做不动。深色模式不是简单地把白色换成黑色，它要求同一套语义色在不同主题下有不同的具体值。如果颜色值是硬编码在组件里的字面量，那你只有两条路：写两套组件样式（维护地狱），或者在运行时用 JS 遍历样式表做替换（性能和可靠性双输）。能撑住主题切换的项目，颜色一定是先抽象成变量、再按语义分层组织的。

第三层代价是协作摩擦。设计给的是十六进制，开发习惯写rgb()，验收时肉眼看着差不多、取色器一取差了三五个色阶，来回扯皮。统一写法不是为了好看，是为了让“差异”变得可被机器发现。

这里有个我自己的判断标准：如果一个项目的样式文件里，同一种颜色出现了超过 2 种书写格式，那就说明还没有颜色规范，后面一定会出问题。趁早统一，成本最低。

1.2 四种主流写法各自的定位与选型依据

颜色值不是只有一种正确写法，不同写法对应不同的使用场景。把这层定位想清楚，选型就不用纠结了。

我自己的默认策略是：设计交付用十六进制，中间层用hsl()做派生，最终产物用rgb()或十六进制输出。原因很实际——设计工具（Sketch、Figma、各类在线取色器）导出的都是十六进制，你要跟设计对齐就必须能无损互转；而你要在人脑里推导“比主色深两档”，用hsl()只改一个亮度数字，比在十六进制里凑三个通道容易十倍。

rgb()出场的机会反而是最少的，它主要在两个地方不可替代：一是需要逐通道做数学运算（比如根据背景色自动决定文字用黑还是白），二是现代空格语法下写透明度最自然。

1.3 现代颜色空间要不要现在就用

oklch()、lch()、color(display-p3 ...)这些属于 CSS Color 4 规范带来的新能力，浏览器支持已经相当不错。要不要现在上，我的看法是分两层看：作为内部工具和渐进增强，可以大胆用；作为唯一方案，先等等。

oklch()最大的价值是感知均匀。传统hsl()有个老毛病：同样是亮度 50%，黄色看起来比蓝色亮得多，你做出来的色阶视觉上参差不齐。oklch的 L 通道更接近人眼对明度的真实感知，同样的 L 值，不同色相看起来明暗基本一致。做设计系统色板时，这个特性非常值钱。

color(display-p3 ...)则是广色域，能让颜色比 sRGB 更鲜艳。但风险也很实在：色彩管理不完善的老设备上，超出 sRGB 的部分会被裁切，可能出现“设计师看到的和我看到的完全两色”。所以我的做法是给关键颜色写双份声明，让浏览器自己选：

.brand { background-color: #3B82F6; background-color: oklch(0.62 0.19 258); background-color: color(display-p3 0.231 0.510 0.965); }

老浏览器认第一个，支持的依次覆盖。顺序必须是“从旧到新”，这个细节后面排查章节还会提到。

2. 逐条拆解：HTML 与 CSS 里的颜色写法规则

2.1 颜色关键字：能用，但只用那一小撮

CSS 规范定义的颜色关键字有一百四十多个，都是不区分大小写的，Red、RED、red完全等价。这里面绝大多数是历史遗留，名字还挺有故事——rebeccapurple（#663399）是为了纪念一位早逝的小女孩；gainsboro、chartreuse、burlywood这些名字来源五花八门，从植物到地名都有。知道它们存在就行，日常写业务代码很少用。

真正值得用的只有三类。第一类是调试锚点：outline: 1px solid red这种，肉眼一秒定位元素边界，比 DevTools 点来点去快。第二类是系统语义色：Canvas、CanvasText、LinkText、ButtonText等，它们会跟随操作系统的深浅色自动变化，写原生控件风格样式时很顺手。第三类是特殊值transparent和currentColor——这两个是真正的高频工具。

transparent等价于rgba(0,0,0,0)，注意它是透明黑不是透明白，这个细节在渐变里会坑人。currentColor则是一个“活的引用”，它等于当前元素的color计算值，用来做边框、图标、SVG 填充特别香：改一处color，整套图标跟着变色，一行 JS 都不用写。

.btn { color: #3B82F6; border: 1px solid currentColor; /* 边框自动跟随文字色 */ } .btn:hover { color: #2563EB; /* 边框、图标一起变 */ }

提醒一句：颜色关键字不要用在设计系统里。red到底是#FF0000还是设计稿里的#E5484D？没人知道。关键字只做辅助，正式色值一律用数值写法。

2.2 十六进制：3 位、4 位、6 位、8 位到底怎么数

十六进制是设计稿和取色器的通用语言，格式是#后面跟十六进制数字，每两位代表一个通道，取值范围00到FF（0 到 255）。#3B82F6拆开来就是：红3B、绿82、蓝F6。

手算方法不难。3B= 3 × 16 + 11 = 59；82= 8 × 16 + 2 = 130；F6= 15 × 16 + 6 = 246。所以#3B82F6就是rgb(59, 130, 246)。反过来，把 59 转回去：59 ÷ 16 = 3 余 11，11 写作B，得到3B。这个转换我建议至少在脑子里过三遍，因为后面所有颜色计算都建立在它上面。

3 位简写（#38F）的规则是“每一位翻倍”，等价于#3388FF。这里有个高频误区：简写不是随便能用的，只有当三个通道的两位数字完全相同时才能压缩。#3B82F6就不能写成#3BF，因为3B≠33。设计稿里看到 6 位就不要自作聪明缩成 3 位，取色器会告诉你差了多少。

4 位和 8 位是带透明度的扩展。#RRGGBBAA，最后两位是 alpha，同样是00到FF映射到 0 到 1 的不透明度。#3B82F680里的80= 128，128 ÷ 255 ≈ 0.502，也就是半透明。同理 4 位简写#RGBA要求四个通道都能翻倍压缩。

.demo { color: #3B82F6; /* 6 位，不透明 */ color: #38F; /* 3 位简写，等价 #3388FF */ color: #3B82F680; /* 8 位，约 50% 不透明 */ color: #38F8; /* 4 位简写，等价 #3388FF88 */ }

有一个坑值得单独说：8 位十六进制的 alpha 是“最后两位”，不是“前两位”。这个顺序跟rgba()里透明度写在最后是一致的，但很多人凭直觉会写成#80 3B82F6，那就完全变成另一个颜色了。另外老版本浏览器对 8 位支持较晚，如果项目还要兼容很老的设备，用rgba()更稳。

2.3 rgb() 与 rgba()：逗号语法和空格语法是两套规则

rgb()的历史比很多人想的复杂。它有两套语法并存，而且不能混用。

老语法是逗号分隔：rgb(59, 130, 246)，透明版本单独一个函数rgba(59, 130, 246, 0.5)。这套语法浏览器支持面最广，闭着眼睛写都不会错。

新语法是空格分隔加斜杠：rgb(59 130 246 / 0.5)，括号里用空格分通道，斜杠后面跟 alpha。这套语法的好处是一个函数搞定透明度，不用在rgb和rgba之间来回切。而且通道值可以用百分比：rgb(23% 51% 96%)。

关键点在于混用会失效。rgb(59, 130, 246 / 0.5)这种写法在部分浏览器里会被整条丢弃，而且不报错——样式静默失效，是最难查的一类问题。我的建议是在一个项目里只选一套，要么全逗号要么全斜杠。团队协作场景我倾向新语法，因为它跟hsl()、oklch()的写法保持一致，一眼能看出 alpha 在哪。

.old-style { color: rgb(59, 130, 246); } .old-alpha { color: rgba(59, 130, 246, 0.5); } .new-style { color: rgb(59 130 246); } .new-alpha { color: rgb(59 130 246 / 0.5); } .new-percent { color: rgb(23% 51% 96% / 50%); }

注意：alpha 在新语法里既可以是 0 到 1 的小数，也可以是百分比。/ 50%和/ 0.5等价。但小数不要超范围写成1.5，虽然部分浏览器会截断，行为并不可靠。

2.4 hsl()：最贴近人脑调色逻辑的一把尺子

hsl()是我日常用得最多的写法，因为它把“颜色”拆成了人能理解的三件事：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。

色相是 0 到 360 的角度，绕着色环转：0° 红、60° 黄、120° 绿、180° 青、240° 蓝、300° 品红，转回 360° 又是红。超过 360 会取模，写hsl(420 ...)等价于 60°。饱和度 0% 是灰色，100% 是最鲜艳。亮度 0% 是纯黑，100% 是纯白，50% 左右色彩最饱满。

手工把十六进制转成 HSL，我演示一遍#3B82F6。R=59、G=130、B=246（前面算过）。先找最大值 246、最小值 59，亮度 L = (246 + 59) / 2 / 255 ≈ 0.598，也就是 60%。色差 delta = 187。饱和度 S = delta / (255 − |max + min − 255|) = 187 / (255 − 50) ≈ 0.912，即 91%。色相因为最大值在蓝色通道，用公式 60 × (4 + (R − G) / delta) = 60 × (4 − 0.380) ≈ 217°。所以#3B82F6=hsl(217 91% 60%)。

这一套换算看着繁琐，但价值在于你可以反推。想做一个比主色深两档的按钮悬停色，不用打开取色器，把亮度从 60% 降到 52%、饱和度略提，颜色自然就“沉下去”了。反过来想在十六进制里做这件事，你得同时调三个通道还得保证色相不跑偏。

这里必须提醒hsl()的一个先天缺陷：它的亮度不是感知均匀的。同样是hsl(60 100% 50%)的黄和hsl(240 100% 50%)的蓝，人眼看上去黄色的明度明显更高。所以纯用 HSL 均匀递减亮度生成的色阶，黄色那几档会显得“发飘”，蓝色那几档会显得“发闷”。知道这个特性，后面推导色阶时就不会死磕公式，而是手动微调。

2.5 hwb()、lab()、lch()、oklch() 与 color() 函数

这几个是现代 CSS 颜色空间的“新面孔”，理解了它们的思路，用起来就不慌了。

hwb()是“色相 + 白度 + 黑度”，hwb(217 20% 10%)意思是色相 217°，往里加 20% 白、加 10% 黑。它跟 HSL 描述的是同一个颜色空间，只是换了个坐标系，理解成“往纯色里兑白漆和黑漆”就对了。有个特殊规则：白度和黑度加起来超过 100% 时，会自动归一化。这个函数在实际业务里用得少，做手绘风格或模拟颜料混色时倒挺顺手。

lab()和lch()是设备无关的感知色彩空间，lch()可以理解成“用感知均匀的方式表达 HSL”，三个通道是亮度、彩度、色相。oklch()是它们的改进版，修正了蓝色区域的感知偏差，也是目前做设计系统色板最推荐的现代方案。写法是oklch(L C H)，L 是 0 到 1（也可以写百分比），C 是彩度（一般 0 到 0.4 之间，超过就会超出 sRGB 范围），H 是 0 到 360 的色相角。

color()函数是通往广色域的大门，第一个参数指定色彩空间：color(display-p3 0.231 0.510 0.965)、color(srgb 0.231 0.510 0.965)。注意它的通道值是 0 到 1 的小数，不是 0 到 255，这点跟rgb()完全不同，写错过一次就记住了。

.modern { color: hwb(217 20% 10%); color: lch(58% 72 258); color: oklch(0.62 0.19 258); color: color(display-p3 0.231 0.510 0.965); color: color(srgb 0.231 0.510 0.965); }

实际落地时，我的做法是把这些当作渐进增强的第二声明，永远保留一条 sRGB 或十六进制的兜底。原因很简单：超出色域的颜色在不同显示器上表现差异很大，设计师在广色域屏上看到的鲜艳蓝，用户的老笔记本上可能是灰蓝。业务系统里，颜色一致性比鲜艳度重要得多。

2.6 透明度：alpha 的写法与叠加陷阱

alpha 在这几年被统一了：八位十六进制最后两位、rgba()第四个参数、新语法斜杠后面、hsl()和oklch()里的斜杠，本质都是同一个 0 到 1 的值。写法记熟不难，难的是理解叠加。

元素本身是半透明时，最终呈现的颜色是它跟背后所有层混合的结果。单层混合的公式很直白：结果 = 前景 × α + 背景 × (1 − α)。拿纯白 50% 叠在纯黑上：255 × 0.5 + 0 × 0.5 = 127.5，结果约等于#808080。反过来纯黑 50% 叠在纯白上，也是 128，结果一样。这就是为什么“半透明白”和“半透明黑”在纯色背景上看起来是一样的。

多层叠加就不一样了。两层 50% 的白叠在一起，合成后的不透明度是 1 − (1 − 0.5)² = 0.75，颜色 = 255 × 0.75 + 背景 × 0.25。三层就是 0.875。这个级数收敛得很快，所以不要指望靠叠多层半透明做出很“实”的白色，直接调高 alpha 更可控。

一个经典坑：linear-gradient(to right, #3B82F6, transparent)。很多人以为这是“从蓝到完全透明”，实际上transparent是rgba(0,0,0,0)，过渡过程中颜色会往黑色方向偏，中间会看到一段脏兮兮的灰蓝。正确做法是用同色透明：linear-gradient(to right, #3B82F6, rgb(59 130 246 / 0))。

还有一点容易被忽略：alpha 不会被子元素继承累乘。父元素设opacity: 0.5，子元素的background: rgba(0,0,0,0.5)并不会变成 0.25——opacity是整层合成后统一降透明，而rgba的 alpha 只作用于该元素自身的绘制。这两个语义完全不同，做弹层遮罩、禁用态时选错了效果就不对。禁用态一般用opacity，遮罩用rgba。

3. 动手：从品牌色推导一套可维护的色板

3.1 参数计算：手算 50 到 900 的色阶

假设品牌主色定为#3B82F6，现在要补齐 50 到 900 共十个色阶，用于背景、悬停、边框、文字等不同层次。做法分三步。

第一步，把主色转成 HSL，前面算过是hsl(217 91% 60%)，把它定为 500。第二步，固定色相 217，让饱和度和亮度沿色阶两端渐变。低色阶（100 以下）要“向白靠拢”，亮度抬高、饱和度略降；高色阶要“向黑靠拢”，亮度降低、饱和度根据视觉感受微调。第三步，肉眼过一遍，黄绿系永远比公式给出的更亮，蓝紫系更暗，需要手调。

这里的关键判断不是公式，而是用途先行：先想清楚每一档要拿来干什么，再决定它的亮度。比如 600 之所以比 500 只暗 8% 而不是 10%，是因为它要承担“按下态 + 正文强调色”两个职责，暗太多会导致文字对比度合格但视觉上过重。这种微调是公式给不了的，全靠实际页面里试。

如果换成oklch()来做，思路会更顺：固定 H=258、C 在 0.19 附近微调，L 从 0.97 均匀降到 0.35，各档之间的视觉明度差异会比 HSL 均匀得多。缺点是需要一些工具或脚本辅助生成十六进制，手算不现实。我的建议是：小项目用 HSL 够用，要沉淀设计系统的项目直接上 oklch，一次投入长期受益。

3.2 CSS 变量三层结构：把颜色和语义解耦

色阶有了，接下来是组织。我见过最多的错误做法是直接把--blue-500: #3B82F6用在组件里，写background: var(--blue-500)。这样做的死穴是：品牌色一换，所有用到--blue-500的地方全变成新色，但代码里还写着blue，语义彻底对不上；更糟的是深色模式没法做，因为组件不知道“这个蓝在主色语义下深色模式该变成什么”。

正确的三层结构是：原始色 → 语义色 → 组件色。

:root { /* 第一层：原始色阶，只描述"是什么颜色"，不带语义 */ --color-blue-500: #3B82F6; --color-blue-600: #2563EB; --color-gray-50: #F8FAFC; --color-gray-900: #0F172A; /* 第二层：语义色，只描述"用来干什么"，指向原始色 */ --color-bg-page: var(--color-gray-50); --color-bg-surface: #FFFFFF; --color-text-main: var(--color-gray-900); --color-primary: var(--color-blue-500); --color-primary-hover: var(--color-blue-600); --color-border: #E2E8F0; } .card { /* 第三层：组件只消费语义色 */ background: var(--color-bg-surface); border: 1px solid var(--color-border); color: var(--color-text-main); } .card__action { background: var(--color-primary); color: #FFFFFF; } .card__action:hover { background: var(--color-primary-hover); }

这套结构的价值在于换肤只需要改第二层。品牌换色？把--color-primary指向新的色阶即可，组件一行不动。做深色模式？在[data-theme="dark"]下重写第二层，第一层色阶完全复用。组件里永远不出现具体的十六进制，可搜索性和可维护性同时解决。

实操心得：原始色阶的变量名只用“色名 + 数字”，不要写成--color-primary-blue。一旦原始层带了语义，第二层就失去意义了，半年后没人分得清--color-primary-blue和--color-primary谁该改。

3.3 深色模式与主题切换的落地写法

深色模式最容易犯的错是“简单反色”：白底换黑底、黑字换白字。结果就是浅灰卡片放到深色背景上糊成一片，因为明暗关系彻底失衡。正确思路是保持层级对比的方向不变，只调整具体值。浅色模式下，卡片比页面背景“更亮更白”；深色模式下，这个关系要变成“卡片比页面背景更亮一点”，而不是更暗。

:root { color-scheme: light; --color-bg-page: #F8FAFC; --color-bg-surface: #FFFFFF; --color-text-main: #0F172A; --color-text-sub: #475569; --color-border: #E2E8F0; } [data-theme="dark"] { color-scheme: dark; --color-bg-page: #0B1220; --color-bg-surface: #151E2E; --color-text-main: #E8EEF9; --color-text-sub: #9AA7BD; --color-border: #263349; }

color-scheme这个属性值得单独提一句：它会让浏览器原生控件——滚动条、表单输入框、下拉菜单、日期选择器——自动切到深色外观。不写这一行，你会发现自定义样式全是深色的，就那个输入框的日期图标和滚动条还是白的，特别刺眼。

主题切换的触发方式有三种常见实现：CSS 媒体查询prefers-color-scheme跟随系统、>.theme-transition, .theme-transition * { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

function switchTheme(next) { const root = document.documentElement; root.classList.add('theme-transition'); root.dataset.theme = next; setTimeout(() => root.classList.remove('theme-transition'), 220); }

3.4 对比度自查：一段脚本解决“看着还行”的问题

前面提到#3B82F6配白字，很多人觉得挺清楚，实际算一下才知道不够。我写了个纯前端就能跑的小函数，用来做对比度自查，配合 CI 或设计评审时手动跑一遍，能挡掉大量无障碍问题。

function hexToRgb(hex) { const h = hex.replace('#', ''); const full = h.length === 3 ? h.split('').map(c => c + c).join('') : h; return { r: parseInt(full.slice(0, 2), 16), g: parseInt(full.slice(2, 4), 16), b: parseInt(full.slice(4, 6), 16) }; } function channelLuminance(c) { const s = c / 255; return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4); } function relativeLuminance(hex) { const { r, g, b } = hexToRgb(hex); return 0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b); } function contrastRatio(fg, bg) { const l1 = relativeLuminance(fg); const l2 = relativeLuminance(bg); const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1]; return (hi + 0.05) / (lo + 0.05); } console.log(contrastRatio('#FFFFFF', '#3B82F6').toFixed(2)); // 3.68 console.log(contrastRatio('#FFFFFF', '#2563EB').toFixed(2)); // 5.17

手算过程也走一遍，方便你验证脚本没错。#3B82F6的三个通道归一化后是 0.231、0.510、0.965，分别做 gamma 修正得到 0.0437、0.2232、0.9217，按 0.2126 / 0.7152 / 0.0722 加权，相对亮度约 0.2355。白色是 1.0。对比度 = (1.0 + 0.05) / (0.2355 + 0.05) ≈3.68。而正文文字要求 4.5:1，所以这个蓝配白字不达标。

同一套算法算#2563EB，相对亮度约 0.1530，对比度 = 1.05 / 0.2030 ≈5.17，达标。这就是为什么我在色阶表里把 500 定为按钮底色、600 定为“文字压在上面”的场景色——不是审美偏好，是算出来的。

门槛值记牢：正文文字 4.5:1，18px 以上大字或 14px 加粗 3:1，非文字的边框图标 3:1。另外别忽略一种情况——纯白字压在 500 上不达标，但纯黑字压在上面反而可能达标，实际取值要算。如果两种都不达标，只能换底色，别硬上阴影蒙混过关。

4. 排查实录：颜色不生效与视觉偏差的常见原因

4.1 颜色不生效的七个高频原因

颜色类问题有个共同特点：不报错，静默失效，肉眼一看“咦怎么没变”。下面这几条是我这几年遇到频率最高的。

第一，逗号语法和空格语法混用。rgb(59, 130, 246 / 0.5)这种，斜杠前面有逗号，整条声明会被丢弃。DevTools 里会看到声明上有一条删除线，这是最快的确认方式。

第二，十六进制位数不对。#3B82F五位、#3B82F67七位，都是无效值。数字键盘手滑多按一位特别常见，而且取色器复制的值不一定会告诉你。

第三，rgba()忘了写 alpha。rgba(59, 130, 246)少了第四个参数，在旧语法下是无效声明。用rgb()只有三个参数倒是合法的，这一条要结合语法体系看。

第四，CSS 变量未定义或拼错。var(--color-primary)里的名字打错一个字母，结果是整个属性回退到初始值，元素变成透明或无边框。var()还有个第二参数可以兜底：var(--color-primary, #3B82F6)，这个写法在主题系统里特别有用。

第五，被更高优先级的规则覆盖。样式看起来写了但没生效，先在 DevTools 里看 Computed 面板，它会告诉你最终值来自哪个文件的哪一行，比猜快十倍。

第六，层叠顺序问题。@layer引入后，低层级里写!important也可能被高层级的普通规则盖住，这个坑比较新，遇到时先看 Layers 面板。

第七，声明顺序写反了。渐进增强的写法必须旧在前新在后，写反了老浏览器拿到的是它不认识的值，直接整条丢弃，结果就是完全没颜色。

4.2 透明度、渐变与混色引发的视觉偏差

比“不生效”更难查的是“生效了但看起来不对”。

最典型的是transparent渐变发黑，前面讲过，根因是透明黑。第二个是半透明元素叠在复杂背景上，你在编辑器里调好的灰，放到页面上因为背景图或者相邻元素的影响，实际观感完全不同。这种只能在实际页面上调，脱离上下文调色必翻车。

第三个是**opacity影响子元素**。给弹层容器加opacity: 0.9做淡出效果，结果里面所有内容包括文字都变淡了，文字可读性下降。这种情况应该用background: rgb(... / 0.9)而不是opacity。

第四个是深色模式下的“半透明白”。浅色模式下用rgb(255 255 255 / 0.7)做卡片底，效果是柔和的；切到深色模式后，这层白叠在黑底上会变成中灰，层级关系全乱。深色模式里的“半透明层”应该换成半透明的深色或者直接给实色。

第五个是颜色空间转换导致的偏移。同一张图、同一个色值，在设计工具、浏览器、导出图片三者之间可能有细微差异，尤其在广色域设备上。做颜色验收时，我一般要求对照取色器数值，而不是“看着像不像”。

4.3 问题速查表

这张表我建议直接放进团队文档，新同学遇到颜色问题先过一遍，能省掉大量来回沟通。

5. 一些踩过坑之后才明白的细节

5.1 移动端与表单控件的颜色细节

做移动端页面时，有几个颜色相关的属性不在常规 CSS 清单里，但影响观感非常大。

第一个是meta里的theme-color。它决定移动浏览器地址栏、状态栏的配色。浅色模式给页面底色，深色模式给深底色，得写两条：

<meta name="theme-color" content="#F8FAFC" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#0B1220" media="(prefers-color-scheme: dark)">

第二个是accent-color，一行就能把复选框、单选框、进度条的强调色改成品牌色，省掉一大堆自定义控件样式的活。第三个是-webkit-tap-highlight-color，移动端点按链接时那一下灰色高亮，很多人以为是系统行为改不了，其实这个属性可以直接设成透明或者自定义色。

还有输入框的caret-color（光标颜色）、::selection（选中文字的背景）、::placeholder（占位符颜色）。占位符这块有个坑：默认的占位符颜色在很多浏览器里对比度不足 4.5:1，做无障碍审查会被挑出来，但设太深又会跟真实输入值混淆。我的经验是取--color-text-sub再降一档，配合“标签常驻”的布局，不完全依赖占位符传达信息。

5.2 命名与协作规范

最后聊聊规范。颜色系统的成败，技术方案只占三成，另外七成是命名和协作约定。

命名上我坚持两条硬规矩。原始色阶只用色名加数字，比如--color-blue-500，不许出现primary、success这类语义词；语义色按用途命名，--color-bg-page、--color-text-main、--color-border-strong，不许出现具体色名。这两条看起来死板，但它保证了“换肤只改语义层”这条链路永远成立。

协作上有几个具体约定值得写进团队规范：设计交付统一用十六进制，不接受“大概这个蓝”；代码里除语义变量之外禁止出现颜色字面量，用 lint 规则卡住；新增语义色必须说明用途和对应的对比度数值；深色模式的每个语义色必须跟浅色模式成对出现在同一文件里，方便一次改完。

还有一个我自己的小技巧：建一个colors-preview.html，把色阶、语义色、浅色深色两套、以及每组的对比度数值全渲染在一页上。改完色值打开看一眼，比翻十份设计标注快得多。这东西看着土，但每次大改主题都靠它兜底。

颜色值这块内容，说到底是“看起来最简单、出错最不显眼”的一类基础知识。真正把它用扎实，转化成的收益是：改主题不改组件、设计开发不扯皮、无障碍审查不返工。