css color属性支持颜色关键字、十六进制（#rrggbb/#rgb/#rrggbbaa）、rgb/rgba、hsl/hsla五类值；推荐十六进制或hsl因其精度高、易调色且利于团队协作，rgba/hsla适用于透明度控制，currentcolor可复用文字色至边框或svg。
直接用 color 设置文本颜色，但真正影响效果的不是“怎么写”，而是“怎么选、怎么传、怎么兼容”——尤其在团队协作和响应式场景下，硬编码 #333 或 rgb(51, 51, 51) 很容易埋坑。
color 属性支持哪些值？别只记 hex
很多人默认只用十六进制（如 #333），但实际开发中常遇到这些情况：
- 需要微调透明度 → 必须用
rgba()或hsla()，#33333380（八位 hex）虽支持，但 IE 完全不认，rgba(51, 51, 51, 0.5)更稳妥 - 要动态调整饱和度或亮度（比如 hover 时变亮）→
hsl()比 hex 直观得多：hsl(210, 10%, 40%)改成hsl(210, 10%, 30%)就是变暗，不用换算 hex - 快速原型或内部工具 → 用颜色关键词（
rebeccapurple、slategray）可读性高，但注意：不是所有关键词都支持老浏览器，orange行，darkgoldenrod在部分 Android WebView 里可能回退到黑色
继承与重置：为什么子元素颜色总不对？
color 是可继承属性，但容易被忽略两点：
- 伪元素（如
::before）默认继承父级color，但如果你给它设了background-color却没设color，文字可能变成不可见的黑色/白色（取决于背景） - 表单控件（
input、button）在某些浏览器（尤其是 Safari）会忽略继承的color，必须显式设置：input { color: inherit; } - 用
currentColor可以复用当前文字色，适合图标 SVG 填充：svg { fill: currentColor; }，但注意它不会继承opacity，透明度需单独控制
透明度控制：rgba/hsla vs opacity 的关键区别
想让文字半透明？别直接套 opacity：
-
opacity: 0.7会让整个元素（含子元素、边框、阴影）一起变透明；而color: rgba(0, 0, 0, 0.7)只影响文字本身 -
rgba()和hsla()的 alpha 值是颜色的一部分，可被 CSS 变量接收：--text-color: rgba(0, 0, 0, 0.8); color: var(--text-color);；opacity是独立属性，无法参与颜色计算 - 如果背景是渐变或图片，用
background-color: rgba(255, 255, 255, 0.9)比opacity更可控——后者会让背景图也变淡
CSS 变量 + 颜色函数：现代项目里的实用组合
纯色值硬编码在多个地方？用变量 + 函数更可持续：
- 定义基础色：
:root { --primary: #4a6fa5; }，再用color: hsl(from var(--primary) h s l);（需支持from语法的浏览器）提取并调整 - 深色模式适配：
@media (prefers-color-scheme: dark) { :root { --text: hsl(0, 0%, 95%); } }，比写两套 hex 更易维护 - 警惕变量 fallback：如果用
color: var(--text, #333);，而--text未定义，IE 会直接用#333；但若写成color: var(--text, rgba(51, 51, 51, 1));，IE 因不支持rgbafallback 会失效——fallback 值必须是 IE 能解析的格式
最常被忽略的是：颜色从来不是孤立存在的。它和 background-color、border-color、甚至 outline 共同构成可访问性基线。WCAG 要求文本对比度 ≥ 4.5:1，用 color: #666 配浅灰背景（#f5f5f5）在实测中往往不达标——别只盯着写法，得拿工具测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
