CSS 颜色

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

CSS 颜色名称

在 CSS 中，可以使用预定义的颜色名称来指定颜色：

   番茄
  
   橙子
  
   道奇蓝
  
   中海绿色
  
   灰色的
  
   石板蓝
  
   紫色
  
   浅灰

亲自试一试 »

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

CSS 背景颜色

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

你好世界

Lorem ipsum dolor sat amet，conectetuer adipiscing elit，sed diam nonummy nibh euismod Tincidunt ut laoreet dolore magna aliquamerat volutpat。 Ut wisi enim ad minim veniam, quis nostrud exercitation 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>

亲自试一试 »

CSS 文本颜色

您可以设置文本的颜色：

你好世界

Lorem ipsum dolor sat amet，conectetuer adipiscing elit，sed diam nonummy nibh euismod Tincidunt ut laoreet dolore magna aliquamerat volutpat。

Ut wisi enim ad minim veniam, quis nostrud exercitation 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 边框颜色

您可以设置边框的颜色：

你好世界

示例

<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"相同：

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

与颜色名称 "Tomato" 相同，但 50% 透明：

  RGBA(255, 99, 71, 0.5)
 
  高强度SLA(9, 100%, 64%, 0.5)

示例

亲自试一试 »

了解有关颜色值的更多信息

您将了解更多有关RGB,十六进制和HSL在接下来的章节中。