在CSS中，颜色值的表示方式有多种，其中十六进制（hex）颜色值是使用频率最高的一种。#fff是hex颜色值的三位简写形式，对应的标准六位hex颜色值为#ffffff，代表的是纯白色。这种简写规则是CSS规范中为了精简代码而设计的特性，适用于所有符合重复规律的六位hex颜色值。
hex颜色值的基本结构
标准的六位hex颜色值由#开头，后面跟随6位十六进制字符，每两位分为一组，分别对应RGB三个颜色通道：
- 前两位：红色通道（R），取值范围00到ff
- 中间两位：绿色通道（G），取值范围00到ff
- 最后两位：蓝色通道（B），取值范围00到ff
每组两位字符相同的时候，就可以使用三位简写形式，规则是将每组的两个重复字符缩写为一个字符。比如#ff0000中，红色通道是ff，绿色通道是00，蓝色通道是00，就可以简写为#f00，对应的是纯红色。
三位hex简写的转换规则
三位hex简写到六位标准格式的转换逻辑非常简单，只需要将每一位字符重复一次即可：
| 三位简写 | 转换后六位格式 | 对应颜色 |
|---|---|---|
| #fff | #ffffff | 纯白色 |
| #000 | #000000 | 纯黑色 |
| #f00 | #ff0000 | 纯红色 |
| #0f0 | #00ff00 | 纯绿色 |
| #00f | #0000ff | 纯蓝色 |
| #c96 | #cc9966 | 棕橙色 |
实际使用示例
在CSS样式中，两种写法的显示效果完全一致，开发者可以根据场景选择更简洁的写法：
/* 设置文本颜色为白色，两种写法效果相同 */
.text-white {
color: #fff;
/* 等价于 color: #ffffff; */
}
/* 设置背景颜色为浅灰色，两位不同无法简写 */
.bg-light-gray {
background-color: #f5f5f5;
/* 不能简写为#f5f，因为f5和f5不是重复字符 */
}
/* 设置边框颜色为深蓝色 */
.border-dark-blue {
border: 1px solid #039;
/* 等价于 border: 1px solid #003399; */
}
注意事项
使用三位hex简写时需要注意以下几点：
- 只有六位hex颜色值中，每两位字符完全相同的情况下才能使用简写，比如#ff00cc中，红色通道ff相同，绿色通道00相同，但蓝色通道cc和后面的00不同，因此不能简写为#f0c，因为#f0c转换后是#ff00cc，和原值一致？不对，#ff00cc的蓝色通道是cc，和前面的00不同，所以每两位是ff、00、cc，都是两位相同，所以可以简写为#f0c，转换后是#ff00cc，是对的。哦更正：只要每两位是相同字符就可以，不管三个通道之间是否相同。比如#ff00cc可以简写为#f0c。
- 如果六位hex颜色值中存在任意一组两位字符不同，就不能使用三位简写，比如#f5f5f5中，每组是f5、f5、f5，两位不同，因此不能简写。
- hex颜色值不区分大小写，#FFF和#fff、#FfF的显示效果完全一致。
- 除了三位简写，还有四位（带透明度）和八位（带透明度）的hex颜色值简写规则，但是三位简写是最常用的基础形式。
常见误区
很多新手会误以为#fff是白色是因为f代表最大亮度，实际上f是十六进制中的15，对应十进制是255，是RGB通道的最大值，因此#ffffff对应RGB(255,255,255)，也就是纯白色。同理#000对应RGB(0,0,0)，是纯黑色。
如果要表示半透明的白色，需要使用八位hex颜色值#ffffff80，或者四位简写#fff8，其中最后两位表示透明度，取值范围00到ff，和六位颜色值的规则类似，也可以简写为一位。