CSS 颜色

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

CSS 颜色名

在 CSS 中，可以使用颜色名称来指定颜色:

亲自试一试 »

CSS/HTML 支持 140 种标准颜色名。

CSS 背景色

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

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

CSS 文本颜色

您可以设置文本的颜色:

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>

CSS 边框颜色

您可以设置边框的颜色:

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>

CSS 颜色值

在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色:

与颜色名 "Tomato" 等效:

与颜色名 "Tomato" 等效，但是透明度为 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>