CSS 数据类型

CSS <color> 数据类型指定元素的颜色。它还可以有一个 alpha 通道透明度值，用于确定颜色如何与其背景混合。

可能的值

  • <named-color> − 颜色名称，例如红色、蓝色、黄色等。

  • <hex-color> − 表示 RGB（红、绿和蓝）值的六位十六进制代码，例如#ff0099。

  • RGB - RGB() 函数表示范围从 0 到 255 或百分比的红色、绿色和蓝色值，例如 rgb(0, 47, 255), rgb(50%, 10%, 100%)。

  • HSL - HSL() 函数表示基于色相、饱和度和亮度的颜色。例如 hsl(0, 50%, 100%)。

  • HWB - HWB() 函数表示基于色相、白度和黑度的颜色。例如 hwb(5 20% 0%)。

  • LAB - LAB() 颜色空间表示基于亮度、A 轴和 B 轴的颜色。例如 lab(50% 40 59.5)。

  • LCH - LCH() 颜色空间表示基于亮度、色度和色调的颜色。例如 lch(52.2% 72.2 50)。

  • Oklab - Oklab() 颜色空间表示基于亮度、A 轴和 B 轴的颜色。例如 oklab(59% 0.1 0.1)。

  • Oklch - Oklch() 颜色空间表示基于亮度、色度和色调的颜色。如oklch(60% 0.15 50)。

  • color-mix()函数用于组合两种不同的颜色。

  • light-dark() 指定两种颜色，第一种用于浅色方案，第二种用于深色方案。

语法

color = <named-color> | <hex-color> | RGB | HSL | HWB | LAB | LCH | Oklab | Oklch;

    CSS <color>: currentcolor 关键字

    下面的示例演示了类为"box"的父元素将文本颜色设置为红色，并且边框属性使用 currentcolor 关键字，它继承了红色。

    class为"box1"的子元素继承其父元素 (.box) 的颜色，即红色。添加蓝色边框和黄色背景。

    <html>
<head>
<style>
   .box {
      color: red;
      border: 3px dashed currentcolor;   /* 使用当前颜色（红色）创建 3px 虚线样式的边框 */
   }
   .box1 {
      color: currentcolor;       /* 从其父级 (.box) 继承文本颜色，即红色 */
      border: 5px solid blue;
      background-color: yellow; 
   }
</style>
</head>
<body>
   <div class="box">
      文字颜色为红色。 border 属性使用 currentcolor，它从 color 属性中获取红色值。
       <div class="box1">文本颜色设置为currentcolor，继承红色。 添加蓝色边框和黄色背景。</div>
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    CSS <color>: 缺少颜色组件

    您可以使用 none 关键字来表示 CSS 颜色函数中缺少的组件（旧版逗号除外） -分隔语法）。

    • color: oklab(50% none -0.30);相当于颜色:oklab(50% 0 -0.30);

    • background-color:hsl(none 50% 80%);相当于background-color: hsl(0deg 50% 80%);

    <html>
<head>
<style>
   div {
      color: oklab(50% none -0.30);
      background-color: hsl(none 50% 80%);
      padding: 5px;
   }
</style>
</head>
<body>
   <div>color: oklab(50% none -0.30); and background-color: hsl(none 50% 80%);</div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    CSS <color>: 插值

    颜色插值用于渐变，过渡和动画。

    在对 <color> 值进行插值时，它们会转换为指定的颜色空间，并且其组件会按照缓动函数确定的插值速度进行线性插值，缓动函数默认为 Oklab，但可以覆盖通过 <color-interpolation-method> 以特定的颜色相关函数符号表示。

    CSS <color>: 在同一空间中插值颜色

    在同一颜色空间内插值颜色时，在一个颜色空间中缺少组件颜色被替换为其他颜色的匹配值。以下两个表达式是相等的:

    color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));
color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180)); 
    • 1

    两个表达式在相同的最终颜色（亮度为 60%、色度为 0.2）中给出相同的结果，但色调不同:120° 和 180°。

    这是一个示例 -

    <html>
<head>
<style>
   div {
      color: color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));
   }
   p {
      color: color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180));
   }
</style>
</head>
<body>
   <div>color: color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));</div>
   <p>color: color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180));</p>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    CSS <color>: 从不同空间插值颜色

    插值颜色时，如果其中一种颜色不属于插值颜色系统，则其缺失组件根据同一类别的类似组件进行调整，如下表所示:

    类别类似组件
    红色R，X
    绿色G，Y
    蓝色B、Z
    亮度L
    色彩度C、S
    色调H
    aa
    bb

    例如

    • color (xyz 0.2 0.1 0.6) 中的 X (0.2) 对应于 RGB (50% 70% 30%) 中的 R (50%)。

    • hsl(0deg 100% 80%) 中的 H (0deg) 对应于 oklch(80% 0.1 140) 中的 H (140)。

    使用 Oklch 作为颜色空间进行颜色插值的预处理过程:

    第 1 步:用零替换缺失的分量。

    lch(80% 30 0);
color(display-p3 0.7 0.5 0); 
    • 1

    第 2 步:转换两种颜色进入 Oklch。

    oklch(83.915% 0.0902 0.28);
