十六进制颜色值以#开头，后接3位或6位十六进制字符（0–9、a–f，不区分大小写），分别表示红、绿、蓝分量强度；#rgb为简写（如#f00等价于#ff0000），#rrggbb为标准形式（如#3a86ff）。
十六进制颜色值的基本格式是什么
十六进制颜色值以 # 开头，后面跟 3 位或 6 位十六进制字符（0–9 和 a–f，不区分大小写），分别表示红（R）、绿（G）、蓝（B）分量的强度。
常见写法包括：
-
#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() 还高。
