CSS 中的 color 属性用于设置 HTML 元素的颜色。通常，该属性用于设置元素的背景色或字体颜色。
在 CSS 中，我们使用颜色值来指定颜色。我们还可以将此属性用于边框颜色和其他装饰效果。
系统定义的颜色名、十六进制和rgb可以通过在线工具查看更加直观。
我们可以通过以下方式定义元素的颜色：
- RGB 格式。
- RGBA 格式。
- 十六进制表示法。
- 短十六进制表示法。
- HSL。
- HSLA。
- 内置颜色。
RGB 颜色格式
RGB 颜色语法
color: rgb(R, G, B);此属性允许三个值，可以是百分比或整数（范围从 0 到 255），其中：
- R：红色值。正整数 （0~255）
- G：绿色值。正整数 （0~255）
- B：蓝色值。正整数（0~255）
RGBA 颜色格式
它和rgb颜色类似，只不过多了一个 A (Alpha)。alpha的取值范围是0.0到1.0，其中0.0表示完全透明，1.0表示不透明。
RGBA 语法如下：
color:rgba(R, G, B, A); 十六进制格式
十六进制可以定义为六位颜色表示。此符号以 # 符号 开头，后跟从 0 到 F 的六个字符。十六进制表示，前两位代表red (RR)颜色值，中间两位代表green (GG)颜色值，后两位代表蓝色 (BB) 颜色值。
十六进制的黑色符号是#000000，十六进制的白色符号是#FFFFFF。一些十六进制表示法的代码是#FF0000、#00FF00、#0000FF、#FFFF00 等等。
语法
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F); 短十六进制格式
它是十六进制表示法的一种简短形式，其中重新创建每个数字以达到等效的十六进制值。
例如，#7B6 变成十六进制的#77BB66。
短十六进制的黑色符号是#000，短十六进制的白色符号是#FFF。一些短十六进制代码是#F00、#0F0、#0FF、#FF0 等等。
HSL格式
它是色相、饱和度和亮度的缩写形式。让我们分别了解它们。
- 色相：可以定义为色轮上的度数，从0到360。0代表红色，120代表绿色，240代表蓝色。
- 饱和度： 取百分比值，100% 表示完全饱和，即没有灰度，50% 表示 50% 灰色，但颜色仍然可见，0% 表示完全不饱和，即完全灰色，颜色不可见。
- 亮度：颜色的明度可以定义为我们要提供颜色的光，其中0%代表黑色（没有光），50%代表既不暗也不亮, 100% 代表白色（全亮度）。
让我们看看颜色属性中 HSL 的语法。
语法
color:hsl(H, S, L); HSLA格式
它与 HSL 属性完全相似，只是它包含指定元素透明度的 A (alpha)。 alpha的取值范围是0.0到1.0，其中0.0表示完全透明，1.0表示不透明。
语法
color:hsla(H, S, L, A); 内置颜色格式
语法
color: 颜色名;常用的一些颜色名和十六进制的对应表如下：
| 序号 | 颜色名称 | 十六进制值 | rgb() 值 |
|---|---|---|---|
| 1. | 红色 | #FF0000 | rgb(255,0,0) |
| 2. | 橙色 | #FFA500 | rgb(255,165,0) |
| 3. | 黄色 | #FFFF00 | rgb(255,255,0) |
| 4. | 粉红色 | #FFC0CB | rgb(255,192,203) |
| 5. | 绿色 | #008000 | rgb(0,128,0) |
| 6. | 紫罗兰色 | #EE82EE | rgb(238,130,238) |
| 7. | 蓝色 | #0000FF | rgb(0,0,255) |
| 8. | 水色 | #00FFFF | rgb(0,255,255) |
| 9. | 棕色 | #A52A2A | rgb(165,42,42) |
| 10. | 白色 | #FFFFFF | rgb(255,255,255) |
| 11. | 灰色 | #808080 | rgb(128,128,128) |
| 12. | 黑色 | #000000 | rgb(0,0,0) |
例子
举例说明上面几种格式的用法
<html>
<head>
<title>CSS 颜色color属性例子</title>
<style>
h3{
text-align:center;
}
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#short{
color: #E8E;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h3 id="rgb">
rgb颜色格式
</h3>
<h3 id="rgba">
rgba颜色格式
</h3>
<h3 id="hex">
十六进制颜色格式
</h3>
<h3 id="short">
短十六进制颜色格式
</h3>
<h3 id="hsl">
HSL颜色格式.
</h3>
<h3 id="hsla">
HSLA 颜色格式.
</h3>
<h3 id="built">
颜色名格式
</h3>
</body>
</html>输出：
