十六进制颜色代码详解：#RRGGBB 是怎么回事

十六进制颜色代码的原理

屏幕上的每个颜色都是由红、绿、蓝三种光混合而成的。十六进制代码在 # 号后面用两个字符表示每种光的强度，顺序是红、绿、蓝，这就是 #RRGGBB 格式。

这些字符是十六进制数，即用 16 个数字计数：0 到 9，然后是 a (10)、b (11)、c (12)、d (13)、e (14) 和 f (15)。一组两位数可以表示 256 个值，从 00 (0) 到 ff (255)，正好是 rgb() 的范围。

要把一组数换算成普通数字，用第一位乘以 16 再加上第二位。下面先用四种格式展示 #1e90ff（CSS 颜色 dodgerblue），再逐组换算。

所以 #1e90ff 就是 rgb(30, 144, 255)：少量红、较多绿、满格蓝，合起来是明亮的天蓝色。三组各 256 个值，一共可以组合出 16,777,216 种颜色。

三位和四位十六进制简写

如果每组的两位数字都相同，就可以每组只写一位。#ffcc00 可以写成 #fc0，浏览器会把每一位重复一次还原。#1e90ff 没有简写形式，因为 1e 和 90 都不是重复的数字。

简写只能表示约 1670 万种颜色中的 4,096 种。四位的写法用同样的方式加上不透明度，例如 #f008 等于 #ff000088。

十六进制透明度：带 alpha 的八位 HEX

八位代码增加了第四组，表示 alpha，即不透明度：#RRGGBBAA。00 表示完全透明，ff 表示完全不透明。所有主流浏览器的当前版本都在 CSS 中支持这种写法，也支持四位的 #RGBA 简写。

计算方法是：不透明度乘以 255，四舍五入取整，再转换成十六进制。50% 得到 127.5，四舍五入为 128，写作 80。下面是应用到 #1e90ff 上的完整对照表。

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

有两点要注意。第一，80 是 255 中的 128，即 50.2%，并不正好是 50%：十六进制 alpha 只有 256 级，所以大多数整数百分比都只是近似值。第二，Android 把 alpha 放在最前面。在 Android 颜色资源中，#801e90ff 等同于 CSS 中的 #1e90ff80。

如何凭肉眼读懂十六进制代码

不用换算也能大致猜出颜色。看每组的第一位就够了，因为它承载了几乎全部信息。

• 第一位最大的那组就是主导光。#d2691e 的红是 d，绿是 6，蓝是 1，所以是橙棕色。
• 两个通道都高时会混色：红加绿是黄，绿加蓝是青，红加蓝是品红或紫色。
• 三组相等就是灰色。#333333 是深灰，#999999 是浅灰。三组接近相等时，比如 #708090，会得到一种柔和、偏灰的颜色。
• 整体数字高说明颜色浅，数字低说明颜色深。三组都在 c0 或以上时，颜色很淡；三组都在 30 或以下时，颜色很深。
• 同样的数值下，绿色看起来比蓝色亮得多。#00ff00 的 OKLCH 亮度是 0.866，而 #0000ff 只有 0.452。

为什么 #808080 不是中灰

#808080 在数值上正好居中：每个通道都是 255 中的 128。但它看起来并不在黑白正中间。它的 OKLCH 亮度是 0.600，看上去相当于从黑到白的 60%。

十六进制值已经按 sRGB 曲线编码过，这条曲线大致贴合人眼，但并不精确。#808080 发出的光约为白色的 21.6%，而感知模型给出的视觉中点更低：OKLCH 中是 #636363，CIELAB 中是 #777777。

这对文字很重要。白底上的 #808080 灰字对比度只有 3.95:1，正文达不到 WCAG AA。#767676 是能通过 4.5:1 的最浅灰色，而只浅一级的 #777777 为 4.48:1，已经不达标。

大写还是小写，要不要 # 号

十六进制代码不区分大小写。#1E90FF、#1e90ff 和 #1E90ff 在 CSS、SVG 和设计工具中都是同一个颜色。选定一种风格并在各处保持一致，这样搜索代码时才能找到所有用到它的地方。CSS 中通常用小写。

# 号是 CSS 语法的一部分，而不是颜色本身的一部分。Figma 和许多设计工具显示代码时不带 #，编程语言则常把它写成带 0x 前缀的数字，比如 Flutter 中的 Color(0xFF1E90FF)，开头是 alpha 那一组。

如何获取屏幕上颜色的十六进制代码

使用吸管工具：它能读取光标下的颜色并显示代码。这类工具都是免费的，而且大多已经装好了。

• Chrome 和 Edge：按 F12 打开开发者工具，在“样式”面板中点击任意颜色方块，再用吸管图标在页面上取色。
• PickShade：首页的取色器在 Chrome 和 Edge 中带有吸管按钮，可以在屏幕任意位置取色。
• Windows：安装 Microsoft PowerToys，按 Win + Shift + C 打开取色器。
• macOS：打开“应用程序”中“实用工具”里的“数码测色计”。切换到 sRGB，然后选择“显示”>“显示值”>“十六进制”。
• Figma、Photoshop 和大多数设计软件：按 I 调出吸管工具。
• 从照片或截图中取色：在图片取色器中打开它，点击任意像素即可。图片始终保留在你的设备上。

取到的值可能和原始值差几个单位，因为屏幕会应用色彩配置文件，图片也经过了压缩。需要精确数值时，请从设计文件或 CSS 中复制，而不是从截图中取色。

常见问题