如何使用十六进制代码在CSS中精确定义网页颜色？

本文共计808个文字，预计阅读时间需要4分钟。

十六进制颜色值以#开头，后跟6位十六进制数字。这些数字可以是0-9或A-F（大写或小写均可）。例如，白色为#FFFFFF，黑色为#000000。

常见写法包括：

• #rgb：简写形式，如 #f00 等价于 #ff0000（红色全开，绿蓝为 0）
• #rrggbb：标准六位形式，如 #3a86ff（一种蓝色）
• 注意：没有 # 前缀的字符串（如 3a86ff）在 CSS 中无效，浏览器会直接忽略

在 CSS 中哪些地方能用十六进制颜色

所有接受颜色值的 CSS 属性都支持十六进制写法，比如 color、background-color、border-color、box-shadow 等。

示例：

立即学习“前端免费学习笔记（深入）”；

h1 { color: #2d2d2d; } .button { background-color: #007bff; border: 1px solid #0056b3; } ::selection { background-color: #ff6b6b; }

注意：#000 和 #000000 效果完全一致，但压缩工具通常会把六位转成三位（如果可简化）；反过来，#abc 会被浏览器自动扩展为 #aabbcc，无需手动补全。

十六进制 vs rgb() / hsl()：什么时候该选哪个

十六进制最简洁，适合静态、确定的颜色；但无法直接表达透明度（alpha），也不便于动态调整亮度或饱和度。

• 要加透明度？必须换 rgba() 或 hsla()，比如 rgba(58, 134, 255, 0.8) —— #3a86ff 本身不带 alpha
• 需要计算变色（如深色模式下统一调暗）？用 hsl() 更直观，改一个数值就能调亮度，而十六进制得靠工具换算
• 团队协作中颜色命名混乱？建议用 CSS 自定义属性统一管理，例如：:root { --primary: #3a86ff; }，再在各处用 color: var(--primary);

容易被忽略的兼容性和书写陷阱

现代浏览器对十六进制支持极好，但仍有几个细节常出错：

• 误写成 #3a86ff80（八位）：这不是标准 CSS 十六进制，部分浏览器可能解析失败；如需 alpha，请用 rgb(58 134 255 / 0.5)（现代语法）或 rgba()
• 复制颜色时多空格或换行符：比如从设计稿里粘贴出 #3a86ff↵（带换行），CSS 解析会中断，务必检查是否干净
• 大小写混用虽合法（#3A86FF 和 #3a86ff 等效），但建议统一小写，避免 Git diff 里无谓的变更

真正麻烦的不是写法本身，而是当多个十六进制值散落在不同文件、不同选择器里，又没用变量管理时，一次品牌色调整就得全局搜替换——这种维护成本，往往比学透 hsl() 还高。