颜色的表示

1 颜色名

编写方式

直接使用颜色对应的英文单词，编写比较简单。

.fontColor {
  color: red; /* 红色 */
}

注意

颜色名这种方式，表达的颜色比较单一，所以用的并不多，具体颜色名参考MDN官方文档。

2 rgb 或 rgba

编写方式

使用 、、 这三种光的三原色进行组合。

• r ：
• g ：
• b ：
• a ：透明度（ alpha ）

/* rgb */
.fontColor {
  color: rgb(255, 0, 0); /* 红色 */
}

/* rgba */
.fontColor {
  color: rgba(255, 0, 0, 0.5); /* 半透明红*/
}

注意

1. 若三种颜色值相同，呈现的是，值越大，灰色越浅。
2. rgb(0, 0, 0) 是黑色，rgb(255, 255, 255) 是白色。
3. 对于 rgba 来说，前三位是 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是 百分比。

3 HEX或HEXA

编写方式

HEX 原理和 rgb 一样，依然通过：、、 进行组合，只不过要用 6 个数字，分成 3 组来表达。

格式为：#rrggbb

每一位数字的取值范围是：0~f，即 ( 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , a , b , c , d , e , f ) 。

所以每一种光的最小值是：00 ，最大值是：ff

.fontColor {
  color: #ff0000; /* 红色 */
}

注意

1. IE浏览器不支持 HEXA，但支持 HEX。

2. 如果每种颜色的两位都是相同的，就可以简写，例如：#ff0000 可以简写为 #f00。

4 HSL或HSLA

编写方式

HSL 是通过：色相、饱和度、亮度，来表示一个颜色，格式为：hsl(色相, 饱和度, 亮度)。

• 色相（hue）：取值范围是 0~360 度。

• 饱和度（saturation）：取值范围是 0%~100%。（向色相中对应颜色中添加灰色，0% 全灰，100% 没有灰）

• 亮度（lightness）：取值范围是 0%~100%。（0%亮度没了，所以就是黑色。100%亮度太强，所以就是白色了）

HSLA 其实就是在 HSL 的基础上，添加了透明度。

.fontColor {
  color: hsl(0deg, 100%, 50%); /* 红色 */
}