oklch(63.612% 0.1522 78.748); 
    • 1

    第 3 步:重置与缺失组件类似的组件。

    oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748) 
    • 1

    第 4 步:用其他颜色的值替换缺失组件。

    oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748) 
    • 1

    以下示例演示了如果一种颜色中缺少某个分量，则在插值期间使用另一种颜色中的相应分量 -

    <html>
<head>
<style>
   div {
      color: oklch(83.915% 0.0902 78.748);
   }
   p {
      color: oklch(63.612% 0.1522 78.748);
   }
</style>
</head>
<body>
   <div>color: oklch(83.915% 0.0902 78.748);</div>
   <p>color: oklch(63.612% 0.1522 78.748);</p>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    CSS <color>: 颜色值测试仪

    以下示例显示一个简单的网页，用户可以在文本字段中输入颜色名称。如果输入的颜色名称正确，则背景颜色改变；否则，将显示消息"无效的颜色名称" -

    <html>
<head>
<style>
   div {
      height: 200px;
      width: 200px;
      margin: 10px;
   }
</style>
</head>
<body>
   <label for="color">Enter color name:</label>
   <input type="text" id="color" />
   <div></div>
   <script>
      const inputColor = document.querySelector("input");
      const colorBox = document.querySelector("div");

      function validTextColor(stringToTest) {
      if (stringToTest === "inherit" || stringToTest === "transparent") {
         return false;
      }

      const colorDiv = document.createElement("div");
      colorDiv.style.color = stringToTest;
      return !!colorDiv.style.color;
      }

      inputColor.addEventListener("input", () => {
      if (validTextColor(inputColor.value)) {
         colorBox.style.backgroundColor = inputColor.value;
         colorBox.textContent = "";
      } else {
         colorBox.removeAttribute("style");
         colorBox.textContent = "Invalid color name";
      }
      });
   </script>
</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

    CSS <color>: 完全饱和的 sRGB 颜色

    以下示例演示 sRGB 颜色空间内完全饱和的 sRGB 颜色 -

    <html>
<head>
<style>
   body {
      display: grid;
      grid-template-columns: repeat(auto-fill, 50px);
      gap: 10px;
   }
   div {
      height: 50px;
      width: 50px;
   }
   div:nth-child(1) {
      background-color: hsl(0 100% 50%);
   }
   div:nth-child(2) {
      background-color: hsl(51, 86%, 60%);
   }
   div:nth-child(3) {
      background-color: hsl(60 100% 50%);
   }
   div:nth-child(4) {
      background-color: hsl(90 100% 50%);
   }
   div:nth-child(5) {
      background-color: hsl(150, 71%, 42%);
   }
   div:nth-child(6) {
      background-color: hsl(109, 39%, 28%);
   }
   div:nth-child(7) {
      background-color: hsl(182, 78%, 64%);
   }
   div:nth-child(8) {
      background-color: hsl(270, 51%, 46%);
   }
   div:nth-child(9) {
      background-color: hsl(300 100% 50%);
   }
   div:nth-child(10) {
      background-color: hsl(330, 89%, 48%);
   }
</style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</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
    • 54
    • 55
    • 56
    • 57
    • 58

    CSS <color>: 不同色调的红色

    以下示例使用 sRGB 色彩空间演示红色的不同色调 -

    <html>
<head>
<style>
   body {
      display: grid;
      grid-template-columns: repeat(auto-fill, 50px);
      gap: 10px;
   }
   div {
      box-sizing: border-box;
      height: 50px;
      margin: 10px;
      width: 50px;
   }
   div:nth-child(1) {
      background-color: hsl(0 100% 0%);
   }
   div:nth-child(2) {
      background-color: hsl(0, 85%, 32%);
   }
   div:nth-child(3) {
      background-color: hsl(0, 98%, 47%);
   }
   div:nth-child(4) {
      background-color: hsl(0, 100%, 73%);
   }
   div:nth-child(5) {
      background-color: hsl(0, 83%, 84%);
   }
   div:nth-child(6) {
      background-color: hsl(0 100% 100%);
      border: solid;
   }
</style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</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

    CSS <color>: 不同色调的红色不同的饱和度

    以下示例演示了使用 sRGB 色彩空间的红色的不同饱和度 -

    <html>
<head>
<style>
   body {
      display: grid;
      grid-template-columns: repeat(auto-fill, 50px);
      gap: 10px;
   }
   div {
      box-sizing: border-box;
      height: 50px;
      margin: 10px;
      width: 50px;
   }
   div:nth-child(1) {
      background-color: hsl(0, 1%, 46%);
   }
   div:nth-child(2) {
      background-color: hsl(0, 18%, 50%);
   }
   div:nth-child(3) {
      background-color: hsl(0, 36%, 51%);
   }
   div:nth-child(4) {
      background-color: hsl(0, 72%, 45%);
   }
   div:nth-child(5) {
      background-color: hsl(0, 88%, 51%);
   }
   div:nth-child(6) {
      background-color: hsl(0, 100%, 51%);
   }
</style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</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