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>
列印頁面
上一頁
下一頁
廣告