HEX 颜色代码是什么意思?#FFFFFF 到底代表什么

读懂 #RRGGBB 的每一位:十六进制、三通道、简写规则和心算方法

#FFFFFF、#1A1A2E、#FFD700……这些带井号的六位字符几乎出现在每一份前端代码和设计标注里。很多人用了很多年,仍然说不清每一位到底代表什么。其实它的逻辑出奇地简单,十几分钟就能彻底搞懂,而且一旦懂了,看色值就像看电话号码一样"有画面"。

本文内容

一、十六进制计数基础

我们平时数数用十进制,逢十进一,因为人有十根手指。计算机不走这条路——它用开关电路表示状态,天然只有"开"和"关"两种状态,于是发明了逢十六进一的记法来压缩一长串二进制:4 位二进制正好可以塞进 1 位十六进制,2 位十六进制就能表示 1 个字节(8 位二进制,0~255)。颜色代码选十六进制,正是为了紧凑地表达三个字节。

十六进制的字符表只有 16 个:0 到 9 照常表示零到九,10 到 15 则借字母 A 到 F。对照如下:

十进制059101112131415
十六进制059ABCDEF

两位十六进制数的换算规则:高位 × 16 + 低位。比如 FF = 15 × 16 + 15 = 255,正好是一个字节的最大值。这也是为什么 HEX 颜色里会出现字母——它们不是"代码",就是普通的数字 10 到 15。

二、#RRGGBB 每两位代表什么

井号只是记号,相当于在说"后面是颜色值",本身没有任何含义。真正的内容是后面六位:两两一组,共三组,分别是红、绿、蓝三个通道的亮度。

RR前两位:红色通道

从 00(一点红光都没有)到 FF(红光拉满,255)。

GG中间两位:绿色通道

同样 00 到 FF。屏幕上大部分"看起来很自然"的颜色,都靠绿色通道参与调和。

BB后两位:蓝色通道

同样 00 到 FF。三个通道叠在一起,就是这颗像素发出的光的颜色。

用 #FF0000 验证一下:红色通道 FF(满),绿色和蓝色都是 00(无),所以它是纯红。同理 #00FF00 纯绿、#0000FF 纯蓝、#FFFFFF 三色全开是白、#000000 三色全关是黑。

一个容易搞混的点:屏幕是发光的,混色规则和颜料相反。颜料越混越深(减色),光越叠越亮(加色)——所以三原色光全叠起来是白,而不是像颜料那样变成脏兮兮的深色。

三、3 位简写与 8 位透明度写法

你一定见过 #FFF 这种三位写法。它的规则是:每一位数字会被浏览器自动重复一遍,#FFF 展开就是 #FFFFFF,#F60 展开是 #FF6600。

但注意,简写只覆盖一部分颜色:只有当三组各自的两位数字完全相同时,才能简写。比如 #FF6B35 里的 6B、35 都不满足"两位相同",所以它没有三位简写形式。这也是为什么有些颜色在代码里永远是六位。

8 位 HEX:把透明度写进色值里

在六位的基础上再追加两位,就是 8 位 HEX,最后两位表示透明度(Alpha)。00 全透明,FF 不透明,80 大约是一半。日常最常用的一批:

后两位不透明度用途举例
CC80%卡片遮罩、图片蒙层
9960%次要文字、禁用态
8050%半透明背景
4025%hover 高亮、分割线
1A10%阴影、微妙的底色
/* 橙色,约 80% 不透明 */
background: #FF6B35CC;

/* 等价写法 */
background: rgba(255, 107, 53, 0.8);

四、如何心算一个 HEX 颜色的大致观感

掌握了通道的含义之后,看到一个陌生色值,不用查任何工具也能估个八九不离十。方法是扫一眼三个通道的大小关系:

  • 先看整体明暗:三组数值都大(接近 FF),颜色偏亮;都小(接近 00),颜色偏暗。
  • 再看谁最大:哪个通道明显领先,色相就往哪边偏。红大偏红,绿大偏绿,红和绿都大则偏黄。
  • 三组接近:就是灰色,差别越小灰得越"正"。

练两个例子。#336699:蓝色通道最大,整体偏暗——一个沉稳的深蓝,适合做正文链接色。#669933:红绿都中等且绿更高,蓝很弱——一个偏橄榄的黄绿色。#333:三通道相等且都很小——接近黑的深灰,UI 里最常用的正文色之一。

建议的练习方式:打开任意一个网站,按 F12 挑几个背景色和文字色,先心算观感,再点开色值验证。坚持一两周,看色值就不再需要工具了。也可以在我们的颜色转换工具里随手输入几位 HEX 对照结果。

#RRGGBB 说到底只是"三个 0 到 255 的数字"的十六进制写法。搞懂这一点,HEX 就从一串神秘代号变成了看得懂的语言——下次看到 #FFD700,你会立刻知道那是红绿拉满、蓝色缺席的金色。