CSS 使用颜色值来指定颜色。 通常,它们用于设置元素的前景(即其文本)或元素的背景颜色。 它们还可以用于影响边框的颜色和其他装饰效果。

您可以以各种格式指定颜色值。 下表列出了所有可能的格式 -

格式语法说明示例
关键字<property>: <colorname> CSS 有一组预定义的颜色名称,您可以直接使用。red, blue, green, yellow, black, white等
十六进制代码#RRGGBB以井号 (#) 开头,后跟 6 十六进制数字。#FF0000:红色 
短十六进制代码#RGB较短版本 十六进制格式,其中每个 RGB 分量均由单个数字表示,并且值是重复的。#F00: 红色
RGBrgb(red,green,blue)可以使用 rgb() 函数定义颜色,该函数采用三个参数代表红、绿、蓝值。rgb(0, 0, 255): 蓝色
RGBArgba()与RGB类似,多了一个 alpha(透明度)值的参数。 0(完全透明)和1(完全不透明)rgba(0,0,255,0.5):半透明蓝色
HSLhsl()颜色可以使用 rgb() 函数定义,它代表色调(0 到 360 度)、饱和度 (%) 和亮度 (%)。hsl(120, 100%, 50%):纯绿色
HSLAhsla()与HSL类似,具有 alpha(透明度)值的附加参数。hsl(120, 100%, 50%, 0.5):半透明绿色
currentcolor 关键字currentcolor元素的color属性值。color: red; /* 红色文本颜色 */ border: 10px Solid currentcolor; /* 红色边框颜色 */
系统颜色根据操作系统或浏览器CSS 允许使用由 用户的操作系统或浏览器。ButtonText、Window、WindowText

这些格式将在以下部分中进行更详细的解释 -

CSS Colors: 颜色名

CSS 支持将颜色名称直接传递给属性background-color 和color。 CSS 支持 140 种标准颜色名称。

下表列出了一些示例:

颜色颜色名
 Black
 Red
 Blue
 Green
 Aquamarine

这是一个例子

<html>
<head>
<style>
   #colorkeyword{
      background-color: aqua;
      padding: 10px;
   }
</style>
</head>
<body>
      <h3>颜色关键字:示例</h3>
       <p>由于传递的关键字是aqua,背景将显示为水绿色..</p>
    <div id="colorkeyword">
       该 div 元素具有基于传递的 color 关键字的彩色背景,即 aqua。
    </div>
</body>
</html> 

CSS Colors: 十六进制

十六进制是颜色的 6 位表示形式。 前两位(RR)代表红色值,接下来两位是绿色值(GG),最后一位是蓝色值(BB)。
十六进制值可以从任何图形软件(如 Adobe Photoshop、Jasc Paintshop Pro,甚至使用 Advanced Paint Brush)获取。
每个十六进制代码前面都会有一个井号或井号“#”。 以下是十六进制表示法的示例。
注意:要指定十六进制代码,可以使用大写或小写字母。

颜色十六进制代码
 #000000
 #FF0000
 #00FF00
 #0000FF
 #FFFF00
 #00FFFF
 #FF00FF
 #C0C0C0
 #FFFFFF

看下面的例子:

<html>
<head>
<style>
   #hexcode {
      background-color: #00ff00;
      padding: 10px;
}
</style>
</head>
<body>
     <h3>十六进制代码:示例</h3>
   <p>由于十六进制代码是#00ff00,背景将显示为绿色。</p>
   <div id="hexcode">
       该 div 元素具有绿色背景。
   </div>
</body>
</html> 

CSS Colors: 短十六进制代码

这是六位数字表示法的缩写形式。 在这种格式中,每个数字都会被复制以得到等效的六位数字值。 例如:#6A7 变为#66AA77。
十六进制值可以从任何图形软件(如 Adobe Photoshop、Jasc Paintshop Pro,甚至使用 Advanced Paint Brush)获取。
每个短十六进制代码前面都会有一个井号或井号“#”。 以下是短十六进制表示法的示例。
注意:要指定十六进制代码,可以使用大写或小写字母。

颜色短十六进制
 #000
 #F00
 #0F0
 #0FF
 #FF0
 #0FF
 #F0F
 #FFF

Here is an example:

<html>
<head>
<style>
   #shorthex {
      background-color: #00f;
      padding: 10px;
   }
</style>
</head>
<body>
     <h3>短十六进制代码:示例</h3>
   <p>由于短十六进制代码是#00f,背景将显示为蓝色。</p>
   <div id="shorthex">
      该 div 元素具有蓝色背景。
   </div>
</body>
</html> 

CSS Colors: RGB 颜色

  • 该颜色值是使用 rgb( ) 属性指定的。

  • 它需要三个值,红色、绿色和蓝色各一个。
  • 该值可以是 0 到 255 之间的整数或百分比。

注意:不是所有浏览器都支持颜色的 rgb() 属性,因此建议不要使用它。
以下是使用 RGB 值显示几种颜色的示例。

颜色RGB
 rgb(0,0,0)
 rgb(255,0,0)
 rgb(0,255,0)
 rgb(0,0,255)
 rgb(255,255,0)
 rgb(0,255,255)
 rgb(255,0,255)
 rgb(192,192,192)
 rgb(255,255,255)

看下面的例子:

<html>
<head>
<style>
   #rgbvalue {
      background-color: rgb(255,0,255);
      padding: 10px;
   }
</style>
</head>
<body>
      <h3>RGB:示例</h3>
    <p>设置 rgb(255,0,255) 后,背景将相应出现。</p>
    <div id="rgbvalue">
       该 div 元素具有基于 RGB 值的彩色背景。
    </div>
</body>
</html> 

CSS Colors: RGBA 颜色值

  • 该颜色值是使用 rgba( ) 属性指定的。

  • 它采用四个值,红色、绿色和蓝色各一个,最后一个值作为 alpha(透明度)值。

  • alpha 值可以是 0 到 1 之间的任何值。

注意:不是所有浏览器都支持颜色的 rgba() 属性,因此不推荐使用。
以下是使用 RGBA 值显示几种颜色的示例。

颜色RGBA
 rgba(0,0,0,0)
 rgba(255,0,0,0.2)
 rgba(0,255,0,0.3)
 rgba(0,0,255,0.5)
 rgba(255,255,0,0.7)
 rgba(0,255,255,0.1)
 rgba(255,0,255,1)
 rgba(192,192,192,0.4)
 rgba(255,255,255,1)

看下面的例子

<html>
<head>
<style>
   #rgbavalue {
      background-color: rgba(255,0,255,0.2);
      padding: 10px;
   }
</style>
</head>
<body>
      <h3>RGBA:示例</h3>
    <p>当设置 rgba(255,0,255,0.2) 时,背景将以 0.2 的透明度值显示。</p>
    <div id="rgbavalue">
       该 div 元素具有基于 rgba 值的彩色背景。
    </div>
</body>
</html> 

CSS Colors: HSL 值

  • 该颜色值是使用 hsl() 函数指定的。

  • HSL 代表色调、饱和度和亮度。

  • 色调以度数 (0-360) 表示,饱和度和亮度以百分比表示 (0%: 100%)。

以下是使用 HSL 属性显示几种颜色的示例。

颜色HSL颜色值
 hsl(0,0%,50%)
 hsl(255,80%,70%)
 hsl(290,100%,60%)
 hsl(360,70%,20%)
 hsl(89,80%,67%)

Here is an example:

<html>
<head>
<style>
   #hslvalue {
      background-color: hsl(355,70%,50%);
      padding: 10px;
}
</style>
</head>
<body>
      <h3>HSL:示例</h3>
    <p>设置 hsl(355,70%,50%) 后,背景将根据传递的 hsl 值显示。</p>
    <div id="hslvalue">
       此 div 元素具有基于 hsl 值 hsl(355,70%,50%) 的彩色背景。
    </div>
</body>
</html> 

CSS Colors: HSLA 值

  • 该颜色值是使用 hsl() 函数指定的。

  • HSLA 代表色调、饱和度、亮度和 Alpha。

  • 它有四个值,第一个是色调,第二个是饱和度,第三个是亮度,第四个是 alpha(透明度)值。

  • 色调以度数 (0-360) 表示,饱和度和亮度以百分比表示 (0%: 100%),alpha 值可以在 0 到 1 之间。

以下是使用 HSLA 属性显示几种颜色的示例。

颜色HSLA颜色值
 hsla(0,0%,50%,0.5)
 hsla(255,80%,70%,1)
 hsla(290,100%,60%,0.2)
 hsla(360,70%,20%,0.4)
 hsla(89,80%,67%,0.9)

看下面的例子:

<html>
<head>
<style>
   #hslavalue {
      background-color: hsla(355,70%,50%,0.4);
      padding: 10px;
   }
</style>
</head>
<body>
    <h3>HSLA:示例</h3>
   <p>设置 hsla(355,70%,50%,0.4) 后,背景将根据传递的 hsla 值显示,具有高透明度。</p>
   <div id="hslavalue">
     此 div 元素具有基于 hsl 值 hsla(355,70%,50%,0.4) 的彩色背景。
   </div>
</body>
</html> 

CSS Colors: currentcolor 

currentcolor 关键字表示元素的颜色属性的值。 可以使用关键字 currentcolor 将其传递给任何其他样式属性。
这是一个例子:

<html>
<head>
<style>
   #currcolor {
      color: red;
      border: 5px solid currentcolor;
   }
</style>
</head>
<body>
      <h2>当前颜色关键字</h2>
    <p>由于将 color 属性设置为红色后,边框使用了 currentcolor 关键字,因此边框也会显示为红色。</p>
    <div id="currcolor">
       该 div 元素具有红色文本颜色和红色边框。
    </div>
</body>
</html> 

CSS Colors: 浏览器安全色

以下是 216 种颜色的列表,它们被认为是最安全且与计算机无关的颜色。 这些颜色从十六进制代码 000000 到 FFFFFF 不等。 这些颜色可以安全使用,因为它们确保所有计算机在运行 256 调色板时都能正确显示颜色 -

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

CSS Colors: 关联属性

下表列出了所有与颜色相关的属性:

颜色描述
opacity设置透明度级别
hue表示元素的色调角度。
color设置元素文本的前景和文本装饰。
background-color设置背景颜色。
border-color设置元素边框的颜色。
box-shadow在元素周围添加阴影效果。
outline -color设置元素周围轮廓的颜色。
text- shadow为元素的文本添加阴影。