CSS color属性用于设置文本颜色,可通过颜色名称、十六进制、RGB、RGBA、HSL和HSLA等方式定义,分别适用于简单命名、精确配色、透明度控制等场景,其中十六进制最常用,HSL更易调节,RGBA/HSLA支持透明。

CSS 中的 color 属性用于设置文本的前景色,也就是文字的颜色。你可以通过多种方式来定义颜色值,以下是常用的方法和示例:
1. 颜色名称(Color Keywords)
CSS 支持一组预定义的颜色名称,使用起来最简单。
color: red;color: blue;
color: green;
color: black;
color: white;
color: orange;
这些是标准关键词,语义清晰,适合快速开发。
2. 十六进制值(Hexadecimal)
以 # 开头,后面跟6位或3位十六进制数字,表示红、绿、蓝三原色的强度。
立即学习“前端免费学习笔记(深入)”;
color: #ff0000; /* 红色 */color: #00ff00; /* 绿色 */
color: #0000ff; /* 蓝色 */
color: #000; /* 黑色,简写形式 */
color: #fff; /* 白色 */
6位格式为 #RRGGBB,3位格式是简写(如 #abc 表示 #aabbcc)。
3. RGB 值(rgb() 函数)
使用 rgb() 函数,传入红、绿、蓝三个颜色通道的数值(0-255)。
color: rgb(255, 0, 0); /* 红色 */color: rgb(0, 128, 0); /* 深绿色 */
color: rgb(0, 0, 255); /* 蓝色 */
也支持百分比形式:
1、数据调用该功能使界面与程序分离实施变得更加容易,美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能,为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
4. RGBA 值(带透明度)
在 rgb 的基础上增加 alpha 通道,控制颜色透明度(0 完全透明,1 完全不透明)。
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */color: rgba(0, 0, 0, 0.8); /* 80% 不透明黑色 */
5. HSL 和 HSLA(色相、饱和度、亮度)
HSL 是一种更直观的颜色表示方式:
color: hsl(0, 100%, 50%); /* 红色 */color: hsl(120, 100%, 25%); /* 深绿色 */
参数说明:
- 色相(H):0-360 度,代表颜色种类
- 饱和度(S):百分比,越高颜色越纯
- 亮度(L):百分比,0% 是黑,100% 是白
HSLA 支持透明度:
color: hsla(240, 100%, 50%, 0.3); /* 半透明蓝色 */实际应用示例
在 CSS 中这样使用:
p {color: #333;
}
.highlight {
color: rgb(255, 165, 0);
}
.faded-text {
color: hsla(0, 0%, 50%, 0.7);
}
基本上就这些方法,选择哪种取决于你的项目需求和偏好。十六进制最常见,HSL 更易调节,RGBA/HSLA 支持透明,灵活度更高。









