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