答案是:十六进制颜色通过#RRGGBB定义红绿蓝三色值,如#FF0000为红色;当每对字符相同可简写为#RGB,如#FFF表示白色,提升代码简洁性与可读性。

在CSS中,颜色是设计网页视觉效果的重要组成部分。使用十六进制(hex)表示颜色是一种常见且高效的方法。它通过#符号后跟数字和字母来定义红、绿、蓝三原色的强度值,从而组合出具体的颜色。
#RRGGBB:标准十六进制颜色格式
#RRGGBB 是最常用的十六进制颜色表示方式,其中:
- RR 表示红色通道,取值范围为 00 到 FF(十六进制)
- GG 表示绿色通道
- BB 表示蓝色通道
每个通道由两个十六进制字符组成,总共六位字符。例如:
-
#FF0000表示纯红色 -
#00FF00表示纯绿色 -
#0000FF表示纯蓝色 -
#FFFFFF表示白色 -
#000000表示黑色 -
#FFA500表示橙色
这种格式适用于所有支持CSS颜色定义的地方,比如文本颜色、背景色、边框等:
立即学习“前端免费学习笔记(深入)”;
.example {
color: #FF5733;
background-color: #000000;
border: 1px solid #CCCCCC;
}
#RGB:简写格式技巧
当#RRGGBB中的每对字符相同,如 #FF9933 中的 F与F、9与9、3与3,就可以简化为三位形式:#RGB。
也就是说,如果原始颜色是:
-
#FF00CC→ 可简写为#F0C -
#336699→ 可简写为#369 -
#FFFFFF→ 可简写为#FFF -
#000000→ 可简写为#000
但像 #FF5733 这样的颜色不能简写,因为 57 ≠ 55 或 33 ≠ 30,不符合“双字符重复”的规则。
简写的好处是减少代码体积,提升可读性,在不损失颜色精度的前提下更简洁:
.simple {
color: #039;
background-color: #fff;
border-color: #ccc;
}
注意事项与最佳实践
使用十六进制颜色时,注意以下几点:
- 大小写不敏感:#FF0000 和 #ff0000 是一样的
- 确保格式正确:少一位或多一位会导致颜色无效
- 简写只在每对字符相同时才成立
- 现代编辑器通常会预览颜色,方便调试
建议团队开发时统一使用一种风格,比如全用六位或优先使用三位简写,保持代码一致性。
基本上就这些。掌握 #RRGGBB 和 #RGB 的用法,能让你更高效地书写CSS颜色,既准确又简洁。










