探索 CSS 顏色的新功能！你真的掌握了嗎？
現在越來越多的瀏覽器開始支持 CSS Colors Module Level 4[1] 規范中定義的功能，其中包括在 CSS 中操作和顯示顏色的多種方式。本文就來看看什么是顏色空間、如何在CSS中定義顏色，CSS Colors Module Level 4 中的新內容，以及如何在項目中使用顏色函數和特性。
CSS Colors Module Level 4：旨在擴展 CSS 中顏色相關的特性和功能。它提供了一些新的顏色表示方式、自定義調色板、透明度的控制等功能，并且對 CSS 中現有的顏色模塊作出了一些修改和增強。CSS Colors Module Level 4 目前還處于候選推薦階段，尚未正式發布為 W3C 推薦標準。
顏色空間
顏色空間是基于定義的顏色模型對顏色進行分組的系統。顏色空間提供了一種清晰和一致的方式來描述顏色，并且可以在保持外觀不變的情況下將顏色轉換到不同的顏色空間中。
在 CSS Colors Module Level 4 之前，CSS 中的顏色是在 RGB（紅、綠、藍）顏色空間和色域（顏色總范圍）中定義的。
通過 CSS 對 HSL（色調、顏色和亮度）的支持，我們可以使用相同的 RGB 模型來定義顏色。
在 CSS 中定義 RGB 顏色
要在 RGB 顏色空間中生成顏色，可以以不同方式混合原色紅色、綠色和藍色以獲得所需的結果。 可以把它想象成立方體中一個點的坐標，其中每個軸代表一種原色。
.red {
color: rgb(255 0 0);
}
.green {
color: rgb(0 255 0);
}
.blue {
color: rgb(0 0 255);
}
/* 黃色是紅色和綠色的混合 */
.yellow {
color: rgb(255 255 0);
}
/* 青色是綠色和藍色的混合 */
.cyan {
color: rgb(0 255 255);
}要想在 CSS 中定義 RGB 顏色，可以選擇使用顏色關鍵字（如 red 或 blue）、十六進制值 (#ff0000) 或 rgb() 函數來定義紅色、綠色和藍色值，如上所示。
從 CSS Colors Module Level 4 開始，我們不再需要使用 rgba() 來定義具有 alpha 通道的 RGB 顏色，因為 rgb() 支持由斜線 (/) 分隔的 alpha 值，如下所示。
.named-color {
color: red;
}
.hex-color {
color: #ff0000;
}
.rgb-color {
color: rgb(255 0 0);
}
/* makes the color 50% transparent */
.rgba-semi-transparent {
color: rgb(255 0 0 / 0.5);
}這里說明了如何使用關鍵字、十六進制值和 rgb() 函數定義相同的顏色，包括定義不透明。
使用 HSL 選擇色調
CSS 顏色（第 3 級）中的 HSL 受到許多開發人員的歡迎，因為根據色輪選擇色調會更加直觀。我們可以使用 conic-gradient() 函數和 hsl() 函數制作色輪。
#color-wheel {
border-radius: 50%;
background: conic-gradient(
in hsl longer hue,
hsl(0deg 100% 50%),
hsl(360deg 100% 50%)
);
}
/* 對于不支持 conic-gradient 方法的瀏覽器 */
@supports not (background: conic-gradient(in hsl longer hue)) {
#color-wheel {
background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);
}
}
<div id="color-wheel"></div>結合這兩個片段就可以制作一個色輪，循環顯示 RGB 顏色空間中所有可用的色調：
hsl() 函數的工作方式與 rgb() 函數類似，但接受色相作為色輪上的角度，接受飽和度和亮度作為值。 與 rgb() 一樣，可以向 hsl() 添加透明度（或不透明度）的 alpha 通道，這使得 hsla() 與 rgba() 一起成為遺留函數：
.red-hsl {
color: hsl(0 100% 50%);
}
.green-hsl {
color: hsl(120 100% 50%);
}
/* 使顏色 50% 不透明 */
.green-hsl {
color: hsl(120 100% 50% / 0.5);
}HSL 函數還可以通過更改飽和度和亮度來改變顏色。 例如，如果為網站主題選擇了特定顏色，可以修改顏色的飽和度和亮度以創建仍然適合主題的輔助顏色。 如下圖所示：
.button {
color: hsl(200 100% 70%);
}
/* 按鈕顏色的深色版本 */
.button--secondary {
color: hsl(200 100% 50%);
}
/* 較低的飽和度使按鈕不那么生動 */
.button--inactive {
color: hsl(200 50% 70%);
}CSS Colors Module Level 4 中的新內容
此規范版本添加了許多使用不同方式表示顏色的新顏色函數，它們允許使用色調、亮度和飽和度等屬性指定顏色。新的顏色函數使我們能夠使用 RGB 色域之外的更鮮艷的顏色，因此在受支持的顯示器上可以使用更大范圍的顏色。
支持更多色彩空間和色域
通過對額外空間和色域的支持，不再局限于在 RGB 顏色空間中描述顏色； 現在可以使用 Display P3、CIELAB、Oklab 色彩空間。
Display P3 使用 P3 色域并代表比 sRGB（標準 RGB）更寬的顏色范圍。它對于現代顯示器中使用的更鮮艷的顏色很有用。但是，需要為使用不支持它的設備的用戶提供回退。
CIELAB 是一種統一色彩空間 (UCS)，它根據人眼感知顏色的方式來定義顏色。該模型的主要目的是讓顏色空間中兩點之間相同的顏色距離對于觀察者來說應該呈現出相同的差異。
Oklab 是一個較新的顏色空間，它使用與 CIELAB 相同的模型結構，但通過“視覺上相似顏色的數據集的數值優化”制成，因此值旨在比 CIELAB 更準確。
CIELAB 和 Oklab 顏色空間可以表示為三維空間，如下所示：
全新顏色函數
新的顏色函數有助于描述上面提到的顏色空間中的值。
lab() 函數使用顏色空間中沿“a”和“b”軸的亮度、紅色/綠色和黃色/藍色來描述 CIELAB 顏色。
.lab-red {
color: lab(87.6 125 104);
}
.lab-green {
color: lab(87.8 -79 81);
}lch() 函數符號使用亮度、色度和色調描述 CIELAB 顏色。色調是色輪上代表顏色的角度。
.lch-red {
color: lch(54.3 107 40.9deg);
}
.lch-green {
color: lch(87.8 113 134deg);
}oklab() 函數使用 Oklab 顏色空間中沿“a”和“b”軸的亮度、紅色/綠色和黃色/藍色來描述 Oklab 顏色。
.oklab-red {
color: oklab(0.63 0.22 0.13);
}
.oklab-green {
color: oklab(0.87 -0.2 0.18);
}除了新的顏色空間外，HWB 顏色還有一個 hwb() 函數，使用色調、白度和黑度定義。 HWB 使用 RGB 顏色空間，與 HSL 類似，但考慮的是白度和黑度，而不是飽和度和亮度：
.hwb-red {
color: hwb(0deg 0% 0%);
}
.hwb-light-red {
color: hwb(0deg 30% 0%);
}
.hwb-dark-red {
color: hwb(0deg 0% 30%);
}
/* 循環色輪 */
.hwb-green {
color: hwb(120deg 0% 0%);
}
.hwb-blue {
color: hwb(240deg 0% 0%);
}color() 函數可以在預定義的顏色空間中指定顏色：
.green-display-p3 {
color: color(display-p3 0 1 0);
}
.blue-rec2020 {
color: color(rec2020 0 0 1);
}
.blue-srgb {
color: color(srgb 0 0 1);
}還可以將 color() 函數與媒體查詢結合起來以指定后備顏色空間：
.green-display-p3 {
color: color(display-p3 0 1 0);
}
@media (color-gamut: srgb) {
.green-display-p3 {
color: color(srgb 0 1 0);
}
}顏色函數的語法更改
rgb() 和 hsl() 函數的語法已更改，目的是使它們更易于使用。 不再需要分隔值的逗號，以使用斜杠指定顏色的 alpha 值：
/* 舊語法 */
rgb(255, 0, 0);
hsl(0, 100%, 50%);
/* 新語法 */
rgb(255 0 0);
hsl(0 100% 50%);
/* 帶有 alpha 通道的新語法 */
rgb(255 0 0 / 0.5);
hsl(0 100% 50% / 0.5);所有新函數都使用上述類型的語法，在值之間沒有分隔逗號，并使用斜杠將 alpha 通道與顏色值分隔開。
色調插值
插值是當計算兩個已知值之間的一個或多個值時，因此如果有從紅色到藍色的漸變，插值就是計算哪些顏色在紅色和藍色之間的范圍內的方式。 創建 linear-gradient() 或類似的 CSS 漸變時，可以使用 in（用于插值）后跟漸變的顏色空間：
.hsl {
background: linear-gradient(in hsl, blue, red);
}比較不同顏色空間中的漸變
可以通過一個例子來比較不同顏色空間中的漸變，在標準 RGB 顏色空間中有一個從藍色到紅色的漸變，然后在不同的顏色空間中有相同的漸變：
.rgb {
background: linear-gradient(to right, blue, red);
}
.hsl {
background: linear-gradient(in hsl to right, blue, red);
}
.lch {
background: linear-gradient(in lch to right, blue, red);
}
.lab {
background: linear-gradient(in lab to right, blue, red);
}
.oklch {
background: linear-gradient(in oklch to right, blue, red);
}
.oklab {
background: linear-gradient(in oklab to right, blue, red);
}在漸變中使用色調插值模式
有一些插值模式控制色輪周圍的方向，色調應該在具有色調角度的顏色空間中插值：
<div class="hsl in-function">
<p>HSL</p>
</div>
<div class="hsl-named in-function">
<p>HSL named</p>
</div>
<div class="hsl-longer in-function">
<p>HSL (longer)</p>
</div>
<div class="hsl-named-longer in-function">
<p>HSL named (longer)</p>
</div>
<div class="fallback">
<p>Standard fallback</p>
</div>/* 從 39度到 60 度，繞色輪取最短路徑 */
.hsl {
background: linear-gradient(
to right in hsl,
hsl(39deg 100% 50%),
hsl(60deg 100% 50%)
);
}
/* 也可以使用命名顏色 */
.hsl-named {
background: linear-gradient(to right in hsl, orange, yellow);
}
/* 這個漸變在色輪周圍通過 0 循環回來 */
.hsl-longer {
background: linear-gradient(
to right in hsl longer hue,
hsl(39deg 100% 50%),
hsl(60deg 100% 50%)
);
}
/* 使用命名顏色可以實現相同的效果 */
.hsl-named-longer {
background: linear-gradient(to right in hsl longer hue, orange, yellow);
}
/* 對于不支持插值模式的瀏覽器 */
.fallback {
background: linear-gradient(to right, blue, red);
}
瀏覽器支持
CSS Colors Module Level 4 中描述的大部分語法都在最新版本的 Chrome 和 Safari 中得到支持，而顏色函數的支持也將在 Firefox 113 中發布。在上述示例中指定線性漸變中的顏色空間和插值模式在 Chrome 和 Safari 中受支持，但是在 Firefox 中還沒有支持。
未來
CSS Color Module Level 5 包含了一個 color-mix() 函數，它可以使用指定的權重混合兩種顏色，此函數已在多個瀏覽器中得到支持。 在 color() 函數中，將能夠使用使用 color(--my-color-space 0 0 0) 定義的自定義顏色空間，該顏色空間使用 @color-profile 規則從外部文件加載。
.plum-pink-mix {
color: color-mix(in lch, plum, pink);
}
/* 自定義顏色空間 */
@color-profile --example-color-space {
src: url("https://example.org/my-color-profile.icc");
}
.header {
background-color: color(--example-color-space 10% 20% 30%);
}參考資料
[1]CSS Colors Module Level 4: https://www.w3.org/TR/css-color-4/。
[2]https://developer.mozilla.org/en-US/blog/css-color-module-level-4/。
