CSS 数据类型 - <color>

上一页
下一页

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" 的父元素将文本 颜色 设置为 红色，而 border 属性使用 currentcolor 关键字，该关键字继承红色。

具有类 "box1" 的子元素继承其父元素（.box）的颜色，即红色。添加蓝色边框和黄色背景。

<html>
<head>
<style>
   .box {
      color: red;
      border: 3px dashed currentcolor;   /* Create a border with 3px dashed style using the currentcolor (red). */
   }
   .box1 {
      color: currentcolor;       /* Inherit the text color from its parent (.box), which is red. */
      border: 5px solid blue;
      background-color: yellow; 
   }
</style>
</head>
<body>
   <div class="box">
      The text color is red. The border property uses currentcolor, which takes the value red from the color property.
      <div class="box1">The text color set to currentcolor, which inherits the red color. Add a blue border and a yellow background.</div>
   </div>
</body>
</html>

CSS <color> - 缺少的颜色组件

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

  • color: oklab(50% none -0.30); 等效于 color: 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>

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));

这两个表达式在相同的最终颜色（亮度为 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>

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

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

类别 类似组件
红色 R, X
绿色 G, Y
蓝色 B, Z
亮度 L
色彩 C, S
色相 H
a a
b b

例如

  • 颜色 (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);

步骤 2： 将两种颜色都转换为 Oklch。

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

步骤 3： 重置类似于缺少组件的组件。

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

步骤 4： 将缺少的组件替换为另一种颜色中的值。

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

以下示例演示如果一种颜色中缺少组件，则在插值期间使用另一种颜色中的对应组件：

<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>

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>

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>

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>

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>
打印页面
上一页
下一页
广告