CSS Color 4 為網路提供更廣泛的色域色彩工具和功能,例如更多顏色、操作函式,以及更佳的漸層。
超過 25 年時,sRGB
(標準紅色綠色藍色) 是 CSS 漸層和顏色的唯一顏色色域,且其中的色域項目包括 rgb()
、hsl()
和十六進位。這是螢幕中最常見的色彩色域功能,是常見的分母。我們一直習慣指定其中的顏色。
隨著螢幕能夠顯示不同顏色的色彩,CSS 需要設法從這些較寬的範圍內指定顏色。目前的色彩格式沒有廣色範圍的語言。
如果 CSS 從未更新,就會永遠卡在 90 年代的顏色範圍,強製完全不符合圖片和影片中的廣域產品。繞著,僅顯示人眼可見的 30% 顏色。感謝 CSS Color Level 4 協助逃離,主要是由 Lea Verou 和 Chris Liley 撰寫。
Chrome 支援 CSS Color 4 色域和色域。CSS 現在支援 HD (高畫質) 螢幕,能夠指定 HD 高畫質的色彩,同時也提供具有專業技能的色域。
本指南包含三個部分。請繼續閱讀,以便記住色彩。接著,請參閱「顏色的未來發展」一文,瞭解如何改用 HD 高畫質顏色,以便日後管理顏色。
總覽
支援的瀏覽器額外提供 50% 的顏色選項,如果您認為 1600 萬種顏色看起來很多,請稍待片刻,看看這些新空間可顯示多少顏色。此外,也請考慮所有捨棄的漸層,因為位元深度不足,也能解決這個問題。
除了更多顏色以外,螢幕可呈現最鮮明的顏色,新的色彩空間提供了獨特的工具和方法,可用於管理及建立色彩系統。例如,我們之前所說的 HSL 和「lightness」頻道 都是最頂尖的網頁程式開發人員現在,CSS 已經採用 LCH 的「感知亮度」。
此外,漸層和混合可以得到一些升級:支援色彩空間、色調內插選項以及較少的色帶。
下圖顯示部分組合升級作業。
顏色和網路的問題在於 CSS 尚無法使用高畫質,但如果螢幕中大多數人都配有口袋、圈數或掛在牆上的寬廣域,也有高畫質的色彩。螢幕色彩功能比 CSS 更快,現在 CSS 更可以迎面而來。
除了「更多顏色」外,還有許多其他用途!完成這些文件後,您將能指定更多顏色、強化漸層,並為每項工作選擇最佳的色域和色域。
什麼是色域?
間隔代表某個物件的大小。「數百萬種顏色」這個詞組是指對於螢幕的色域或必須選擇的色彩範圍所做的評論。在下圖中比較三個色域,而尺寸越大,顏色越大。
色域也可以有名稱。例如籃球和棒球、熱咖啡杯和大杯等,有了尺寸的名稱,就能讓人們更容易溝通。瞭解這些色域名稱有助於傳達及快速瞭解各種顏色。
本文將回顧先前的色彩色域。如要瞭解七個新的色域,請參閱「存取更多顏色和新空格」。
人體視覺空間
色域會經常與人視覺色域進行比較;我們認為人類的眼睛所見的整個色彩便是其中之一。HVS 通常以色度圖描繪,如下圖所示:
最外的形狀是人類所看到的,而內三角形則是 rgb()
函式範圍,又稱 sRGB 色域。
如上圖所示,比較千變大小,下方會顯示三角形。這是業界用來傳達及比較色域的方式。
什麼是色域?
色域是用色域排列、建立形狀和存取顏色的方法。其中許多都是以立方體或圓柱體這類簡單的 3D 形狀,這個色彩排列方式會決定哪些顏色彼此相鄰,以及存取和插入顏色的運作方式。
RGB 與矩形的色域相似,只要指定 3 軸的座標,即可存取顏色。HSL 是一種圓柱色空間,2 軸是以色調角度和座標存取顏色,
等級 4 規格採用 12 個用於查詢顏色的新的色彩空間。除了先前可用的 4 種色彩空間之外,還有下列 4 個顏色空間:
色域和色域摘要
色域是顏色的對應,其中色域是特定顏色的範圍。請將色域視為所有粒子總數,並將色彩空間視為用來容納該範圍粒子的瓶子。
以下是 Alexey Ardov 提供的互動式視覺元素,其中展示色彩空間。在這項示範中指向、拖曳及縮放畫面。變更色域,以視覺化方式呈現其他空間。
- 使用「色域」討論不同顏色,例如低範圍或窄域,以及高範圍或廣域。
- 使用「色域」來討論顏色排列方式、用來指定顏色的語法、操控顏色和內附顏色。
經典色域評論 {#classic-color-spaces}
CSS Color 4 概述了幾項 CSS 和顏色的新功能和工具。首先,回顧這些新功能之前的色彩發展。
自 2000 年代起,您可以針對接受顏色做為值的任何 CSS 屬性使用以下功能:十六進位 (十六進位)、rgb()
、rgba()
、名稱 (例如 hotpink
) 或關鍵字 (例如 currentColor
)。
視瀏覽器而定,CSS 供應商大約可以使用 hsl()
顏色,具體情況取決於瀏覽器在 2010 年左右。然後,在 2017 年出現了帶有 Alpha 的十六進位。最後,只有 hwb()
開始支援瀏覽器。
所有這些經典的色彩空間都會參照同一個色域 (sRGB) 中的色彩。
十六進位
十六進位色域可指定 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%);
}
後續步驟
請參閱新的色域、語法和工具,然後瞭解如何遷移至 HD 高畫質。
網路上的非 sRGB 色域還在早期,但設計人員和開發人員的使用量會逐漸增加。舉例來說,瞭解哪些色彩空間用於建構設計系統,對於創作者工具列而言是一項強大的工具。每個色域都提供獨特的功能,以及其成為 CSS 規格的原因,您可以從這些顏色開始,並視需要新增。
資源
歡迎閱讀更多顏色等級 5 的文章。
此外,您還可以在網路上找到更多閱讀:
- W3C 的 CSS Color Module Level 4
W3C 的 CSS Color Module Level 5
工具和工具: