fff等于白色，因其是#FFFFFF的简写，浏览器展开为#ffffff，其中ff即十进制255，红绿蓝三通道最大值叠加形成纯白光。
为什么 #fff 就等于白色？
#fff 是 #FFFFFF 的合法简写，浏览器会自动把它展开成六位完整值：把每个字符复制一次，变成 #ffffff。而 ff 对应十进制的 255，是红色、绿色、蓝色三个通道各自能达到的最大亮度值，三者叠加就是纯白光——这和显示器子像素发光原理完全一致。
哪些颜色能简写成三位？规则很严格
简写不是“看着顺眼就缩”，而是有明确技术条件：只有当 #RRGGBB 中的 RR、GG、BB 各自成对相同时，才能写成 #RGB。浏览器解析时会做“单字复制”操作，比如：
-
#f06→#ff0066（红=255，绿=0，蓝=102） -
#88c→#8888cc（不是灰色，是偏蓝的浅紫） -
#000→#000000（黑色）
但这些就不行：
-
#ffcc01不能简写为#fc1（因为01≠00或11） -
#1a2b3c完全无法简写（每对都不重复）
实际写 CSS 时怎么选：三位还是六位？
选哪种不只看“好不好看”，得兼顾可读性、团队规范和工具链支持：
- 用
#fff这类三位写法，代码更紧凑，适合高频使用的中性色（#000、#333、#ccc） - 用六位写法（如
#ff5733）更直观反映真实通道值，方便调试和颜色微调 - 某些 CSS 压缩工具（如 cssnano）会自动把六位转三位，但前提是满足简写条件；反之，若手动写了
#fc1却对应不了#ffcc11，那结果就是错的 - 八位带透明度的颜色（如
#ffffff80）不支持三位简写，必须写满八位
容易被忽略的兼容性和陷阱
三位简写虽小，但几个细节常导致意外交互问题：
- 大小写不敏感，
#FFF和#fff效果一样，但混用会降低代码一致性 - 旧版 IE（IE8 及更早）完全不支持三位简写，不过现在基本不用考虑
- 设计稿里给的
#F0F0F0看着像能简写，但F0 ≠ FF，所以#f0f是错的——它会被解析为#ff00ff（品红），不是你想要的浅灰 - VS Code 或 WebStorm 的颜色预览插件，有时会把非法简写也渲染成某种颜色，造成视觉误导，务必核对 DevTools 中 computed 面板的实际值
真正关键的不是“能不能缩”，而是“缩完是不是你要的那个色”。每次敲下 #f36 之前，心里默念一遍：红→ff，绿→33，蓝→66——没这一步，简写就从捷径变成隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
