Colors 教程

颜色名称

使用 CSS,可以使用颜色名称设置颜色:

实例

颜色 名称
 Red
 Yellow
 Cyan
 Blue
 Magenta
亲自试一试 »

CSS 颜色值

使用 CSS,可以用不同的方式指定颜色:

  • 按颜色名称
  • 作为 RGB 值
  • 作为十六进制值
  • 作为 HSL 值 (CSS3)
  • 作为 HWB 值 (CSS4)
  • 使用 currentcolor 关键字

RGB 颜色

所有浏览器都支持 RGB 颜色值。

RGB 颜色值通过以下方式指定: rgb( RED , GREEN , BLUE ).

每个参数将颜色的强度定义为 0 到 255 之间的整数。

例如,rgb(0,0,255) 被渲染为蓝色,因为蓝色参数设置为其最高值 (255),而其他参数设置为 0。

实例

颜色 RGB 颜色
  rgb(255,0,0) Red
  rgb(0,255,0) Green
  rgb(0,0,255) Blue
亲自试一试 »

灰色阴影通常使用所有 3 个光源的相同值来定义:

实例

颜色 RGB 颜色
  rgb(0,0,0) Black
  rgb(128,128,128) Gray
  rgb(255,255,255) White
亲自试一试 »


十六进制颜色

所有浏览器也支持十六进制颜色值。

使用以下命令指定十六进制颜色: #RRGGBB.

RR(红色)、GG(绿色)和 BB(蓝色)是 00 到 FF 之间的十六进制整数,用于指定颜色的强度。

例如,#0000FF 显示为蓝色,因为蓝色分量设置为最高值 (FF),其他设置为 00。

实例

颜色 十六进制 RGB 颜色
  #FF0000 rgb(255,0,0) Red
  #00FF00 rgb(0,255,0) Green
  #0000FF rgb(0,0,255) Blue
亲自试一试 »

灰色阴影通常使用所有 3 个光源的相同值来定义:

实例

颜色 十六进制 RGB 颜色
  #000000 rgb(0,0,0) Black
  #808080 rgb(128,128,128) Gray
  #FFFFFF rgb(255,255,255) White
亲自试一试 »

大写还是小写?

您可以使用大写或小写字母来指定十六进制值。

小写更容易写。大写更容易阅读。


颜色名称

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

在下一章中,您将找到具有十六进制值的颜色名称的完整字母列表:

颜色名称 十六进制 颜色
AliceBlue #F0F8FF  
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  

currentcolor 当前颜色关键字

currentcolor 关键字是指元素颜色属性的值。

实例

以下 <div> 元素的边框颜色将为蓝色,因为 <div> 元素的文本颜色为蓝色:

#myDIV {
  color: blue; /* 蓝色文字颜色 */
  border: 10px solid currentcolor; /* 蓝色边框颜色 */
}
亲自试一试 »