探索 CSS 顏色的新功能！你真的掌握了嗎？

作者：CUGGZ 2023-06-15 10:21:48

CSS Colors Module Level 4：旨在擴(kuò)展 CSS 中顏色相關(guān)的特性和功能。它提供了一些新的顏色表示方式、自定義調(diào)色板、透明度的控制等功能，并且對(duì) CSS 中現(xiàn)有的顏色模塊作出了一些修改和增強(qiáng)。CSS Colors Module Level 4 目前還處于候選推薦階段，尚未正式發(fā)布為 W3C 推薦標(biāo)準(zhǔn)。

現(xiàn)在越來(lái)越多的瀏覽器開(kāi)始支持 CSS Colors Module Level 4[1] 規(guī)范中定義的功能，其中包括在 CSS 中操作和顯示顏色的多種方式。本文就來(lái)看看什么是顏色空間、如何在CSS中定義顏色，CSS Colors Module Level 4 中的新內(nèi)容，以及如何在項(xiàng)目中使用顏色函數(shù)和特性。

CSS Colors Module Level 4：旨在擴(kuò)展 CSS 中顏色相關(guān)的特性和功能。它提供了一些新的顏色表示方式、自定義調(diào)色板、透明度的控制等功能，并且對(duì) CSS 中現(xiàn)有的顏色模塊作出了一些修改和增強(qiáng)。CSS Colors Module Level 4 目前還處于候選推薦階段，尚未正式發(fā)布為 W3C 推薦標(biāo)準(zhǔn)。

顏色空間

顏色空間是基于定義的顏色模型對(duì)顏色進(jìn)行分組的系統(tǒng)。顏色空間提供了一種清晰和一致的方式來(lái)描述顏色，并且可以在保持外觀不變的情況下將顏色轉(zhuǎn)換到不同的顏色空間中。

在 CSS Colors Module Level 4 之前，CSS 中的顏色是在 RGB（紅、綠、藍(lán)）顏色空間和色域（顏色總范圍）中定義的。

通過(guò) CSS 對(duì) HSL（色調(diào)、顏色和亮度）的支持，我們可以使用相同的 RGB 模型來(lái)定義顏色。

在 CSS 中定義 RGB 顏色

要在 RGB 顏色空間中生成顏色，可以以不同方式混合原色紅色、綠色和藍(lán)色以獲得所需的結(jié)果。可以把它想象成立方體中一個(gè)點(diǎn)的坐標(biāo)，其中每個(gè)軸代表一種原色。

.red {
  color: rgb(255 0 0);
}
.green {
  color: rgb(0 255 0);
}
.blue {
  color: rgb(0 0 255);
}
/* 黃色是紅色和綠色的混合 */
.yellow {
  color: rgb(255 255 0);
}
/* 青色是綠色和藍(lán)色的混合 */
.cyan {
  color: rgb(0 255 255);
}

要想在 CSS 中定義 RGB 顏色，可以選擇使用顏色關(guān)鍵字（如 red 或 blue）、十六進(jìn)制值 (#ff0000) 或 rgb() 函數(shù)來(lái)定義紅色、綠色和藍(lán)色值，如上所示。

從 CSS Colors Module Level 4 開(kāi)始，我們不再需要使用 rgba() 來(lái)定義具有 alpha 通道的 RGB 顏色，因?yàn)?nbsp;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);
}

這里說(shuō)明了如何使用關(guān)鍵字、十六進(jìn)制值和 rgb() 函數(shù)定義相同的顏色，包括定義不透明。

使用 HSL 選擇色調(diào)

CSS 顏色（第 3 級(jí)）中的 HSL 受到許多開(kāi)發(fā)人員的歡迎，因?yàn)楦鶕?jù)色輪選擇色調(diào)會(huì)更加直觀。我們可以使用 conic-gradient() 函數(shù)和 hsl() 函數(shù)制作色輪。

#color-wheel {
  border-radius: 50%;
  background: conic-gradient(
    in hsl longer hue,
    hsl(0deg 100% 50%),
    hsl(360deg 100% 50%)
  );
}
/* 對(duì)于不支持 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>

結(jié)合這兩個(gè)片段就可以制作一個(gè)色輪，循環(huán)顯示 RGB 顏色空間中所有可用的色調(diào)：

hsl() 函數(shù)的工作方式與 rgb() 函數(shù)類似，但接受色相作為色輪上的角度，接受飽和度和亮度作為值。與 rgb() 一樣，可以向 hsl() 添加透明度（或不透明度）的 alpha 通道，這使得 hsla() 與 rgba() 一起成為遺留函數(shù)：

.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 函數(shù)還可以通過(guò)更改飽和度和亮度來(lái)改變顏色。例如，如果為網(wǎng)站主題選擇了特定顏色，可以修改顏色的飽和度和亮度以創(chuàng)建仍然適合主題的輔助顏色。如下圖所示：

.button {
  color: hsl(200 100% 70%);
}
/* 按鈕顏色的深色版本 */
.button--secondary {
  color: hsl(200 100% 50%);
}
/* 較低的飽和度使按鈕不那么生動(dòng) */
.button--inactive {
  color: hsl(200 50% 70%);
}

CSS Colors Module Level 4 中的新內(nèi)容

此規(guī)范版本添加了許多使用不同方式表示顏色的新顏色函數(shù)，它們?cè)试S使用色調(diào)、亮度和飽和度等屬性指定顏色。新的顏色函數(shù)使我們能夠使用 RGB 色域之外的更鮮艷的顏色，因此在受支持的顯示器上可以使用更大范圍的顏色。

支持更多色彩空間和色域

通過(guò)對(duì)額外空間和色域的支持，不再局限于在 RGB 顏色空間中描述顏色；現(xiàn)在可以使用 Display P3、CIELAB、Oklab 色彩空間。

Display P3 使用 P3 色域并代表比 sRGB（標(biāo)準(zhǔn) RGB）更寬的顏色范圍。它對(duì)于現(xiàn)代顯示器中使用的更鮮艷的顏色很有用。但是，需要為使用不支持它的設(shè)備的用戶提供回退。

CIELAB 是一種統(tǒng)一色彩空間 (UCS)，它根據(jù)人眼感知顏色的方式來(lái)定義顏色。該模型的主要目的是讓顏色空間中兩點(diǎn)之間相同的顏色距離對(duì)于觀察者來(lái)說(shuō)應(yīng)該呈現(xiàn)出相同的差異。

Oklab 是一個(gè)較新的顏色空間，它使用與 CIELAB 相同的模型結(jié)構(gòu)，但通過(guò)“視覺(jué)上相似顏色的數(shù)據(jù)集的數(shù)值優(yōu)化”制成，因此值旨在比 CIELAB 更準(zhǔn)確。

CIELAB 和 Oklab 顏色空間可以表示為三維空間，如下所示：

全新顏色函數(shù)

新的顏色函數(shù)有助于描述上面提到的顏色空間中的值。

lab() 函數(shù)使用顏色空間中沿“a”和“b”軸的亮度、紅色/綠色和黃色/藍(lán)色來(lái)描述 CIELAB 顏色。

.lab-red {
  color: lab(87.6 125 104);
}
.lab-green {
  color: lab(87.8 -79 81);
}

lch() 函數(shù)符號(hào)使用亮度、色度和色調(diào)描述 CIELAB 顏色。色調(diào)是色輪上代表顏色的角度。

.lch-red {
  color: lch(54.3 107 40.9deg);
}
.lch-green {
  color: lch(87.8 113 134deg);
}

oklab() 函數(shù)使用 Oklab 顏色空間中沿“a”和“b”軸的亮度、紅色/綠色和黃色/藍(lán)色來(lái)描述 Oklab 顏色。

.oklab-red {
  color: oklab(0.63 0.22 0.13);
}
.oklab-green {
  color: oklab(0.87 -0.2 0.18);
}

除了新的顏色空間外，HWB 顏色還有一個(gè) hwb() 函數(shù)，使用色調(diào)、白度和黑度定義。 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%);
}
/* 循環(huán)色輪 */
.hwb-green {
  color: hwb(120deg 0% 0%);
}
.hwb-blue {
  color: hwb(240deg 0% 0%);
}

color() 函數(shù)可以在預(yù)定義的顏色空間中指定顏色：

.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() 函數(shù)與媒體查詢結(jié)合起來(lái)以指定后備顏色空間：

.green-display-p3 {
  color: color(display-p3 0 1 0);
}
@media (color-gamut: srgb) {
  .green-display-p3 {
    color: color(srgb 0 1 0);
  }
}

顏色函數(shù)的語(yǔ)法更改

rgb() 和 hsl() 函數(shù)的語(yǔ)法已更改，目的是使它們更易于使用。不再需要分隔值的逗號(hào)，以使用斜杠指定顏色的 alpha 值：

/* 舊語(yǔ)法 */
rgb(255, 0, 0);
hsl(0, 100%, 50%);

/* 新語(yǔ)法 */
rgb(255 0 0);
hsl(0 100% 50%);

/* 帶有 alpha 通道的新語(yǔ)法 */
rgb(255 0 0 / 0.5);
hsl(0 100% 50% / 0.5);

所有新函數(shù)都使用上述類型的語(yǔ)法，在值之間沒(méi)有分隔逗號(hào)，并使用斜杠將 alpha 通道與顏色值分隔開(kāi)。

色調(diào)插值

插值是當(dāng)計(jì)算兩個(gè)已知值之間的一個(gè)或多個(gè)值時(shí)，因此如果有從紅色到藍(lán)色的漸變，插值就是計(jì)算哪些顏色在紅色和藍(lán)色之間的范圍內(nèi)的方式。創(chuàng)建 linear-gradient() 或類似的 CSS 漸變時(shí)，可以使用 in（用于插值）后跟漸變的顏色空間：

.hsl {
  background: linear-gradient(in hsl, blue, red);
}

比較不同顏色空間中的漸變

可以通過(guò)一個(gè)例子來(lái)比較不同顏色空間中的漸變，在標(biāo)準(zhǔn) RGB 顏色空間中有一個(gè)從藍(lán)色到紅色的漸變，然后在不同的顏色空間中有相同的漸變：

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

在漸變中使用色調(diào)插值模式

有一些插值模式控制色輪周?chē)姆较颍{(diào)應(yīng)該在具有色調(diào)角度的顏色空間中插值：

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

/* 這個(gè)漸變?cè)谏喼車(chē)ㄟ^(guò) 0 循環(huán)回來(lái) */
.hsl-longer {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}

/* 使用命名顏色可以實(shí)現(xiàn)相同的效果 */
.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}

/* 對(duì)于不支持插值模式的瀏覽器 */
.fallback {
  background: linear-gradient(to right, blue, red);
}

瀏覽器支持

CSS Colors Module Level 4 中描述的大部分語(yǔ)法都在最新版本的 Chrome 和 Safari 中得到支持，而顏色函數(shù)的支持也將在 Firefox 113 中發(fā)布。在上述示例中指定線性漸變中的顏色空間和插值模式在 Chrome 和 Safari 中受支持，但是在 Firefox 中還沒(méi)有支持。

未來(lái)

CSS Color Module Level 5 包含了一個(gè) color-mix() 函數(shù)，它可以使用指定的權(quán)重混合兩種顏色，此函數(shù)已在多個(gè)瀏覽器中得到支持。在 color() 函數(shù)中，將能夠使用使用 color(--my-color-space 0 0 0) 定義的自定義顏色空間，該顏色空間使用 @color-profile 規(guī)則從外部文件加載。

.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%);
}