十六进制灰色必须rr==gg==bb，如#888、#ccc；#888比#777亮因gamma校正导致非线性感知；推荐用hsl变量（如--gray-50: hsl(0,0%,50%)）替代纯十六进制以提升可维护性与主题适配性。
十六进制写灰色，必须保证RR == GG == BB
直接结论：#888、#ccc、#444 是合法灰色，因为它们展开后是 #888888、#cccccc、#444444，红绿蓝三通道完全相等。只要任意一位十六进制数重复两次构成六位值，就是纯灰。
常见错误现象：#888999 看起来像灰，但其实是带蓝调的浅青灰；#aabbcc 是冷调浅灰，不是中性灰——人眼会立刻察觉偏色。
-
#000→#000000（纯黑） -
#333→#333333（深灰，适合文字强调） -
#666→#666666（标准中灰，常作边框） -
#999→#999999（浅灰，适合次要文本） -
#eee→#eeeeee（极浅灰，卡片背景常用） -
#fff→#ffffff（纯白）
为什么#888比#777看起来更亮，但不是线性关系
十六进制每位代表 4 位二进制，0–f 对应十进制 0–15，而两位组合（如 88）对应十进制 136，77 是 119。所以 #888 的 RGB 是 rgb(136, 136, 136)，#777 是 rgb(119, 119, 119)，差值为 17，但视觉亮度差比数值差更明显——这是 Gamma 校正导致的非线性感知。
这意味着：靠“肉眼估摸”加减一位十六进制数（比如从 #999 改成 #aaa）并不能得到均匀的灰度阶梯；想做 5 级灰度系统，不能只写 #555 #777 #999 #bbb #ddd，得换算成 L 值校准。
想快速生成一串等距灰阶？别手敲，用 CSS 变量 + HSL 更稳
十六进制写灰虽快，但层级控制乏力。例如你写了 #444 作文字色、#ddd 作背景，结果在深色模式下全糊成一片——因为 #444 在暗背景下对比度崩了，而十六进制本身不携带明度语义。
真正可维护的做法是放弃纯十六进制，改用 HSL 定义灰度变量：
:root {
--gray-30: hsl(0, 0%, 30%);
--gray-50: hsl(0, 0%, 50%);
--gray-70: hsl(0, 0%, 70%);
}
这样：color: var(--gray-30); 比 color: #4d4d4d;（≈#444）更能表达设计意图，也方便后续批量切换主题（比如深色模式下把 --gray-30 改成 hsl(0, 0%, 70%) 即可）。
十六进制灰和 RGB 灰混用时容易漏掉的兼容细节
现代浏览器对 #888 和 rgb(136,136,136) 解析一致，但有两点必须注意：
- 旧版 Safari（fill 属性），建议生产环境统一用六位写法
#888888 - 如果项目用了 PostCSS 或构建工具自动压缩颜色（如 cssnano），
#888可能被转成#888888，但rgb(136,136,136)不会被动转换——若你依赖字符串匹配做主题替换，这种不一致性会出问题 -
#000和rgb(0,0,0)在可访问性检测工具（如 axe-core）里都被识别为黑色，但#000000的字符长度更短，GZIP 后体积略优（微乎其微，但超大样式表里可累计）
最易被忽略的一点：十六进制灰没有 alpha 通道，要半透灰必须切到 rgba() 或 hsla()；直接写 #88888888 是无效语法，浏览器直接丢弃整条声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
