在网页样式开发中，颜色值的书写方式直接影响代码的可维护性和渲染表现。CSS规范允许开发者使用多种格式描述颜色，其中十六进制表示法因其紧凑和直观的特点被广泛采用。十六进制颜色以井号开头，后接表示红、绿、蓝三个通道的字符序列，浏览器会将其转化为对应的RGB光强数值并呈现在屏幕上。理解这种写法的底层逻辑，是写出规范且高效样式表的基础。
十六进制颜色的基本结构与#RRGGBB写法
标准的六位十六进制颜色写作#RRGGBB，其中RR、GG、BB分别是两位十六进制数，依次代表红色、绿色和蓝色通道。每个通道的取值范围是00到FF，对应十进制里的0到255。比如#FF0000表示红光拉满、绿蓝关闭，呈现纯红色；#00FF00是纯绿色，#0000FF是纯蓝色。这种写法之所以普及，是因为它能精确表达超过一千六百万种色彩，且比rgb()函数更短。
在CSS文件里使用六位写法非常直接，可以作用于任何接受颜色值的属性。下面的代码展示了几种常见用法，包括文字颜色、背景色和边框色。注意十六进制不区分大小写，但社区习惯用小写保持风格统一。
/* 六位十六进制颜色示例 */
.error-text {
color: #ff0000;
}
.header {
background-color: #336699;
}
.box {
border: 1px solid #cccccc;
}
六位写法的优势在于表达力强且浏览器兼容性极佳，从早期IE6到现代浏览器都完整支持。缺点是当颜色通道成对重复时显得啰嗦，例如浅灰#cccccc写了两遍c，这便引出了后续的简写规则。在团队协作中，统一采用六位写法能降低阅读成本，但个人快速原型开发时常会切换为更短的写法。
#RGB三位简写规则与适用边界
当六位十六进制颜色中每两位字符完全相同时，CSS允许将其压缩为三位形式#RGB。转换规则是把RR、GG、BB各自取第一位，浏览器渲染时会自动将每位复制一次。例如#f00等价于#ff0000，#0f0等价于#00ff00，#ccc等价于#cccccc。这种简写显著减少了代码体积，在写临时样式或主题变量时非常顺手。
但三位写法有严格限制：只有通道内两位重复才能简写，像#123456这种每位都不同的颜色无法压缩。如果强行写成#123，浏览器会解读为#112233，与原意完全偏离。因此在使用简写前，必须确认颜色值符合重复规律，否则会造成视觉偏差且难以排查。
/* 三位简写对照 */
.btn-primary {
background: #09f; /* 等于 #0099ff */
}
.link {
color: #f60; /* 等于 #ff6600 */
}
/* 错误示例：#123 会被解析为 #112233 而非 #123456 */
.wrong {
color: #123;
}
从工程角度看，三位简写适合工具类样式和快速布局，但在设计系统里建议保留六位写法，方便设计师与前端核对精确色值。部分构建工具会自动把可简写的六位转成三位以压缩CSS，这属于编译期优化，不影响源码可读性。
带透明度的八位十六进制与兼容处理
现代CSS扩展了十六进制颜色，支持八位形式#RRGGBBAA，末尾两位AA表示透明度通道，00为完全透明，FF为不透明。例如#ff000080是半透明红色。对应地，也有四位简写#RGBA，如#f008表示带约53%不透明的红色。这种写法比rgba()更紧凑，但旧版浏览器（如IE）无法识别，会直接忽略该声明。
面对兼容性要求高的项目，推荐用rgba()作为降级方案，或使用@supports做特性检测。下面代码展示如何优雅提供回退：先写rgba保证老浏览器有颜色，再用八位十六进制覆盖以支持新内核。这样既能用上新语法，又不破坏旧环境。
.card {
background: rgba(51, 102, 153, 0.5);
background: #33669980; /* 现代浏览器使用 */
}
八位写法在组件库里越来越常见，尤其是需要半透明遮罩、悬浮层背景时。开发时应通过浏览器占比数据决定是否采用，并用自动化工具检查输出包里有无不被支持的色值。掌握从三位到八位的全部规则，才能让颜色代码既简洁又稳健。