CSS 颜色

在 CSS 中，颜色可以使用多种方式来指定，包括关键词、十六进制、RGB、RGBA、HSL、HSLA等。这些方法可以用于设置文本颜色、背景颜色、边框颜色等。

使用关键词：

CSS支持一些预定义的颜色名称，如 red、blue、green 等。

h1 {
    color: red;
    background-color: green;
}

使用十六进制：

使用十六进制表示颜色，格式为 #RRGGBB，其中 RR、GG、BB 分别代表红色、绿色和蓝色的色值，每个值范围从 00 到 FF。

p {
    color: #336699;
    background-color: #f0f0f0;
}

使用RGB（红绿蓝）：

使用RGB表示颜色，格式为 rgb(r, g, b)，其中 r、g、b 分别是红色、绿色和蓝色的整数值，取值范围从 0 到 255。

div {
    color: rgb(100, 150, 200);
    background-color: rgb(255, 0, 0); /* 红色 */
}

使用RGBA（带透明度的RGB）：

RGBA与RGB类似，多了一个透明度值 a，取值范围为 0.0（完全透明）到 1.0（完全不透明）

span {
    color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */
    background-color: rgba(0, 255, 0, 0.2); /* 半透明的绿色背景 */
}

使用HSL（色相、饱和度、亮度）：

使用HSL表示颜色，格式为 hsl(h, s%, l%)，其中 h 是色相（0-360），s% 是饱和度（0%-100%），l% 是亮度（0%-100%）。

h2 {
    color: hsl(120, 100%, 50%); /* 鲜绿色 */
    background-color: hsl(240, 100%, 50%); /* 鲜蓝色背景 */
}

使用HSLA（带透明度的HSL）：

HSLA与HSL类似，多了一个透明度值 a，取值范围为 0.0（完全透明）到 1.0（完全不透明）。

h3 {
    color: hsla(240, 100%, 50%, 0.7); /* 半透明的鲜蓝色 */
    background-color: hsla(0, 100%, 50%, 0.5); /* 半透明的红色背景 */
}

选择颜色格式的建议：

• 使用颜色关键词或十六进制表示简单颜色。

• 使用RGB或RGBA表示需要精确控制的颜色。

• 使用HSL或HSLA表示需要在设计中进行色调、饱和度和亮度调整的颜色。

选择合适的颜色格式取决于设计需求和个人偏好。CSS的颜色属性提供了丰富的选择，能够满足各种视觉设计的要求。