HTML 颜色

在 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 个标准颜色名称,常见的颜色有:

名称 颜色代码名
红色 red
橙色 orange
黄色 yellow
绿色 green
青色 aqua
蓝色 blue
紫色 purple
粉色 pink
棕色 brown
白色 white
灰色 gray
黑色 black

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 表示的颜色值是一样的。