CSS Color 4 為網路帶來廣泛色彩工具和功能: 色彩、操作函式以及更好的漸層效果。
超過 25 年:sRGB
(標準紅色標準藍色) 為單一顏色
適用於 CSS 漸層和顏色的 gamut,含色域
例如 rgb()
、hsl()
和 16 進位數字這是最常見的顏色
螢幕間的變焦功能;常見分母我們擁有
習慣指定其中的色彩。
![最熱門的顏色格式,依出現次數百分比區分。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/the-popular-color-format-b5aab67b4d3de.png?authuser=19&hl=zh-tw)
隨著螢幕越來越能夠顯示各式各樣的色彩,CSS 也就需要 從寬幅範圍內指定色彩目前的顏色格式 但缺乏寬廣的色彩範圍語言。
如果 CSS 從未更新,就會永遠卡在 90s 色彩範圍, 絕對不符合圖片和影片的廣泛產品組合 已攔截,僅顯示顯示資料 人眼可見的 30%。 感謝 CSS 色彩層級 4 幫助我們逃脫, 主要作者為 Lea Verou 和 Chris Liley。
Chrome 支援 CSS 顏色 4 色域和 色彩空間。CSS 現在可以支援 HD (高畫質) 螢幕,以從 HD 變焦中指定顏色,同時提供 您將瞭解幾個選項
親自體驗
本指南分為三個部分。請繼續閱讀,記得之前的顏色。接著: 瞭解色彩落在何處, 如何改用 HD 高畫質,管理日後色彩的管理方式。
總覽
在支援的瀏覽器中,另有 50% 的顏色可供挑選。如果您覺得 16 而且色澤非常大 就會顯示這些新的聊天室。同時想想 已捨棄,因為數量不夠 也能解決這個問題
除了更多顏色外,螢幕最鮮明的色彩、 新的色彩空間提供獨特的工具和建立方法,讓您管理及創作 色彩系統例如,在我們導入 HSL 前,管道 就是網路開發人員中最優秀的一員現在 CSS 中有 LCH 的「感知亮度」。
![兩個顏色表格並排顯示。第一個表格顯示 HSL
至少 10 色的彩虹,旁邊則是灰階
這些 HSL 色彩的亮度第二個表格是 LCH 彩虹
顏色較不鮮明,但旁邊的灰階顏色卻一致。
這證明 LCH 如何維持健康的恆溫值,而 HSL 不會。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/two-tables-color-are-sid-d7829619631b7.png?authuser=19&hl=zh-tw)
此外,漸層和混合功能還提供部分升級:支援色彩空間、hue 和內插選項,較不需加入條紋。
下圖顯示部分混合升級作業。
![](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/kleavbJG5AA2namwim8y.png?authuser=19&hl=zh-tw)
https://codepen.io/web-dot-dev/pen/poZgXQb
色彩和網路的問題在於 CSS 尚未提供高畫質 而大多數人人都把口袋、圈圈或安裝在牆上 是否已準備好廣色域、高畫質色彩螢幕的色彩功能 成長速度比 CSS 快,現在 CSS 正好趕上腳步。
除了「更多顏色」這以外,還有許多其他內容。看完這些文件後 您將能指定更多顏色、增強漸層,並挑選最佳的 每項工作的色彩空間和色域。
什麼是色域?
群系代表某個項目的大小。「數百萬種顏色」一詞是 關於螢幕星域,或它必須選擇的色彩範圍的註解 下圖比較了三個大元, 提供更多顏色
色域也可以有名稱。例如籃球、棒球或 「威特咖啡杯」還是「大杯」;設定大小名稱 可讓您快速輕鬆地 進行通訊學習這些色域名稱,可提升溝通效率 瞭解不同顏色的色彩
本文會複習先前的色彩色調。您可以參閱 請參閱「取得更多顏色和新空間」一文中的七種新星域。
人類視覺群
色域通常會與人類視覺群比較;執行整個 和一般人眼能看見的顏色HVS 通常以 色度圖表,如下所示:
![馬蹄形狀上填滿鮮豔的漸層,中間有空的三角形。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-horse-shoe-shape-is-fil-c574400e794bc.png?authuser=19&hl=zh-tw)
最外層的形狀是人類可以看見的,內側三角形則是
rgb()
函式範圍,又稱 sRGB 色域。
正如上方所示的三角形,在比較邊角大小之後,你會看到三角形 。這是業界用來傳達色域和 或是進行比較
什麼是色域?
色域是由全域排列的排列方式,可構成形狀和 調整色彩其中許多是簡易的 3D 形狀,例如立方體或圓柱體。這個顏色 排列方式決定不同顏色的相鄰顏色,以及位置使用方式 以及內插顏色
RGB 就像矩形色域,只要指定 會標示 3 軸的座標HSL 是一種圓柱色域, 系統以色調角度和 2 軸上的座標存取顏色
![半切開的 RGB 立方體和切片到 HSL 圓柱會並排顯示,呈現各空間的顏色如何融入形狀。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-half-cut-open-rgb-cube-53a16bc324d2a.png?authuser=19&hl=zh-tw)
第 4 級規格加入了 12 新色彩空間。除了 4 種顏色之外 先前可用的聊天室:
色域和色域摘要
色彩空間是色彩對應,色彩系代表一種顏色。 可以將色域視為粒子的總數,而色域則視為瓶子 確保每顆粒子都能容納這些粒子
這是由 Alexey Ardov 提供的互動式圖像,示範 色彩空間。在這個示範中,你可以拖曳、拖曳及縮放地圖。變更色域 以視覺化方式呈現其他聊天室
- 使用色域來說明多種顏色,例如低範圍或狹窄顏色 大範圍還是廣域或廣域
- 使用色域討論色彩排列,以及用於指定 色彩、操控顏色和內色。
![裝滿許多彩色點的立方體。](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-cube-filled-many-multi-2ecb2e34ca6.png?authuser=19&hl=zh-tw)
經典色域評論 {#classic-color-spaces}
CSS 顏色 4 列舉出 我們會介紹 CSS 和顏色的功能與工具首先來回顧一下色彩之前 這些新功能
自 2000 年代起,您可以使用下列任何 CSS 資源
可接受顏色做為值:十六進位 (十六進位數字)、rgb()
、rgba()
等
例如 hotpink
,或關鍵字為
currentColor
。
大約 2010 年,CSS 可能會根據您使用的瀏覽器
hsl()
顏色。自 2017 年起
畫面上出現了帶有 alpha 的十六進位。最後一個步驟
最近,hwb()
已開始
。
所有這些經典色彩空間都會參照同一個色調 (sRGB) 中的顏色。
HEX
十六進位色域會指定 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 顏色模組層級 4
W3C 中的 CSS 顏色模組層級 5
以及工具: