CSS Color 4 為網路提供更廣泛的色域色彩工具和功能，例如更多色彩、操作函式，以及更出色的漸層。
超過 25 年時，sRGB (標準紅色綠色藍色) 是 CSS 漸層和顏色的唯一顏色色域，且其中的色域項目包括 rgb()、hsl() 和十六進位。這是螢幕中最常見的色彩色域功能，是常見的分母。我們非常熟悉如何指定此星域的顏色。
隨著螢幕能夠顯示不同顏色的色彩，CSS 需要設法從這些較寬的範圍內指定顏色。目前的色彩格式沒有廣色範圍的語言。
如果 CSS 從未更新，就會永遠卡在 90 年代的顏色範圍，強製完全不符合圖片和影片中的廣域產品。包覆，僅顯示人眼可見的 30% 顏色。感謝 CSS Color Level 4 協助排除這個陷阱，主要是由 Lea Verou 和 Chris Liley 撰寫。
自 Chrome 111 起，瀏覽器可支援 CSS Color 4 色域和色域，自 2016 年起開始支援 display-p3 的 Safari。CSS 現在支援 HD (高畫質) 螢幕，指定 HD 高畫質的色彩，同時也提供具備專業認證的色域。本指南將說明如何開始運用這個全新的色彩世界。
親自體驗
支援的瀏覽器多了 50% 的顏色選項！您覺得 1600 萬種顏色看起來很多，等著看到這些新空間可顯示的幾種色彩為止。此外，也請考慮所有捨棄的漸層，因為位元深度不足，也能解決這個問題。
除了更多顏色以外，螢幕所能生成的色彩最鮮明，全新的色彩空間提供了獨特的工具和方法，可用於管理及建立色彩系統。例如，我們之前所說的 HSL 和「lightness」頻道 都是最頂尖的網頁程式開發人員現在，CSS 已經採用 LCH 的「感知亮度」。
此外，漸層和混合可以得到一些升級：支援色彩空間、色調內插選項以及較少的色帶。下圖顯示部分組合升級作業。前兩種色彩組合為 sRGB。最下方的兩個顏色組合為螢幕 p3。螢幕 p3 色彩更鮮明，而混色則讓中間全為黑白。sRGB 看起來有點低飽和度，而中間的混合部分並非完整的黑或白色結果。
https://codepen.io/web-dot-dev/pen/poZgXQb
本指南將說明顏色的歷來位置和用途，以及 CSS 如何協助網頁開發人員管理顏色，同時提供支援。
總覽
顏色和網路的問題在於 CSS 尚無法使用高畫質，但如果螢幕中大多數人都配有口袋、圈數或掛在牆上的寬廣域，也有高畫質的色彩。螢幕色彩功能比 CSS 更快，現在 CSS 更可以迎面而來。
還有「更多顏色」等豐富功能。完成本文結尾後，您就能指定更多顏色、強化漸層，並為每項工作選擇最佳的色域和色域。
什麼是色域？
間隔代表某個物件的大小。「數百萬種顏色」這個詞組是指對於螢幕的色域或必須選擇的色彩範圍所做的評論。在下圖中比較三個色域，而尺寸越大，顏色越大。
色域也可以有名稱。例如籃球和棒球、熱咖啡杯和大杯等，有了尺寸的名稱，就能讓人們更容易溝通。瞭解這些色域名稱有助於傳達及快速瞭解各種顏色。
本文將向您介紹七個新的色域，範圍比 sRGB 寬廣，並說明它們的不同功能，以協助您選擇要使用的項目：
人體視覺空間
色域往往是與人體視覺特徵比較；我們相信人眼所能看到的全部色彩就是如此。HVS 通常以色度圖描繪，如下圖所示：
最外的形狀是人類所看到的，而內三角形則是 rgb() 函式範圍，又稱 sRGB 色域。
如上圖所示，比較千變大小，下方會顯示三角形。這是業界用來傳達及比較色域的方式。
什麼是色域？
色域是用色域排列、建立形狀和存取顏色的方法。其中許多都是以立方體或圓柱體這類簡單的 3D 形狀，這個色彩排列方式會決定哪些顏色彼此相鄰，以及存取和插入顏色的運作方式。
RGB 與矩形的色域相似，只要指定 3 軸的座標，即可存取顏色。HSL 是一種圓柱色空間，2 軸是以色調角度和座標存取顏色，
等級 4 規格引入 12 個新的色彩空間，用於從先前共用的 7 個新色域中查詢色彩：
除了先前可用的 4 種色域，還有以下 4 種顏色空間：
色域和色域摘要
色域是顏色的對應，其中色域是特定顏色的範圍。請將色域視為所有粒子總數，並將色彩空間視為用來容納該範圍粒子的瓶子。
以下是 Alexey Ardov 提供的互動式視覺元素，其中展示色彩空間。在這項示範中指向、拖曳及縮放畫面。變更色域，以視覺化方式呈現其他空間。
- 使用「色域」討論不同顏色，例如低範圍或窄域，以及高範圍或廣域。
- 使用「色域」來討論顏色排列方式、用來指定顏色的語法、操控顏色和內附顏色。
如何取得更多顏色、新增空格及偵錯結果
CSS Color 4 概述了幾項 CSS 和顏色的新功能和工具。首先，回顧這些新功能之前的色彩發展。然後概要列出新的顏色空間、語法和工具。
以下 Codepen 會同時顯示所有新舊色彩語法：
經典色域評論
自 2000 年代起，您可以針對接受顏色做為值的任何 CSS 屬性使用以下功能：十六進位 (十六進位)、rgb()、rgba()、名稱 (例如 hotpink) 或關鍵字 (例如 currentColor)。視瀏覽器而定，CSS 供應商大約可以使用 hsl() 顏色，具體情況取決於瀏覽器在 2010 年左右。然後，在 2017 年出現了帶有 Alpha 的十六進位。最後，只有 hwb() 開始支援瀏覽器。
十六進位
十六進位色域可指定 R、G、B 和 A 以十六進位數字指定。下列程式碼範例展示了這個語法指定紅色、綠色和藍色加上不透明度的所有方式。
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
RGB 色域具有直接存取紅、綠色和藍色色的頻道。允許指定介於 0 到 255 之間的數字，或是以 0 到 100 的百分比表示。 此語法在規格中之前存在語法正規化之前，因此您會在外部看到逗號和無逗號的語法。不再需要使用逗號。
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
HSL (色調和亮度) 是第一個利用人類語言和通訊方向方向的色域之一，提供 sRGB 色域的所有顏色，並不需要您的大腦瞭解紅色、綠色和藍色的交互作用。和 RGB 一樣，該語法原本在語法中都有半形逗號，但往後也不再需要使用半形逗號。
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
人類描述顏色的方式，還有另一個 sRGB 寬頻色彩空間採用 HWB (色調、白色、黑暗)。作者可以選擇黑白或黑色的色調，找到想要的顏色。
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
新版網頁版色域隆重登場
下列色域可讓你存取大於 sRGB 的較大色域。Display-p3 色域提供的顏色幾乎是 RGB 的兩倍，而 Rec2020 提供的顏色則幾乎是 display-p3 的兩倍。色彩豐富！
color() 函式
新的 color() 函式可用於指定以 R、G 和 B 色版的顏色空間。color() 會先使用色彩空間參數，然後是 RGB 和選用的一系列 Alpha 通道值。
您會發現許多新的顏色空間都使用這個函式，因為 rgb、srgb、hsl、hwb 等特殊函式不斷增加，更易於使用色域做為參數。
優點
- 用於存取使用 RGB 色版的色域的正規化空間。
- 可以向上擴充至任何以廣域 RGB 為基礎的色域。
缺點
- 不支援 HSL、HWB、LCH、okLCH 或 okLAB
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
透過 color() 取得的 sRGB
這個色域提供與 rgb() 相同的功能。此外，還提供 0 到 1 之間的小數，使用方式與 0% 到 100% 一樣。
優點
- 幾乎所有螢幕都支援此色域的範圍。
- 設計工具支援。
缺點
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
透過 color() 的線性 sRGB
這種線性變體是 RGB 的線性替代方式，可提供可預測的通道強度。
優點
- 直接存取 RGB 頻道，方便遊戲引擎或燈光秀等用途。
缺點
- 不看似線性。
- 兩側都有黑色和白色。
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
我們稍後會詳細討論漸層，但若能看出 srgb 和 linear-srgb 黑色到白色漸層，以便表示兩者的差異，也十分重要：
湖泊
本文的第一個空間可導入語法，用於存取 RGB 色域以外的顏色！也是第一個讓使用者輕鬆建立螢幕的色域顏色。這是因為任何 CIE 空間顏色 (例如 Lch、oklch、lab、oklab) 能夠代表整個人類可見的色譜。
這個色域是以人類視覺為模型，並提供語法來指定任何這些顏色等。LCH 頻道包括亮度、色號和色調色調是某個角度，就像在 HSL 和 HWB 中一樣。亮度是介於 0 到 100 之間的值，但與 HSL 的亮度不同，它是以人為中心的特殊的「直線式」亮度。Chroma 與飽和度類似，可介於 0 到 230 之間，但在技術上也沒有限制。
優點
- 由於一般來說為線性，因此可預測色彩操控方式 (請參閱「Oklch」一節)。
- 使用慣用的管道。
- 通常具有鮮明的漸層效果。
缺點
- 就是這麼簡單！
- 在極少數情況下，漸層可能需要調整中間點，才能防止色相位移。
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
研究室
為存取 CIE 色域而設計的另一個色域，同樣是使用顯性線性亮度 (L) 維度。LAB 中的 A 和 B 代表人類色彩視覺的獨特軸：紅綠和藍黃。給予 A 正面值時，A 會加上紅色，如果小於 0，則加上綠色。指定正數時，B 會加上黃色，負數值會朝藍色顯示。
優點
- 透明的漸層效果。
- 高動態範圍。
缺點
- 可能是色調轉移。
- 閱讀值時難以寫出作者或猜測顏色。
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
確定
這個色域會更正為 LCH。就像 LCH 一樣，(L) 仍代表明顯的線性亮度、C 代表色度，以及 H 代表色調。
如果您曾與 HSL 或 LCH 合作 這塊領域就熟悉這個空間在色輪上挑選 H 色輪的角度，調整 L 來選擇亮度或亮度，之後再使用色素，而非飽和度。兩者完全相同，但調整亮度和色域時通常會成對，或者可以輕鬆要求位於目標色域以外的高色域色彩。
優點
- 套用藍色和紫色色調時不會有驚喜。
- 明顯線性亮度。
- 使用慣用的管道。
- 高動態範圍。
- 使用由 Evil Martians 創作的新型顏色挑選器。
缺點
- 就是這麼簡單！
- 新穎且較不曾探索的新奇事物。
- 很少有顏色挑選器。
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
奧克拉荷馬
這個空間會修正為 LAB。它宣稱是一個已針對影像處理品質最佳化的空間，對 CSS 而言，就是漸層和色彩函式操控品質。
優點
- 動畫和內插的預設空間。
- 明顯線性亮度。
- 沒有像 LAB 一樣的色調變化。
- 透明的漸層效果。
缺點
- 新穎且較不曾探索的新奇事物。
- 很少有顏色挑選器。
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
螢幕 P3
自 2015 年起，螢幕 P3 的色域和色彩空間在 iMac 上便開始受到 Apple 支援。Apple 也從 2016 年起開始支援在網頁中透過 CSS 導入 display-p3，比其他瀏覽器的五年之久。如果來自 sRGB，當你將樣式移至較高的動態範圍時，這就很適合使用的色彩空間。
優點
- HDR 螢幕的基準線十分豐富，可提供絕佳支援。
- 比 sRGB 顏色多出 50%。
- 開發人員工具提供絕佳的顏色挑選器。
缺點
- 最終會超越 Rec2020 和 CIE 空間。
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 是 UHD TV (超高畫質電視) 的一部分，提供廣泛的色彩可供 4K 和 8K 媒體使用。Rec2020 是另一種 RGB 基礎的色域，大於 display-p3，但幾乎不像 Display P3 是一般消費者的常見情況。
優點
- UHD 超高畫質色彩。
缺點
- 但消費者之間也有落差。
- 通常不適用於手持裝置或平板電腦。
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB
Adobe 1998 RGB (Adobe 1998 RGB) 的 A98 RGB 是由 Adobe 製作，可提供 CMYK 印表機的大多數色彩功能。這比 sRGB 顏色更多，特別是在青色和綠色色調中。
優點
- 大於 sRGB 和 Display P3 色域。
缺點
- 數位設計師所打造的不常見空間。
- 很少人人從 CMYK 移植調色盤。
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
專業相片 RGB
這個寬廣域空間由 Kodak 設計，提供超廣範圍的主要色彩，並在改變亮度時提供最少的色調偏移。同時聲明涵蓋 1980 年 Michael Pointer 記錄的 100% 的實際表面顏色。
優點
- 變更亮度時，最小的色調移動。
- 鮮豔原色。
缺點
- 提供大約 13% 的顏色是虛構，表示這些顏色不在人類可見的光譜範圍內。
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ、XYZ-d50、XYZ-d65
CIE XYZ 色彩空間涵蓋了一般人眼看得的所有顏色。這就是為什麼會做為其他色彩空間的標準參照。Y 是亮度，X 和 Z 可能是指定 Y 亮度內的色度。
d50 和 d65 之間的差異為白點，其中 d50 使用 d50 白點，d65 則使用 d65 白點。
優點
- 線性燈存取提供便利的用途。
- 這適用於實體顏色混合。
缺點
- 略微是一貫的線性手法，如葉子、韓國、實驗室和 Oklab 等。
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
自訂色域
CSS Color 5 規格也提供教導瀏覽器自訂色彩空間的路徑。這是一個 ICC 設定檔，可指示瀏覽器如何解析顏色。
@color-profile --foo {
src: url(path/to/custom.icc);
}
載入後，請使用 color() 函式從這個自訂設定檔存取顏色，並指定其管道值。
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
色彩內插
轉換的顏色時，動畫、漸層及顏色混合的情況包括動畫、漸層和色彩。這個轉場效果通常指定為起始顏色和結束顏色，瀏覽器應會在兩者之間插入。在這種情況下，指的是產生一系列介於色彩之間的值，目的是建立流暢的轉場效果，而非立即轉換。
若是漸層，內插類型是沿著形狀的一連串顏色。而動畫會隨著時間呈現一系列色彩。
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
使用漸層效果時，顏色間會同時顯示：
色彩內插功能新功能
除了新的色域和色域，我們還提供新的內插選項。將顏色 in hsl 從藍色轉換成白色時，會得到與 sRGB 截然不同的結果。
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
看不到 Codepen 示範嗎？
那麼，如果從一個空間的顏色轉換為完全不同空間的顏色，會發生什麼事：
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
看不到 Codepen 示範嗎？
幸好，顏色 4 的規格會指示瀏覽器如何處理這些跨色空間內插。在上述 .gradient 範例中，瀏覽器會注意到不同的色域，並使用預設色彩空間 oklab。您可以認為瀏覽器會使用 lch 做為色域，因為這是第一個顏色，但這並非如此，所以我顯示第二個比較漸層 .lch 的原因。.lch 漸層是來自 Lch 色域的漸層。
透過 16 位元色彩減少條紋
在這個色彩實際運作之前，所有顏色都會儲存在一個 32 位元整數中來代表全部四個聲道：紅色、綠色、藍色和 Alpha。此為每個通道 8 位元，且 2^ 24 種可能顏色 (忽略 Alpha 版)。2 ^ 24 = 16,777,216, "數百萬種顏色。"
在這個顏色有效後，四個 16 位元浮點值，每個管道都有自己的浮點值，而不是一起聚合。這相當於 64 位元的資料總量，產生超過數百萬個色彩。
請務必完成這項作業，才能支援 HD 高畫質色彩。這會增加可儲存的色彩資訊量，產生良好的副作用，意味著瀏覽器可在漸層中使用更多顏色。
漸層色帶是指沒有足夠顏色產生平滑漸層，導致色彩的「條紋」顯示。升級到較高解析度色彩可大幅降低頻帶。
控制內插
兩點之間的最短距離一律是直線。使用色彩內插功能時，瀏覽器預設會採用短路線。假設 HSL 色彩圓柱中有兩個點。漸層會在兩點之間沿著線條行駛，取得其色彩步驟。
linear-gradient(to right, #94e99c, #e06242)
由上往下檢視畫面，表示 HSL 圓柱體，顏色停止點之間有線條
上方的漸層線條在綠色與紅色之間垂直，並穿過色域的中心。雖然上述說明有助於瞭解我們的初步瞭解，但並非真的發生了。以下是以下 Codepen 中的漸層，但中間明顯不是白色，如模擬示範所示。
不過，漸層的中間區域失去了振動。這是因為最鮮豔的顏色是在色域形狀的邊緣，而不是內插在附近移動的中心。這通常稱為「死區」。以下幾種方法可以修正或解決這個問題。
指定更多漸層停止點，以避免阻斷區域
目前避免使用死區的技巧，就是在漸層中加入其他色彩停止點，刻意引導內插法保持在色域的鮮豔範圍內。事實上，這些停靠站有助於在死區附近解決這項問題。
有 Erik Kennedy 製作的漸層工具可計算額外的色彩停止點，這樣即使色彩空間偏向切去的色彩空間，也有助於避免死結。使用此方法從第一個範例傳遞相同的色彩，但將色彩內插變更為 HSL，會產生以下結果：
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
HSL 圓柱頂部的俯視圖，其中一條曲線的曲線有 9 個顏色停靠點
使用引導式停靠點時，內插點不再是直線，而是在死區周圍流動，有助於維持飽和度，從而產生更多鮮豔的漸層。
這項工具非常實用，但如果您能直接透過 CSS 進行類似或進一步控管，該怎麼做？
設定色彩內插類型
在 Color 4 中，我們新增了控制「色調內插」策略的功能，是 (:wink:) 死區的新方法。請考慮一個色調角度，並考慮使用 2 停止漸層，也就是只改變角度的漸層，例如從 140deg 變更為 240deg。
深度與較長的色調內插
除非您指定採用 longer 路徑，否則漸層預設為採用 shorter 路徑。色調內插選項會引導角度旋轉，例如指示某人向左轉，而不是向右轉 (嘿，Zoolander)：
在上述的色調內插距離視覺範例中，系統將模擬短路徑和長路徑，以便說明兩者間的差異。短距離在走過最少的距離下行走的距離，意味著長距離將穿過更多色調，因此兩者之間的色調較少。
增加和減少色調內插
顏色 4 還有另外兩個色調內插策略，但這些策略專門用於圓柱色空間。這次我們保留了上一個範例中的兩個顏色，現在視覺畫面會顯示增加和減少的運作方式。
上述 Codepen 使用 ColorJS 來呈現預期結果。在不使用 JavaScript 程式庫的情況下，您所編寫的 CSS 可以達到同樣的效果：
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
為了關閉色調內插功能，這個有趣的遊樂場可以切換 2 個顏色停靠點之間的色調，並查看色調內插選項的影響，以及色域如何改變漸層結果。效果可能會截然不同；不妨把這個小技巧想成您的顏色工具。
不同色域的漸層
每個色域若具有獨特的形狀和色彩排列方式，都會產生不同的漸層。請參考下列範例，特別是以「藍色到白色」說明。 請看看每個顏色空間分別如何處理不同顏色。請注意中間有多少紫色，在內插期間稱為「色調偏移」。
看不到 Codepen 示範嗎？
圖片僅是 Codepen 範例中的 1 個範例。不妨利用 Canary 或 Safari 技術預覽自行查看這些內容。
這些空間的部分梯度會比其他漸層更生動，或穿越無效區域。lab 等聊天室會以達到飽和度最佳化的方式將顏色打包在一起，而不是用於針對使用者編寫顏色而最佳化的空間，例如 hwb()。
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
雖然上方的示範在結果中很細微，但顯示的內插方式會與研究室更加一致。然而，研究室的語法並不容易讀取，但從 rgb 或 hsl 開始時，負數仍相當陌生。好消息是，我們可以使用 hwb 來處理熟悉的語法，但要求漸層應完全在另一個色彩空間內 (例如 oklab) 內插。
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
看不到 Codepen 示範嗎？
這個範例在 hwb 中使用了相同的顏色，但會指定 hwb 或 oklab 的內插色空間。hwb 是絕佳的色彩空間，適用於高震動，但可能出現死結的區域或亮點 (請參閱頂端範例中的青色熱點)。oklab 適用於保持飽和的感知線性漸層。這項功能非常有趣，您可以嘗試各種不同的色彩空間，看看哪種漸層效果最好。
以下將透過 Codepen 來測試漸層和色域、混合及比對策略，以探索可能的可能性。而且每個色彩空間中 從黑色到白色的轉場也都不同！
看不到 Codepen 示範嗎？
環狀取值範圍限制
在某些情況下，顏色可能會要求色調以外的內容。請考慮使用以下顏色：
rgb(300 255 255)
rgb 色域中的色彩管道上限是 255，但這裡的 300 指定為紅色。會發生什麼情況？環狀取值範圍限制。
限制是指將額外資訊直接移除的情況。300 會成為顏色引擎內部的 255。現在顏色已經限制在其空間內。
選擇色域
許多人在瞭解這些色彩空間及其效果後，往往會感到不知從何地選擇「一種」，從我的研究和經驗來看，我沒有看到所有工作都採用單一色域，每種都會產生期望的結果。
要是某個最佳空間，就不會有這麼多新的空格。
不過，我可以說 CIE 空間 (lab、oklab、lch 和 oklch) 是我的起點。如果這些結果不是我要的，我就要測試其他空間。如果是混合顏色及建立漸層，我同意 oklab 的預設規格選項。如果是色彩系統和整體 UI 顏色，我喜歡 oklch。
在以下幾篇文章中，我們曾分享這些新的色彩空間和功能，讓大家分享最新的色彩策略。例如，Andrey Sitnik 都全面採用 oklch，或許會說服您執行相同動作：
遷移至 HD CSS 顏色
如要更新網路專案顏色以支援寬幅螢幕，您有兩種主要的策略：
安全降級
使用新的色彩空間，並讓瀏覽器和作業系統根據螢幕功能判斷要顯示哪個顏色。漸進式強化
使用@supports和@media評估使用者瀏覽器的功能，如果符合條件，則提供廣色域色彩。
如果瀏覽器不瞭解 display-p3 顏色：
color: red;
color: color(display-p3 1 0 0);
如果瀏覽器能理解 display-p3 顏色：
color: red;
color: color(display-p3 1 0 0);
這兩種工具各有優缺點。以下簡要列出各種優缺點：
優雅降級
- 優點
- 最簡單的路線。
- 如果畫面不是寬幅的顯示畫面，瀏覽器會將對應或取值範圍限制為 sRGB，因此瀏覽器應由瀏覽器負責。
- 缺點
- 瀏覽器可能會以您不喜歡的色彩取代或互換地圖。
- 瀏覽器可能無法理解顏色要求，因此完全失敗。不過，只要指定顏色兩次，即可緩解這種情況，讓層疊回歸到其原本能夠理解的上一個顏色。
漸進式強化
- 優點
- 使用代管色彩擬真度，進一步控管各項設定。
- 不會影響目前顏色的添加策略。
- 缺點
- 您必須管理兩個不同的色彩語法。
- 您必須管理兩個不同的色域。
檢查色域和色彩空間是否支援
瀏覽器允許檢查 CSS 和 JavaScript 的廣域功能支援，以及色彩語法支援。未提供使用者的確切顏色差異，我們會提供一般化的答案，藉此維護使用者隱私。不過，由於不支援確切的色彩空間，而非使用者硬體 (例如 Gamut) 的功能。
色域支援查詢
下列程式碼範例會檢查造訪使用者螢幕的顏色範圍。
正在從 CSS 進行檢查
支援查詢最不具體的是 dynamic-range 媒體查詢：
@media (dynamic-range: high) {
/* safe to use HD colors */
}
如要取得概略或以上的支援，可以使用 color-gamut 媒體查詢：
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
另外還有兩個媒體查詢需要檢查支援：
從 JavaScript 檢查
如果是 JavaScript，系統會呼叫 window.matchMedia() 函式並傳遞媒體查詢，以利評估。
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
您可針對其餘媒體查詢複製上述模式。
色域支援查詢
下列程式碼範例會檢查造訪使用者的瀏覽器，以及其可搭配使用的色彩空間。
正在從 CSS 進行檢查
您可以使用 @supports 查詢，詢問個別色域支援：
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
從 JavaScript 檢查
以 JavaScript 來說，您可以呼叫 CSS.supports() 函式並傳遞屬性和值組合，看看瀏覽器是否能理解。
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
整合硬體和剖析檢查
在等待每個瀏覽器實作這些新色彩功能時，建議您檢查硬體功能和色彩剖析功能。這通常是我逐步將色彩強化到高解析度時，使用時機：
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
使用 Chrome 開發人員工具對色彩進行偵錯
Chrome 開發人員工具已更新，並提供各種新工具，可協助開發人員製作、轉換及偵錯 HD 高畫質色彩。
已更新顏色挑選器
顏色挑選器現在支援所有新的顏色空間。讓作者能夠像往常一樣與頻道值互動。
環狀界線
也新增了四面邊界線，在 srgb 和 display-p3 色域之間繪製線條。清楚指出所選色彩位於哪個色域。
這可讓作者清楚辨別 HD 高畫質和非 HD 高畫質色彩。使用 color() 函式和新的色彩空間時特別實用，因為這兩者能夠產生非 HD 高畫質和 HD 高畫質的色彩。如要查看顏色目前套用的色域，請彈出顏色挑選器，看看！
轉換色彩
多年來，開發人員工具能協助在支援的格式 (例如 hsl、hwb、RGB 和十六進位) 之間轉換顏色。在「Styles」窗格中的正方形色樣按下 shift + click，即可執行這項轉換。新的色彩工具不只循環轉換，還會顯示彈出式視窗，讓作者查看及挑選想要的轉換。
轉換時，請務必瞭解轉換是否貼合空間。開發人員工具現在會針對轉換後的顏色顯示警告圖示，提醒您觀看此裁剪。
如要進一步瞭解開發人員工具中的 CSS 偵錯功能，請參閱開發人員工具的近期公告。
結論
網路上的非 sRGB 色域仍處於早期開發階段，但我相信設計人員和開發人員的使用量會隨著時間增加。舉例來說，瞭解哪些色彩空間用於建構設計系統，對於創作者工具列而言是一項強大的工具。每個色域都提供獨特的功能，以及其新增至 CSS 規格的原因，您可以從這些顏色開始，並視需要新增。
盡情享受這些全新彩色玩具的樂趣！更鮮豔、一致的操縱方式和內插設計，整體上可為使用者提供更繽紛的體驗。
延伸閱讀
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/