本文件是高畫質 CSS 顏色指南的一部分。
CSS 顏色 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% 一樣。
優點
- 幾乎所有螢幕都能支援這個色彩空間的範圍。
- 設計工具支援。
缺點
- 非完全線性 (例如
lch()
是) - 沒有寬廣的變色。
- 梯度通常會穿過「無效區域」。
.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
LCH 推出了語法,以便存取 RGB 色調以外的顏色。這部 第一,讓您輕鬆製作無懈可擊的內容 螢幕的顏色。這是因為任何 CIE 空間顏色 (lch、oklch、lab、oklab) 代表 「整個人類可見的色彩」。
這個色域是按照人類願景建模, 語法,藉此指定任一顏色等等LCH 頻道具備亮度, 色澤和色調色調為某個角度,例如 HSL 和 HWB。亮度是重要關鍵 介於 0 到 100 之間。這就是特別的「感知的線性」以人為本 亮度。色度與飽和度類似;這個值可以介於 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);
}
LAB
另一個能存取 CIE 星域的色彩空間, 線性亮度 (L) 維度。LAB 中的 A 和 B 代表 人色視覺:紅-綠和藍黃當 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);
}
OKLCH
這個色域具有「更正」至 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。 同時被宣稱為提升影像處理品質的最佳化空間, 也就是梯度和色彩函式操控品質
優點
- 動畫和內插的預設空間。
- 全線性亮度。
- 沒有類似 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
自 Apple 支援 Pixel 以來,螢幕 P3 的色域和色域越來越受歡迎 自 2015 年開始支援 iMacApple 自 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 是 UHDTV (超高畫質電視) 運動的一部分。 提供各式各樣的色彩,供 4K 和 8K 媒體使用。Rec2020 是另一個 以 RGB 為基礎的軸,大於 display-p3,但不幾乎在兩者中十分常見 以及多媒體廣告 P3
優點
- Ultra HD 高畫質色彩。
缺點
- 消費者之間較不常見 (目前尚未)。
- 通常在手持裝置或平板電腦上不會找到。
.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 的簡稱 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);
}
ProPhoto RGB
由 Kodak 開發的寬廣空間,獨特的主要提供超廣域的主食 色彩和功能,盡量減少色調變換 變更亮度時宣稱 100% 的內容 現實世界的表面顏色 如同 1980 年 Michael Pointer 所記錄的。
優點
- 變更光線時,最低色調會轉換。
- 鮮明的主色。
缺點
- 提供顏色的比例大約是 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 克耳文顏色很重要 轉換,讓白色點符合如此色溫 (暖色調或冷氣) 不受影響
優點
- 「線性燈」存取便利用途。
- 很適合用來混色。
缺點
- 不像 lch、oklch、lab 和 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 顏色 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 高畫質色彩,這項測試的必要條件。這會增加色彩數量 這種做法的副作用 讓瀏覽器在漸層中也能使用更多色彩
漸層色帶是指色彩不足而無法產生平滑漸層的情況 和「條紋」就會變得清晰可見有了 。
![畫面中顯示六個面板,每個面板都有不同程度的漸層色帶
還有一些關於壓縮和位元深度的資訊](https://developer.chrome.google.cn/static/docs/css-ui/access-colors-spaces/image/six-panels-are-shown-eac-614abc71a28b3.png?authuser=1&hl=zh-tw)
控制內插類型
兩點之間的最短距離一律為直線。有顏色 根據預設,瀏覽器會採用短路徑。請參考以下情境 在 HSL 顏色圓柱體中有兩個點梯度會取得 透過沿著兩個點之間的線條移動,藉此進行色彩步驟。
linear-gradient(to right, #94e99c, #e06242)
![圓形漸層,內含一條由綠色到紅色的直線
穿過圓圈並穿過白色區域](https://developer.chrome.google.cn/static/docs/css-ui/access-colors-spaces/image/a-circular-gradient-a-li-d65ad80dd5676.png?authuser=1&hl=zh-tw)
HSL 圓柱體由上往下拍攝,色彩停止點之間有一條線
上面的漸層線在綠色與紅色之間直線之間直線上 色彩、穿過色彩空間的中心。雖然上述做法很實用 有助於初學者快速理解內容,但實際情況並非如此接著來介紹 在下列程式碼中載入漸層,而且中間不像白色一樣明顯,例如: 模擬畫面
不過,漸層的中間區域失去鮮明的色彩。這是因為 最鮮豔的色彩位於色域的邊緣,而不是 中插值。這通常稱為 「無效區域」。有 有幾個方法可以修正或解決這個問題
指定更多漸層停止點,來避開死區
要避免今天的死區域是現在的一種技巧,就是在 刻意引導內插值維持在 色彩鮮明的色域顧名思義, 多個停靠站有助於繞過死路。
使用 Erik Kennedy 建立的漸層工具,可計算其他顏色 避免在常會流入的色彩空間中避開死路 相對地使用時,傳遞第一個範例中的相同顏色 但將色彩內插類型變更為 HSL 會產生:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
![圓形漸層的中間圍繞著一條線,且有許多
沿著路線的漸層停靠,引導著它遠離中央。](https://developer.chrome.google.cn/static/docs/css-ui/access-colors-spaces/image/a-circular-gradient-a-li-5adfb140eed03.png?authuser=1&hl=zh-tw)
HSL 圓柱體由上往下拍攝,弧形線條延伸至 9 個色彩站
使用引導式停靠點不再是直線 看起來會沿著死區域環繞,有助於維持飽和 更鮮豔的漸層效果
雖然這項工具能發揮出色成效,但如果成效類似或可以 直接透過 CSS 進行控制?
指定顏色內插的方向
第 4 色:控制「色調內插」策略的功能
是新增的 ,這是 (:wink:) 死區域的一個新方式。思考某個色調
試著用 2 個停格漸層,變化角度會變換角度
舉例來說,從 140deg
切換至 240deg
。
中間色調的內插值比較短與長
根據預設,漸層會
shorter
路線,除非
您所指定的值
longer
條路線。色調
內插選項會引導角度旋轉,例如告訴某人轉動
而不是右手(他,祖蘭人):
以色調內插距離為例,短路徑 因此會模擬長路徑短距離讓 虛擬距離較短,因為移動路程距離最短 包括長距離穿越更多色調。
增加與減少色調內插
顏色 4 還另外提供兩種色調內插策略,但僅適用於圓柱體 色彩空間。沿用先前範例中的兩種顏色 現在來看看增加與減少的運作方式
上述 Codepen 使用 ColorJS 來示範 預期的結果。會編寫的 CSS 供應商即使沒有 JavaScript 程式庫會是:
.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 個色彩停止點,您會看到色調內插選項的效果 以及色域如何變化漸層結果可能會大幅影響 different;不妨想像一下,這 4 個新秘訣加入了你的色彩工具列。
不同顏色空間的漸層
每一種色域都有獨特的形狀及顏色的排列方式,因此能帶來 繪製不同漸層的效果在下列範例中,查看每個色彩空間的運作情形 會對此採取不同做法,特別是在藍到白色時。請注意 中間會變成紫色在內插過程中稱為色調位移
在這些空間中,有些漸層會比其他漸層更鮮明,或者較少旅遊
移動到無效區域。
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 高畫質色彩。
更振動、一致的操控和內插類型,整體上的整體表現 提供更繽紛多彩的使用者體驗
查看更多顏色資源