轻松上手,快乐学习!

HTML 颜色


HTML 颜色由预定义的颜色名称指定,或由RGB、HEX、HSL、RGBA或HSLA值指定。


颜色名称

在 HTML 中,可以使用颜色名称指定颜色:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

亲自试一试 »

HTML 支持 140个标准颜色名称


背景色

您可以设置 HTML 元素的背景色:

Hello World


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

实例

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

亲自试一试 »

文本颜色

您可以设置文本的颜色:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

实例

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
亲自试一试 »

边框颜色

可以设置边框的颜色:

Hello World

Hello World

Hello World

实例

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
亲自试一试 »

颜色值

在 HTML 中,还可以使用 RGB 值、十六进制值、HSL值、RGBA 值和 HSLA 值指定颜色。

以下三个 <div> 元素的背景色设置为 RGB、HEX 和 HSL 值:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

以下两个 <div> 元素的背景色设置为 RGBA 和 HSLA 值,这为颜色添加了一个 Alpha 通道(这里我们有50%的透明度):

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

实例

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
亲自试一试 »

有关颜色值的更多信息

在下一章中你将了解更多关于 RGB, HEXHSL 的知识。