HTML 颜色

在 HTML 中，颜色有前景色、背景色，应用于字体，边框，背景等场景中，让网页看起来丰富多彩。HTML 颜色使用预定义的颜色名称或使用 RGB、16 进制等表示方法。

背景色

背景就像幕布，提供了一个基调。通过 CSS 属性 background-color 为元素设定背景色。如下面的例子:

<h1 styles="background-color:red;">我是红色背景的标题</h1>
<h1 styles="background-color:green;">我是绿色背景的标题</h1>
<h1 styles="background-color:blue;">我是蓝色背景的标题</h1>

文字颜色

文字的颜色通过 CSS 属性 color 来设置。

<h1 styles="color:red;">我是红色的标题</h1>
<h1 styles="color:green;">我是绿色的标题</h1>
<h1 styles="color:blue;">我是蓝色的标题</h1>

颜色的表示方法

在 HTML 中颜色有很多表示方法，最方便的是使用内置的颜色名称，还有就是通过 RGB 三原色表示法和 16 进制表示方法来组合颜色。

内置颜色名称

HTML 支持 140 个标准颜色名称，常见的颜色有：

RGB 颜色

RGB 三原色表示法是通过通过三个基色（红色、绿色、蓝色）按照不同的比例混合成所有的颜色。将三个基色（红色、绿色、蓝色）每种按照颜色的深浅（强度）分成 256 个等级，每个等级用 0 - 255 之间的数字表示（数字越小表示此种颜色越弱）。

RGB 颜色表示方法为: rgb(红色等级, 绿色等级, 蓝色等级)。 因此 RGB 表示法总共可以表示 256 x 256 x 256 = 16777216 种颜色，称为 1600 万色。

下面是几种常见颜色的 RGB 表示方法

• 红色: rgb(255, 0, 0)
• 绿色: rgb(0, 255, 0)
• 蓝色: rgb(0, 0, 255)
• 黄色: rgb(255, 255, 0)

可以使用下面的方法文字设置颜色：

<h1 styles="color:rgb(255, 0, 0);">我是红色的标题</h1>
<h1 styles="color:rgb(0, 255, 0);">我是绿色的标题</h1>
<h1 styles="color:rgb(0, 0, 255);">我是蓝色的标题</h1>

16 进制表示法

16 进制表示法其实也是 RGB 三原色表示法的另外一种简化写法。在 RGB 三原色表示方法中，红绿蓝分别分为 256 个等级，用 0 - 255 数字表示， 0 - 255 这些数字对应的 16 进制为 00 - FF。 16 进制表示方法为 #RRGGBB，也就是两位 16 进制的红色代码，两位 16 进制的绿色代码，两位 16 进制的蓝色代码进行组合。

上述例子中的 RGB 颜色转为 16 进制如下：

<h1 styles="color:#FF0000;">我是红色的标题</h1>
<h1 styles="color:#00FF00">我是绿色的标题</h1>
<h1 styles="color:#0000FF;">我是蓝色的标题</h1>

其中 16 进制中的字母不区分大小写， #FF0000 和 #ff0000 表示的颜色值是一样的。