CSS 合法颜色值

CSS 颜色

CSS 提供了多种方式来指定颜色值，以下是主要的合法颜色值表示方法：

• 预定义/跨浏览器的颜色名
• 十六进制颜色和带透明度的十六进制颜色
• RGB 和 RGBA 颜色值
• HSL 和 HSLA 颜色值
• 使用currentcolor关键字

预定义/跨浏览器的颜色名

HTML和CSS颜色规范中预定义了140个颜色名称，可以在我们的颜色名参考中查看所有预定义名称。

常用颜色关键字：black、white、red、green、blue、yellow、cyan、gray、maroon、purple等。

.p1 {background-color: MediumPurple;}
.p2 {background-color: MediumSeaGreen;}
.p3 {background-color: DodgerBlue;}
.p4 {background-color: Peru;}

颜色演示效果：

• MediumSeaGreen
• MediumSeaGreen
• DodgerBlue
• Peru

十六进制颜色值

格式: #RRGGBB或#RGB(简写)，十六进制颜色值不区分大小写。

• 6位格式：#后跟6个十六进制数字(0-9, A-F)，前两位RR表示红色，中间两位GG表示绿色，后两位BB表示蓝色。
• 3位简写：当每对数字相同时可以简写为3位，如#00ff33可以简写为#0f3。

.p1 {background-color: #9370DB;}
.p2 {background-color: #3CB371;}
.p3 {background-color: #1E90FF;}
.p4 {background-color: #CD853F;}

颜色演示效果：

• #9370DB;
• #3CB371;
• #1E90FF;
• #CD853F;

带透明度的十六进制颜色值

格式: #RRGGBBAA或#RGBA(简写)，前6位是标准的RGB十六进制值，后2位表示透明度(alpha通道)。

透明度(alpha通道)中，00表示完全透明，FF表示完全不透明。

.p1 {background-color: #9370DB33;}
.p2 {background-color: #3CB37166;}
.p3 {background-color: #1E90FF99;}
.p4 {background-color: #CD853FBB;}

颜色演示效果：

• #9370DB33;
• #3CB37166;
• #1E90FF99;
• #CD853FBB;

RGB 颜色值

RGB 颜色值由rgb(red, green, blue)函数设置，每个参数取值 0-255 或 0%-100%。

.p1 {background-color: rgb(147,112,219);}
.p2 {background-color: rgb(60,179,113);}
.p3 {background-color: rgb(30,144,255);}
.p4 {background-color: rgb(205,133,63);}

颜色演示效果：

• rgb(147,112,219);
• rgb(60,179,113);
• rgb(30,144,255);
• rgb(205,133,63);

RGBA 颜色值

RGBA 是 RGB 颜色值的扩展，rgba(red, green, blue, alpha)函数设置，带有 Alpha 通道指定不透明度。

.p1 {background-color: rgba(147,112,219,0.2);}
.p2 {background-color: rgba(60,179,113,0.4);}
.p3 {background-color: rgba(30,144,255,0.6);}
.p4 {background-color: rgba(205,133,63,0.8);}

颜色演示效果：

• rgba(147,112,219,0.2);
• rgba(60,179,113,0.4);
• rgba(30,144,255,0.6);
• rgba(205,133,63,0.8);

HSL 颜色值

HSL 颜色值由hsl(hue, saturation, lightness)函数设置，指的是色相(hue)、饱和度(saturation)和亮度(lightness)。

• hue：色相（0-360）
• saturation：饱和度（0%-100%）
• lightness：亮度（0%-100%）

.p1 {background-color: hsl(259.63,59.78% 64.9%);}
.p2 {background-color: hsl(146.72,49.79%,46.86%);}
.p3 {background-color: hsl(209.6,100%,55.88%);}
.p4 {background-color: hsl(29.58,58.68%,52.55%);}

颜色演示效果：

• hsl(259.63,59.78%,64.9%);
• hsl(146.72,49.79%,46.86%);
• hsl(209.6,100%,55.88%);
• hsl(29.58,58.68%,52.55%);

HSLA 颜色值

HSLA 是 HSL 颜色值的扩展，hsla(hue, saturation, lightness, alpha)函数设置，带有 Alpha 通道指定不透明度。

.p1 {background-color: hsla(259.63,59.78%,64.9%,0.3);}
.p2 {background-color: hsla(146.72,49.79%,46.86%,0.4);}
.p3 {background-color: hsla(209.6,100%,55.88%,0.6);}
.p4 {background-color: hsla(29.58,58.68%,52.55%,0.8);}

颜色演示效果：

• hsla(259.63,59.78%,64.9%,0.3);
• hsla(146.72,49.79%,46.86%,0.4);
• hsla(209.6,100%,55.88%,0.6);
• hsla(29.58,58.68%,52.55%,0.8);

currentColor 关键字

currentColor关键字引用元素的color属性值。

.p1 {
    color: #0077ff;
    border: 2px solid currentColor; /* 边框颜色与文字颜色相同 */
}

颜色演示效果：