HTML 颜色

颜色名称

在 HTML 中，可以使用颜色名称来指定颜色：

亲自试一试

HTML 支持 140 种标准颜色名称。

背景颜色

你可以为 HTML 元素设置背景颜色：

实例

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

亲自试一试

文本颜色

你可以设置文本的颜色：

China

China is a great country!

China, officially the People's Republic of China, is a country in East Asia.

实例

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

亲自试一试

边框颜色

你可以设置边框的颜色：

实例

<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 值、HEX 值、HSL 值、RGBA 值和 HSLA 值来指定颜色。

以下三个 <div> 元素使用 RGB、HEX 和 HSL 值设置背景颜色：

以下两个 <div> 元素使用 RGBA 和 HSLA 值设置背景颜色，它们为颜色添加了 Alpha 通道（此处为 50% 透明度）：

实例

<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、HEX 和 HSL 的知识。