CSS 颜色

Posted on by

CSS 有许多不同的方式来表达颜色。主要方式有：

  • 十六进制– 这是在 Photoshop 和 gimp 等图像编辑器中常见的 #000000 样式颜色代码。
  • rgb(a) – 这是颜色的红色、绿色和蓝色值，可选的 ‘a’ 表示 alpha 或透明度。
  • hsl(a) – 这是颜色的色调、饱和度和亮度值，同样，可选的“a”表示透明度。
  • 关键字– 这些是指特定颜色的关键字，即红色、绿色、蓝色、橙色等。

请注意，所有这些只是表示颜色的不同方式，所有颜色都可以用这些格式表示。挑选颜色时，有很多在线工具。您还可以使用您选择的图像编辑器。

十六进制#

十六进制或十六进制可以说是最常见的颜色格式之一，也是大多数人熟悉的颜色代码。在 CSS 中，十六进制还有一个可选的最后 2 位数字，表示不透明度。

十六进制颜色代码的示例如下所示：

p {
    color: #000000; /* A black text color */
}

如前所述，您还可以使用额外的两位数来表示不透明度，因此您也可能会看到如下内容：

p {
    color: #0000004f; /* Black, but slightly transparent */
}

RGB(A)#

RGB 颜色可以表示如下：

p {
    color: rgb(255,255,255); /* White */
}
a {
    color: rgba(0,0,0,0.5); /* Black with 50% transparency */
}

HSL(A)#

HSL 颜色可以表示如下：

p {
    color: hsl(0,100%,50%); /* Red */
}
a {
    color: hsla(0,100%,50%,0.5); /* Red with 50% transparency */
}

关键词#

颜色也可以用关键字表示，例如绿色、红色或橙色。CSS 提供了许多关键字，所有这些关键字都可以在下面查看：

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

推荐阅读：