本文件是高畫質 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)
上方的漸層線條在綠色與紅色之間垂直,並穿過色域的中心。雖然上述說明有助於瞭解我們的初步瞭解,但並非真的發生了。以下是以下 Codepen 中的漸層,但中間明顯不是白色,如模擬示範所示。
不過,漸層的中間區域失去了振動。這是因為最鮮豔的顏色是在色域形狀的邊緣,而不是內插在附近移動的中心。這通常稱為「死區」。以下幾種方法可以修正或解決這個問題。
指定更多漸層停止點,以避免阻斷區域
目前避免使用死區的技巧,就是在漸層中加入其他色彩停止點,刻意引導內插法保持在色域的鮮豔範圍內。事實上,這些停靠站有助於在死區附近解決這項問題。
有 Erik Kennedy 製作的漸層工具可計算額外的色彩停止點,這樣即使色彩空間偏向切去的色彩空間,也有助於避免死結。使用此方法從第一個範例傳遞相同的色彩,但將色彩內插變更為 HSL,會產生以下結果:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
使用引導式停靠點時,內插點不再是直線,而是在死區周圍流動,有助於維持飽和度,從而產生更多鮮豔的漸層。
這項工具非常實用,但如果您能直接透過 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 高畫質。
更鮮豔、一致的操弄和內插方式,整體上可為使用者提供更繽紛的體驗。
歡迎從指南中查看更多顏色資源。