CSS 的颜色可以通过以下六种方式设置

1. 十六进制颜色
2. RGB 颜色
3. RGBA 颜色
4. HSL 色彩
5. HSLA 颜色
6. 预定义/跨浏览器的颜色名称

十六进制颜色

所有主要浏览器都支持十六进制颜色值

指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中 RR（红色），GG（绿色）和BB（蓝色）

所有值必须介于 0 和 FF 之间

例如，#0000FF 值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其它设置为0

p { background-color:#ff0000; }

运行范例 »

RGB 颜色

RGB 颜色值在所有主要浏览器都支持

RGB颜色值指定：RGB（红，绿，蓝）

每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从 0％ 到100％ ）之间的整数

例如 RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其它设置为0

此外，下面的值定义相同的颜色：RGB（0,0,255），RGB（0％，0％，100％）

p { background-color:rgb(255,0,0); }

运行范例 »

RGBA 颜色

RGBA 颜色值被 IE9, Firefox3+, Chrome, Safari,和 Opera10+ 支持

RGBA 颜色值是 RGB 颜色值 alpha 通道的延伸 - 指定对象的透明度

RGBA 颜色值指定：RGBA ( 红，绿，蓝，alpha)

Alpha 参数是一个介于0.0（完全透明）和 1.0（完全不透明）之间的参数

p { background-color:rgba(255,0,0,0.5); }

运行范例 »

HSL颜色

IE9, Firefox, Chrome, Safari,和 Opera 10+ 支持 HSL 颜色值

HSL 代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示

HSL 颜色值指定：HSL（色调，饱和度，明度）

色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的

饱和度是一个百分比值;

0％ 意味着灰色和 100％ 的阴影，是全彩

亮度也是一个百分点;0％ 是黑色的，100％ 是白色的

p { background-color:hsl(120,65%,75%);}

运行范例 »

HSLA颜色

HSLA 颜色值被 IE9, Firefox3+, Chrome, Safari 和 Opera10+ 支持

HSLA的颜色值是一个带有 alpha 通道的 HSL 颜色值的延伸 - 指定对象的透明度

指定 HSLA 颜色值：HSLA（色调，饱和度，亮度，α），α 是Alpha 参数定义的不透明度

Alpha 参数是一个介于 0.0（完全透明）和1.0（完全不透明）之间的参数

p { background-color:hsla(120,65%,75%,0.3);}

运行范例 »

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

blue 是在 HTML 和 CSS 颜色规范预定义的颜色名称

可以访问我们的 预定义颜色名称表