CSS的color属性用于设置文本内容的颜色，是网页样式开发中最基础也最常用的属性之一，其取值方式多样，适配不同的开发场景，同时合理的颜色设置直接影响用户阅读体验。
color属性的基础语法
color属性可以直接作用于所有包含文本的元素，基本语法格式如下：
/* 选择器 {
color: 取值;
} */
p {
color: red;
}
该属性可以被所有主流浏览器支持，继承性为是，即如果父元素设置了color，子元素没有单独设置时会默认继承父元素的颜色值。
color属性的常见取值类型
1. 颜色关键字
CSS预定义了一系列颜色关键字，比如red、blue、black、white等，直接使用关键字名称即可设置颜色，适合快速调试的场景。
h1 {
color: blue; /* 标题文字设为蓝色 */
}
span {
color: orange; /* 行内元素文字设为橙色 */
}
2. 十六进制颜色值
十六进制颜色值以#开头，后面跟随6位十六进制字符，每两位分别对应红、绿、蓝三个通道，取值范围是00到FF，也可以简写为3位，比如#f00等价于#ff0000。
.text-primary {
color: #1890ff; /* 常用的品牌蓝 */
}
.text-success {
color: #52c41a; /* 成功状态绿 */
}
3. RGB/RGBA颜色值
RGB通过红、绿、蓝三个通道的数值（0-255）混合成颜色，RGBA在RGB的基础上增加了透明度通道，取值范围是0到1，0表示完全透明，1表示完全不透明。
.desc {
color: rgb(102, 102, 102); /* 深灰色描述文字 */
}
.mask-text {
color: rgba(0, 0, 0, 0.7); /* 半透明黑色文字 */
}
4. HSL/HSLA颜色值
HSL通过色相（0-360）、饱和度（0%-100%）、亮度（0%-100%）三个维度定义颜色，HSLA同样增加了透明度通道，这种方式更符合人眼对颜色的感知逻辑，调整亮度就能快速得到同色系的深浅颜色。
.highlight {
color: hsl(30, 100%, 50%); /* 橙色高亮文字 */
}
.low-light {
color: hsla(30, 100%, 50%, 0.8); /* 带透明度的橙色文字 */
}
字体颜色与可读性优化技巧
1. 保证足够的颜色对比度
文本颜色和背景颜色的对比度直接影响可读性，根据WCAG 2.1标准，普通文本的最小对比度需要达到4.5:1，大文本（至少18pt或14pt加粗）的最小对比度需要达到3:1。可以通过在线对比度检测工具验证颜色搭配是否达标。
/* 符合对比度要求的搭配 */
.card {
background-color: #ffffff; /* 白色背景 */
color: #333333; /* 深灰色文字，对比度约12:1 */
}
/* 不符合要求的搭配 */
.bad-case {
background-color: #f0f0f0; /* 浅灰背景 */
color: #cccccc; /* 更浅的灰色文字，对比度不足 */
}
2. 避免大面积使用高饱和度颜色作为文本色
高饱和度的纯红、纯蓝等颜色长时间阅读容易造成视觉疲劳，建议作为强调色少量使用，正文文本优先选择低饱和度的中性色，比如深灰、灰褐等。
body {
color: #4a4a4a; /* 低饱和度深灰作为正文色 */
background-color: #fafafa; /* 浅灰白背景 */
}
.emphasis {
color: #e63946; /* 高饱和度红色仅用于强调内容 */
}
3. 适配深色模式
深色模式下需要反转文本和背景的颜色逻辑，文本颜色改为浅色系，避免白色文字直接搭配纯黑背景导致刺眼，建议选择柔和的浅灰作为文本色。
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a; /* 深色背景 */
color: #e0e0e0; /* 柔和浅灰文字 */
}
a {
color: #5dade2; /* 深色模式下调整链接色保证对比度 */
}
}
4. 链接文本颜色需要明确区分
链接文本除了颜色不同，最好搭配下划线或者hover状态变化，避免仅通过颜色区分链接和普通文本，照顾色觉障碍用户的使用体验。
a {
color: #165dff; /* 链接专属蓝色 */
text-decoration: underline; /* 搭配下划线明确标识 */
}
a:hover {
color: #003eb3; /* hover状态加深颜色 */
}
常见问题说明
需要注意color属性仅控制文本颜色，不会影响边框、背景等元素的颜色，如果需要设置边框颜色要使用border-color属性，设置背景色要使用background-color属性。另外，当使用currentColor作为取值时，会取当前元素color属性的计算值，方便实现文本和边框、阴影等颜色统一的场景。
.icon-text {
color: #faad14; /* 文本设为黄色 */
border-bottom: 1px solid currentColor; /* 下边框也使用同样的黄色 */
text-shadow: 0 1px 2px currentColor; /* 文字阴影同样使用黄色 */
}