CSS 中的 color 属性用于设置 HTML 元素的颜色。通常，该属性用于设置元素的背景色或字体颜色。

在 CSS 中，我们使用颜色值来指定颜色。我们还可以将此属性用于边框颜色和其他装饰效果。

系统定义的颜色名、十六进制和rgb可以通过在线工具查看更加直观。

我们可以通过以下方式定义元素的颜色：

  • RGB 格式。
  • RGBA 格式。
  • 十六进制表示法。
  • 短十六进制表示法。
  • HSL。
  • HSLA。
  • 内置颜色。

RGB 颜色格式

RGB 颜色语法

color: rgb(R, G, B);

    此属性允许三个值，可以是百分比或整数（范围从 0 到 255），其中：

    •  R：红色值。正整数 （0~255）
    •  G：绿色值。正整数 （0~255）
    •  B：蓝色值。正整数（0~255）

    RGBA 颜色格式

    它和rgb颜色类似，只不过多了一个 A (Alpha)。alpha的取值范围是0.0到1.0，其中0.0表示完全透明，1.0表示不透明。 
    RGBA 语法如下： 
    color:rgba(R, G, B, A);

      十六进制格式

      十六进制可以定义为六位颜色表示。此符号以 # 符号 开头，后跟从 0 到 F 的六个字符。十六进制表示，前两位代表red (RR)颜色值，中间两位代表green (GG)颜色值，后两位代表蓝色 (BB) 颜色值。

      十六进制的黑色符号是#000000，十六进制的白色符号是#FFFFFF。一些十六进制表示法的代码是#FF0000、#00FF00、#0000FF、#FFFF00 等等。
      语法

      color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

        短十六进制格式

        它是十六进制表示法的一种简短形式，其中重新创建每个数字以达到等效的十六进制值。

        例如，#7B6 变成十六进制的#77BB66。

        短十六进制的黑色符号是#000，短十六进制的白色符号是#FFF。一些短十六进制代码是#F00、#0F0、#0FF、#FF0 等等。

        HSL格式

        它是色相、饱和度和亮度的缩写形式。让我们分别了解它们。

        • 色相：可以定义为色轮上的度数，从0到360。0代表红色，120代表绿色，240代表蓝色。
        • 饱和度： 取百分比值，100% 表示完全饱和，即没有灰度，50% 表示 50% 灰色，但颜色仍然可见，0% 表示完全不饱和，即完全灰色，颜色不可见。
        • 亮度：颜色的明度可以定义为我们要提供颜色的光，其中0%代表黑色（没有光），50%代表既不暗也不亮, 100% 代表白色（全亮度）。

        让我们看看颜色属性中 HSL 的语法。
        语法

        color:hsl(H, S, L);

          HSLA格式

          它与 HSL 属性完全相似，只是它包含指定元素透明度的 A (alpha)。 alpha的取值范围是0.0到1.0，其中0.0表示完全透明，1.0表示不透明。
          语法

          color:hsla(H, S, L, A);

            内置颜色格式

            语法

            color: 颜色名;

              常用的一些颜色名和十六进制的对应表如下：

              序号颜色名称十六进制值rgb() 值
              1.红色#FF0000rgb(255,0,0)
              2.橙色#FFA500rgb(255,165,0)
              3.黄色#FFFF00rgb(255,255,0)
              4.粉红色#FFC0CBrgb(255,192,203)
              5.绿色#008000rgb(0,128,0)
              6.紫罗兰色#EE82EErgb(238,130,238)
              7.蓝色#0000FFrgb(0,0,255)
              8.水色#00FFFFrgb(0,255,255)
              9.棕色#A52A2Argb(165,42,42)
              10.白色#FFFFFFrgb(255,255,255)
              11.灰色#808080rgb(128,128,128)
              12.黑色#000000rgb(0,0,0)

              例子

              举例说明上面几种格式的用法

              <html> 
<head> 
<title>CSS 颜色color属性例子</title> 
<style> 
    h3{ 
        text-align:center; 
    } 
    #rgb{
      color:rgb(255,0,0);
    }
    #rgba{
      color:rgba(255,0,0,0.5);
    }
    #hex{
      color:#EE82EE;
    }
    #short{
      color: #E8E;
    }
    #hsl{
      color:hsl(0,50%,50%);
    }
    #hsla{              
      color:hsla(0,50%,50%,0.5);
    }
    #built{
      color:green;
    }
</style> 
</head> 
<body> 
<h3 id="rgb"> 
rgb颜色格式
</h3> 
<h3 id="rgba"> 
rgba颜色格式
</h3> 
<h3 id="hex"> 
十六进制颜色格式
</h3> 
<h3 id="short"> 
短十六进制颜色格式
</h3> 
<h3 id="hsl"> 
HSL颜色格式.
</h3> 
<h3 id="hsla"> 
HSLA 颜色格式.
</h3> 
<h3 id="built"> 
颜色名格式
</h3> 
</body> 
</html>
              • 1
              • 2
              • 3
              • 4
              • 5
              • 6
              • 7
              • 8
              • 9
              • 10
              • 11
              • 12
              • 13
              • 14
              • 15
              • 16
              • 17
              • 18
              • 19
              • 20
              • 21
              • 22
              • 23
              • 24
              • 25
              • 26
              • 27
              • 28
              • 29
              • 30
              • 31
              • 32
              • 33
              • 34
              • 35
              • 36
              • 37
              • 38
              • 39
              • 40
              • 41
              • 42
              • 43
              • 44
              • 45
              • 46
              • 47
              • 48
              • 49
              • 50
              • 51
              • 52
              • 53

              输出：

              css 颜色 color