本文件是高畫質 CSS 顏色指南的一部分。
CSS Color 4 概述了幾項 CSS 和顏色的新功能和工具。以下 Codepen 會同時顯示所有新和舊的顏色語法：
請參閱「經典色域重點回顧」。
等級 4 規格引入了 12 種用於查詢顏色的新色域，是從先前分享的 7 個新色域增加：
新版網頁版色域隆重登場
下列色域可讓你存取大於 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 {#Linear-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 黑色到白色漸層，以便表示兩者的差異，也十分重要：
湖泊
LCH 導入語法，可存取 RGB 色域以外的顏色。也是第一個為螢幕輕鬆建立不透明色彩的功能。這是因為任何 CIE 空間顏色 (lch、oklch、lab、oklab) 都可以代表整個人類可見的色譜。
這個色域是以人類視覺為模型，並提供語法來指定任何這些顏色等。LCH 頻道包括亮度、色號和色調色調是某個角度，就像在 HSL 和 HWB 中一樣。亮度是介於 0 到 100 之間的值。這是一個以人為中心的特殊「感知線性」特性。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 {#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 白點。
索引鍵字詞：「白點」是色域的屬性，在此空間內為真白色。D65 是電子螢幕最常見的白點，短於 6500 克耳文。色彩轉換中的白點十分重要，因此色溫 (暖度或冷氣) 不會受到影響。
優點
- 線性燈存取提供便利的用途。
- 這適用於實體顏色混合。
缺點
- 略微是一貫的線性手法，如葉子、韓國、實驗室和 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);
}
那麼，如果從一個空間的顏色轉換為完全不同空間的顏色，會發生什麼事：
.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%));
}
幸好，顏色 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 個顏色停靠點之間的色調，並查看色調內插選項的影響，以及色域如何改變漸層結果。效果可能會截然不同；不妨把這個小技巧想成您的顏色工具。
不同色域的漸層
每個色域都有獨特的形狀和色彩排列方式，都會產生不同的漸層。以下範例將說明每個色域處理不同顏色的方式 (尤其是藍色到白色)。請注意中間有多少值變成紫色，也就是所謂的內插期間色調偏移。
這些空間的部分梯度比其他梯度更生動，或穿越無效區域。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%));
}
這個範例在 hwb 中使用了相同的顏色，但會指定 hwb 或 oklab 的內插色空間。hwb 是絕佳的色彩空間，適用於高震動，但可能出現死結的區域或亮點 (請參閱頂端範例中的青色熱點)。oklab 適用於保持飽和的感知線性漸層。這項功能非常有趣，您可以嘗試各種不同的色彩空間，看看哪種漸層效果最好。
以下將透過 Codepen 來測試漸層和色域、混合及比對策略，以探索可能的可能性。而且每個色彩空間中 從黑色到白色的轉場也都不同！
環狀取值範圍限制
在某些情況下，顏色可能會要求色調以外的內容。請考慮使用以下顏色：
rgb(300 255 255)
rgb 色域中的色彩管道上限是 255，但這裡的 300 指定為紅色。會發生什麼情況？環狀取值範圍限制。
限制是指將額外資訊直接移除的情況。300 會成為顏色引擎內部的 255。現在顏色已經限制在其空間內。
選擇色域
許多人在瞭解這些色彩空間及其效果後，往往會感到不知從何地選擇「一種」，從我的研究和經驗來看，我沒有看到所有工作都採用單一色域，每種都會產生期望的結果。
要是某個最佳空間，就不會有這麼多新的空格。
不過，我可以說 CIE 空間 (lab、oklab、lch 和 oklch) 是我的起點。如果這些結果不是我要的，我就要測試其他空間。如果是混合顏色及建立漸層，我同意 oklab 的預設規格選項。如果是色彩系統和整體 UI 顏色，我喜歡 oklch。
在以下幾篇文章中，我們曾分享這些新的色彩空間和功能，讓大家分享最新的色彩策略。例如，Andrey Sitnik 都全面採用 oklch，或許會說服您執行相同動作：
後續步驟
現在，您已瞭解新的色彩空間和工具，可以遷移至 HD 高畫質。
更鮮豔、一致的操弄和內插方式，整體上可為使用者提供更繽紛的體驗。
歡迎從指南中查看更多顏色資源。