十六进制颜色#RRGGBB是RGB三通道的紧凑表示,RR、GG、BB分别对应红、绿、蓝的强度(00最弱,FF最强);三位简写#RGB等价于#AABBCC,八位#RRGGBBAA含透明度AA;大小写不敏感,实操验证最有效。

别急,十六进制颜色(hex)看起来像一串神秘代码,其实只是RGB三通道的紧凑写法,掌握规律后一眼就能读出红、绿、蓝各占多少。
看懂#RRGGBB:每个两位对应一个颜色通道
所有标准hex色值都以#开头,后面六位字符分成三组:
- 前两位(RR):红色强度,00 = 最弱(没红),FF = 最强(全红)
- 中间两位(GG):绿色强度,00 → FF 同理
- 后两位(BB):蓝色强度,00 → FF 同理
比如 #3A8FCC:
→ 红=3A(十进制58),绿=8F(143),蓝=CC(204)
→ 整体是偏蓝调的中等亮度青蓝色,不是纯蓝,因为红和绿都没归零。
快速心算换算技巧
不用查表也能估算明暗和倾向:
- 00、33、66、99、CC、FF 这六档最常用,分别≈0、51、102、153、204、255
- #F00 → #FF0000 → 红满格、绿蓝为0 → 纯红
- #888 → #888888 → R=G=B=136 → 中性灰(比#000亮,比#FFF暗)
- 如果某一位明显更大(如#FF5533里FF远超55和33),那颜色就偏那个主色
识别简写#RGB和八位带透明度格式
遇到三位或八位hex,别当成错误:
立即学习“前端免费学习笔记(深入)”;
- #ABC 自动展开为 #AABBCC,比如 #FAE = #FFAAEE(粉紫调)
- #RRGGBBAA 是八位格式,最后两位是透明度(alpha),#FF000080 = 半透红(80 ≈ 50%不透明)
- 大小写完全不影响,#ff0000、#FF0000、#Ff0000 都一样
动手验证比死记更有效
打开浏览器开发者工具(F12),在CSS里随便改一个color值,输入#开头的hex,实时看效果。再点开颜色拾取器小图标,它会自动显示对应的RGB十进制数值和视觉预览——这是最快建立直觉的方式。










