css颜色值写成#fff是什么意思_掌握hex三位简写颜色规则

fff 是纯白色，等价于 #ffffff；三位简写要求每通道两位相同，浏览器将其每位复制扩展为六位，如 #f06 变为 #ff0066。

#fff 是 CSS 中十六进制颜色值的三位简写形式，代表纯白色。它等价于六位写法 #ffffff，浏览器在解析时会自动将其扩展为 #ff ff ff（即红、绿、蓝通道各为 255）。

三位简写的前提条件

不是所有六位颜色都能缩成三位。只有满足以下条件才可简写：

• 红色两位必须相同（如 #ffaa00 中的 “ff”）
• 绿色两位必须相同（如 #ffaa00 中的 “aa”）
• 蓝色两位必须相同（如 #ffaa00 中的 “00”）

三位怎么变六位？浏览器自动复制每位

当你写 #f06，浏览器实际按如下规则还原：

• 第一位 f → 扩展为 ff（红色 = 255）
• 第二位 0 → 扩展为 00（绿色 = 0）
• 第三位 6 → 扩展为 66（蓝色 = 102）
• 最终解析为 #ff0066（一种粉红色）

常见可简写与不可简写的例子

✅ 可简写（每对字符相同）：

• #ffffff → #fff
• #000000 → #000
• #ffcc00 → #fc0
• #336699 → #369

❌ 不可简写（任一通道两位不同）：

• #ffcc01 → 不能写成 #fc1（因为 “01” ≠ “00” 或 “11”）
• #123456 → 无法简写（“12”、“34”、“56”均不重复）
• #aabbcd → 蓝色是 “cd”，不相同，整体不可简写

为什么设计三位简写？

主要为了提升代码可读性与书写效率：

• 减少字符数，尤其在大量用色场景（如主题色、按钮状态）中更简洁
• 便于记忆和手写，比如 #000、#fff、#f00（红色）比六位形式直观得多
• 不影响渲染结果，浏览器保证完全等效