如何读懂十六进制颜色代码并构建更好的 CSS 调色板

2026年11月8日 · HEX、CSS、RGB、HSL、OKLCH、色彩理论 你可能写了很多年 CSS，却从未细想过颜色背后的那些数字。打开取色器，挑一个看着合适的色调，复制 HEX 代码，然后继续干活。 这种做法一直管用，直到你需要把某个颜色调得稍微暖一点、建立一套统一的配色，或者想弄清楚为什么两个看起来差不多的颜色，对比度却差得很远。 理解颜色的表示方式，能让这些决策变得更容易。 拿 #3B82F6 来说。乍一看，它不过是六个十六进制字符。但这些字符精确地告诉我们，红、绿、蓝各自对这个颜色贡献了多少。 HEX 很有用，但现代 CSS 提供的远不止这些。我们可以用 HSL，用 OKLCH 构建以感知为导向的配色，在浏览器里直接混合颜色，还能从已有的 CSS 变量推导出深浅色阶。 我们熟悉的六位 HEX 记法，是表达 RGB 通道值的一种紧凑方式。 color: #3B82F6; 这段代码由三对字符组成：3B 代表红，82 代表绿，F6 代表蓝。 每一对都是介于 00 和 FF 之间的十六进制数。 十六进制使用十六个符号：数字 0–9 和字母 A–F。每一对可以表示 256 个不同的值，从十进制的 0 到 255。 [ 256 \times 256 \times 256 = 16,777,216 ] 也就是超过 1600 万种 RGB 组合。 图 1. 一个六位 HEX 颜色包含三个两位的通道值：红、绿、蓝。 红：3B = 59 绿：82 = 130 蓝：F6 = 246 蓝色是最强的通道，绿色次之。结果是一种鲜艳的蓝色。 有些颜色特别容易辨认： #FF0000 /* 红 / #00FF00 / 绿 / #0000FF / 蓝 / #FFFF00 / 黄 / #00FFFF / 青 / #FF00FF / 品红 / #000000 / 黑 / #FFFFFF / 白 / 当三个通道的值都相等时，结果是一种中性灰： #222222 #555555 #888888 #BBBBBB #EEEEEE 把三个通道等量地增大，就得到更浅的灰色。 不过对于非中性色，通道值与感知亮度之间的关系就没那么简单了。 你不需要把每个 HEX 值都换算成十进制才能估计颜色长什么样。 通常，比较一下各通道就够了。 红：230 绿：57 蓝：70 红色占主导，所以可以预期这是一种鲜艳的偏红色。 color: #457B9D; 红：69 绿：123 蓝：157 蓝色最强，绿色贡献适中，红色相对较低。结果是一种柔和的蓝色。 查看 HEX 代码时，要留意占主导的通道、各通道之间的差异，以及这些值整体偏高还是偏低。 这并不是精确识别颜色的方法，但在阅读样式表时很有用。 当每个通道对中的两个字符都相同时，CSS 允许使用三位 HEX 记法。 #FFFFFF → #FFF #000000 → #000 #AABBCC → #ABC #112233 → #123 你不能用这种方式缩写 #3B82F6，因为它的各通道对包含不同的字符。 HEX 还通过一个额外的 alpha 通道支持透明度： background: #3B82F680; 格式是 #RRGGBBAA。 最后的 80 表示 alpha 值为 255 中的 128，约 50.2% 的不透明度。 background: #0008; 这会展开为 #00000088。 透明度并不等同于亮度。半透明的颜色会与它背后的内容混合，所以它的外观取决于背景。 假设你的主按钮用了这种蓝色： .button { background: #2563EB; 你需要为另一个组件做一个更浅的版本。 你可以手动提高 RGB 值： .button-secondary { background: #4F83F1; 但每个通道该改多少呢？ RGB 给不出直观的答案，因为它的通道值并不是衡量人眼感知亮度的统一尺度。 纯绿色看起来比纯蓝色亮得多，尽管两者都在某个通道上取到了最大值。 这使得在创建统一色阶时，手动调整 RGB 变得难以预测。 对单个按钮来说，反复试错也许没问题。但对于包含几十个组件的设计系统，更有结构的方法会更有帮助。 HSL 用色相（Hue）、饱和度（Saturation）和明度（Lightness）来表示颜色。 color: hsl(220 80% 55%); 每个分量都有明确的用途。 色相决定在色轮上的位置。饱和度控制结果的色彩浓烈程度。明度则在黑色、所选颜色和白色之间移动。 hsl(0 100% 50%) / 红 / hsl(60 100% 50%) / 黄 / hsl(120 100% 50%) / 绿 / hsl(180 100% 50%) / 青 / hsl(240 100% 50%) / 蓝 / hsl(300 100% 50%) / 品红 */ 在创建多个深浅色阶时，它的优势就很明显了。 :root { --blue-100: hsl(220 80% 95%); --blue-300: hsl(220 80% 75%); --blue-500: hsl(220 80% 55%); --blue-700: hsl(220 80% 35%); --blue-900: hsl(220 80% 15%); 这五个颜色共享相同的色相和饱和度。只有明度在变。 这比手动编辑 RGB 通道更容易维护。 不过，HSL 有一个局限：它的明度尺度在感知上并不均匀。两个 HSL 明度相同的颜色，看起来亮度可能明显不同。 OKLCH 用三个分量来描述颜色：L 表示感知明度，C 表示彩度或色彩浓烈程度，H 表示色相。 color: oklch(65% 0.18 250); 与 HSL 不同，OKLCH 是围绕一个以感知为导向的色彩空间设计的。 对它的明度分量所做的改动，通常更接近人们感知亮度的方式。 图 2. HSL 与 OKLCH 明度尺度的概念性对比。色块用于说明两者不同的处理方式，而非经过校准的感知测量。 :root { --primary-100: oklch(95% 0.04 250); --primary-300: oklch(80% 0.10 250); --primary-500: oklch(65% 0.18 250); --primary-700: oklch(45% 0.15 250); --primary-900: oklch(25% 0.08 250); 注意色相保持不变，而明度和彩度都在变化。 在极浅和极深的色阶中降低彩度，有助于打造更均衡的配色。 这些只是示例值，并非经过数学优化的色阶。生成的颜色仍应经过检查和调整。

（原文较长，此处译出前 6000 字，完整内容请点「打开原文」。）