CSS颜色

CSS颜色

CSS颜色的表现形式主要有三种方式:颜色名称、十六进制代码和十进制代码。

颜色名称

p {
    color: red;
}
1
2
3

在HTML4中只定义了以下16种颜色名称。

颜色名称 十六进制代码 十进制代码 含义
black #000000 0,0,0 黑色
silver #c0c0c0 192,192,192 银灰色
gray #808080 128,128,128 灰色
white #ffffff 255,255,255 白色
maroon #800000 128,0,0 栗色
red #ff0000 255,0,0 红色
purple #800080 128,0,128 紫色
fuchsia #ff00ff 255,0,255 紫红
green #008000 0,128,0 绿色
lime #00ff00 0,255,0 闪光绿
olive #808000 128,128,0 橄榄色
yellow #ffff00 255,255,0 黄色
navy #000080 0,0,128 海军蓝
blue #0000ff 0,0,255 蓝色
teal #008080 0,128,128 水鸭色
aqua #00ffff 0,255,255 浅绿色

十六进制代码

p {
    color: #ff0000;
}
1
2
3

十进制代码

p {
    color: rgb(255, 0, 0);
    color: rgb(255, 0, 0, 0.5);
    color: hsl(120, 100%, 30%);
    color: hsla(120, 100%, 30%, 0.5);
}
1
2
3
4
5
6

十进制表示法有以下四种方案:

函数 说明 示例
rgb(r,g,b) RGB模型(红、绿、蓝) rgb(255, 0, 0)
rgba(r,g,b,a) RGB模型,a表示0~1之间的透明度 rgb(255, 0, 0, 0.5)
hsl(h,s,l) HSL模型(色相、饱和度、透明度) hsl(120, 100%, 30%)
hsla(h,s,l,a) HSL模型,a表示0~1之间的透明度 hsla(120, 100%, 30%, 0.5)