高畫質 CSS 顏色指南

CSS Color 4 為網路提供更廣泛的色域色彩工具和功能，例如更多顏色、操作函式，以及更佳的漸層。

Adam Argyle
Adam Argyle
X GitHub

超過 25 年時，sRGB (標準紅色綠色藍色) 是 CSS 漸層和顏色的唯一顏色色域，且其中的色域項目包括 rgb()、hsl() 和十六進位。這是螢幕中最常見的色彩色域功能，是常見的分母。我們一直習慣指定其中的顏色。

最熱門的色彩格式 (依出現次數的百分比)。
https://almanac.httpArchive.org/en/2022/css#colors

隨著螢幕能夠顯示不同顏色的色彩，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 的「感知亮度」。

兩張並列的顏色表格。第一個表格顯示了至少 10 種顏色的 HSL 彩虹，旁邊有代表這些 HSL 色彩亮度的灰階色彩。第二個表格顯示 LCH 彩虹，較不鮮豔，但旁邊的灰階顏色保持一致。說明 LCH 如何具有健康的持續亮度值，但 HSL 未提供。
在 Codepen 上親自體驗

此外，漸層和混合可以得到一些升級：支援色彩空間、色調內插選項以及較少的色帶。

下圖顯示部分組合升級作業。

前兩個顏色組合均採用 sRGB 和 sRGB 顏色。後兩個顏色的組合為螢幕 p3。Display p3 的顏色比較鮮明，中間則形成黑白色，其中 sRGB 看起來有點飽和度，而中間的混合則不是黑白結果。
https://codepen.io/web-dot-dev/pen/poZgXQb

顏色和網路的問題在於 CSS 尚無法使用高畫質，但如果螢幕中大多數人都配有口袋、圈數或掛在牆上的寬廣域，也有高畫質的色彩。螢幕色彩功能比 CSS 更快，現在 CSS 更可以迎面而來。

除了「更多顏色」外，還有許多其他用途！完成這些文件後，您將能指定更多顏色、強化漸層，並為每項工作選擇最佳的色域和色域。

什麼是色域？

間隔代表某個物件的大小。「數百萬種顏色」這個詞組是指對於螢幕的色域或必須選擇的色彩範圍所做的評論。在下圖中比較三個色域，而尺寸越大，顏色越大。

色域會以三角形形狀並列比較。sRGB 是最小的，而 Rec2020 是最大的。

色域也可以有名稱。例如籃球和棒球、熱咖啡杯和大杯等，有了尺寸的名稱，就能讓人們更容易溝通。瞭解這些色域名稱有助於傳達及快速瞭解各種顏色。

本文將回顧先前的色彩色域。如要瞭解七個新的色域，請參閱「存取更多顏色和新空格」。

人體視覺空間

色域會經常與人視覺色域進行比較；我們認為人類的眼睛所見的整個色彩便是其中之一。HVS 通常以色度圖描繪，如下圖所示：

馬蹄形的形狀為鮮豔的漸層，中間有中空的三角形。
資料來源：Wikipedia

最外的形狀是人類所看到的，而內三角形則是 rgb() 函式範圍，又稱 sRGB 色域。

如上圖所示，比較千變大小，下方會顯示三角形。這是業界用來傳達及比較色域的方式。

什麼是色域？

色域是用色域排列、建立形狀和存取顏色的方法。其中許多都是以立方體或圓柱體這類簡單的 3D 形狀，這個色彩排列方式會決定哪些顏色彼此相鄰，以及存取和插入顏色的運作方式。

RGB 與矩形的色域相似，只要指定 3 軸的座標，即可存取顏色。HSL 是一種圓柱色空間，2 軸是以色調角度和座標存取顏色，

半切開的 RGB 立方體和切片是 HSL 圓柱體，會顯示在每個空間中如何將顏色包裝成形狀。
https://en.wikipedia.org/wiki/HSL_and_HSV

等級 4 規格採用 12 個用於查詢顏色的新的色彩空間。除了先前可用的 4 種色彩空間之外，還有下列 4 個顏色空間：

色域和色域摘要

色域是顏色的對應，其中色域是特定顏色的範圍。請將色域視為所有粒子總數，並將色彩空間視為用來容納該範圍粒子的瓶子。

以下是 Alexey Ardov 提供的互動式視覺元素，其中展示色彩空間。在這項示範中指向、拖曳及縮放畫面。變更色域，以視覺化方式呈現其他空間。

  • 使用「色域」討論不同顏色，例如低範圍或窄域，以及高範圍或廣域。
  • 使用「色域」來討論顏色排列方式、用來指定顏色的語法、操控顏色和內附顏色。
一個被許多彩色圓點的立方體。
上述是適用於 RGB 立方體色空間的 sRGB 色域 圖片來源

經典色域評論 {#classic-color-spaces}

CSS Color 4 概述了幾項 CSS 和顏色的新功能和工具。首先，回顧這些新功能之前的色彩發展。

自 2000 年代起，您可以針對接受顏色做為值的任何 CSS 屬性使用以下功能：十六進位 (十六進位)、rgb()、rgba()、名稱 (例如 hotpink) 或關鍵字 (例如 currentColor)。

視瀏覽器而定，CSS 供應商大約可以使用 hsl() 顏色，具體情況取決於瀏覽器在 2010 年左右。然後，在 2017 年出現了帶有 Alpha 的十六進位。最後，只有 hwb() 開始支援瀏覽器。

所有這些經典的色彩空間都會參照同一個色域 (sRGB) 中的色彩。

十六進位

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

來源

十六進位色域可指定 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

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

來源

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

瀏覽器支援

  • 1
  • 12
  • 1
  • 3.1

來源

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

瀏覽器支援

  • 101
  • 101
  • 96
  • 15

來源

人類描述顏色的方式，還有另一個 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 的文章。

此外，您還可以在網路上找到更多閱讀：

工具和工具：