在日常前端开发中,我们经常使用
#FFFFFF这样的六位十六进制颜色码。但你知道吗? CSS 还支持八位十六进制颜色码,通过多出来的两位就能直接设置透明度,无需再写rgba()。本文将系统梳理这背后的知识点,方便日后复习。
一、什么是 HEX8?
HEX8(或称 8 位十六进制颜色码)是 CSS Color Module Level 4 规范支持的颜色写法,格式为:
#RRGGBBAA
其中:
- RR:红色通道(Red),00 ~ FF
- GG:绿色通道(Green),00 ~ FF
- BB:蓝色通道(Blue),00 ~ FF
- AA:Alpha 通道(透明度),00 ~ FF ← 新增的两位
示例:
.box {
background-color: #00FFBBCC; /* 青绿色, 80%不透明度 */
}
此外还有对应的 HEX4 简写形式 #RGBA,每位会被自动扩展为两位。例如 #0FBC 等价于 #00FFBBCC。
二、为什么 Alpha 用两位十六进制?
1. 十六进制的本质
HEX 是 Hexadecimal(十六进制)的缩写,使用 16 个符号表示数值:
0 1 2 3 4 5 6 7 8 9 A B C D E F
↑ ↑ ↑ ↑ ↑ ↑
10 11 12 13 14 15
2. 两位十六进制的取值范围
两位十六进制能表示 0 ~ 255 共 256 个等级,正好对应 Alpha 通道的 8 位精度(2⁸ = 256)。
最小值:00 → 十进制 0 → 完全透明
最大值:FF → 十进制 255 → 完全不透明
三、透明度的换算公式
1. 十六进制 → 十进制
十进制值 = 第一位 × 16 + 第二位
例如 CC:C 代表 12,所以 CC = 12 × 16 + 12 = 204
2. 十进制 → 百分比
透明度% = 十进制值 ÷ 255 × 100%
例如 CC = 204,204 ÷ 255 ≈ 80%
3. 百分比 → 十六进制(反向计算)
十进制值 = Math.round(百分比 × 255)
然后转换为两位十六进制
例如需要 60% 透明度:
0.6 × 255 = 153
153 转为十六进制 = 99
所以 60% 透明度 → 99
四、常用透明度速查表
| 百分比 | 十进制 | 十六进制 |
|---|---|---|
| 100% | 255 | FF |
| 95% | 242 | F2 |
| 90% | 230 | E6 |
| 85% | 217 | D9 |
| 80% | 204 | CC |
| 75% | 191 | BF |
| 70% | 179 | B3 |
| 65% | 166 | A6 |
| 60% | 153 | 99 |
| 55% | 140 | 8C |
| 50% | 128 | 80 |
| 45% | 115 | 73 |
| 40% | 102 | 66 |
| 35% | 89 | 59 |
| 30% | 77 | 4D |
| 25% | 64 | 40 |
| 20% | 51 | 33 |
| 15% | 38 | 26 |
| 10% | 26 | 1A |
| 5% | 13 | 0D |
| 0% | 0 | 00 |
🔖 必背速记口诀
FF = 100% (完全不透明)
CC = 80% (常用蒙层)
80 = 50% (半透明)
40 = 25% (淡色)
00 = 0% (完全透明)
五、HEX8 与 RGBA 的等价关系
HEX8 和 CSS 的 rgba() 函数本质上是同一件事的两种写法:
/* 以下两种写法完全等价 */
background-color: #00FFBBCC;
background-color: rgba(0, 255, 187, 0.8);
两种写法的差异:
| 对比项 | HEX8 | RGBA |
|---|---|---|
| Alpha 范围 | 00 ~ FF(整数) | 0 ~ 1(小数) |
| 书写长度 | 短 | 稍长 |
| 可读性 | 较低(需心算) | 较高(直观) |
| 兼容性 | 现代浏览器 | 几乎所有浏览器 |
| 设计工具复制 | 可直接复制 | 需手动换算 |
六、⚠️ 容易踩坑的地方
1. Alpha 位置在不同平台可能不同
- CSS / Web 标准:
#RRGGBBAA(Alpha 在最后) - Android 原生(如
Color.parseColor):#AARRGGBB(Alpha 在最前) - iOS UIColor:通常用独立的 alpha 参数
所以在跨平台开发时,同样的 #00FFBBCC,在 CSS 里是"青绿色 80% 不透明",但在 Android 里可能被解析成"透明度 00,颜色 FFBBCC"。
2. 兼容性问题
HEX8 是 CSS Color Level 4 引入的特性, IE 不支持。如果需要兼容老旧浏览器,建议使用 rgba()。
3. 不要和 opacity 属性混淆
/* 方式一:只让背景色半透明,文字仍然不透明 */
.box {
background-color: #00FFBBCC;
color: #000000;
}
/* 方式二:opacity 会让整个元素(包括子元素)全部变透明 */
.box {
background-color: #00FFBB;
opacity: 0.8;
}
核心区别:opacity 影响整个元素及其所有后代；而 HEX8 / RGBA 只影响当前设置的那个颜色属性。
七、Alpha 的显示原理(加分知识)
Alpha 通道实际显示的效果由颜色混合公式(Alpha Compositing)决定:
最终颜色 = 前景色 × α + 背景色 × (1 - α)
举例:在白色背景上显示 #FF0000 50% 透明度的红色:
R: 255 × 0.5 + 255 × 0.5 = 255
G: 0 × 0.5 + 255 × 0.5 = 127.5
B: 0 × 0.5 + 255 × 0.5 = 127.5
结果看起来像粉色 #FF8080
这也是为什么同一个半透明颜色,在不同背景上看起来不一样——它实际混合的是下层的颜色。
八、实战建议
- 蒙层/遮罩:常用
#00000080(黑色 50% 透明)或#00000099(黑色 60% 透明) - 毛玻璃效果底色:
#FFFFFFCC(白色 80% 透明)配合backdrop-filter: blur() - 悬浮态高亮:
#FFFFFF1A(白色 10% 透明)叠加在深色按钮上 - 阴影颜色:
box-shadow: 0 2px 8px #00000033;(黑色 20% 透明阴影)
九、总结
| 知识点 | 核心内容 |
|---|---|
| 格式 | #RRGGBBAA,最后两位是 Alpha |
| 取值范围 | Alpha 从 00(全透明)到 FF(不透明) |
| 换算 | 百分比 × 255,再转两位十六进制 |
| 常用值 | FF=100%,CC=80%,80=50%,40=25%,00=0% |
| 等价形式 | #RRGGBBAA ≡ rgba(R, G, B, A/255) |
| 兼容性 | 现代浏览器支持,IE 不支持 |
| 注意事项 | 不同平台 Alpha 位置可能不同;不要和 opacity 混淆 |
掌握了这些,下次看到 #00000080 就能秒懂:这是一个 50% 透明度的黑色遮罩。
如果喜欢这篇文章，欢迎点赞、转发🎉
