本頁面由 Cloud Translation API 翻譯而成。

高畫質 CSS 顏色指南

CSS Color 4 為網路帶來廣泛色彩工具和功能：色彩、操作函式以及更好的漸層效果。

Adam Argyle

超過 25 年：sRGB (標準紅色標準藍色) 為單一顏色適用於 CSS 漸層和顏色的 gamut，含色域例如 rgb()、hsl() 和 16 進位數字這是最常見的顏色螢幕間的變焦功能；常見分母我們擁有習慣指定其中的色彩。

最熱門的顏色格式，依出現次數百分比區分。 — https://almanac.httparchive.org/en/2022/css#colors

隨著螢幕越來越能夠顯示各式各樣的色彩，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 不會。 — 自行預覽前往 Codepen

此外，漸層和混合功能還提供部分升級：支援色彩空間、hue 和內插選項，較不需加入條紋。

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

前兩種色彩組合採用 sRGB 及 sRGB 顏色。下方兩種顏色混合則為螢幕 p3。多媒體廣告 p3 提供更多功能鮮明的色彩和混合效果的中間色具有黑白效果，其中 sRGB 看起來較不飽和，以及中間的混合計算結果不會是黑白的結果
https://codepen.io/web-dot-dev/pen/poZgXQb

色彩和網路的問題在於 CSS 尚未提供高畫質而大多數人人都把口袋、圈圈或安裝在牆上是否已準備好廣色域、高畫質色彩螢幕的色彩功能成長速度比 CSS 快，現在 CSS 正好趕上腳步。

除了「更多顏色」這以外，還有許多其他內容。看完這些文件後您將能指定更多顏色、增強漸層，並挑選最佳的每項工作的色彩空間和色域。

什麼是色域？

群系代表某個項目的大小。「數百萬種顏色」一詞是關於螢幕星域，或它必須選擇的色彩範圍的註解下圖比較了三個大元，提供更多顏色

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

色域也可以有名稱。例如籃球、棒球或「威特咖啡杯」還是「大杯」；設定大小名稱可讓您快速輕鬆地進行通訊學習這些色域名稱，可提升溝通效率瞭解不同顏色的色彩

本文會複習先前的色彩色調。您可以參閱請參閱「取得更多顏色和新空間」一文中的七種新星域。

人類視覺群

色域通常會與人類視覺群比較；執行整個和一般人眼能看見的顏色HVS 通常以色度圖表，如下所示：

最外層的形狀是人類可以看見的，內側三角形則是 rgb() 函式範圍，又稱 sRGB 色域。

正如上方所示的三角形，在比較邊角大小之後，你會看到三角形。這是業界用來傳達色域和或是進行比較

什麼是色域？

色域是由全域排列的排列方式，可構成形狀和調整色彩其中許多是簡易的 3D 形狀，例如立方體或圓柱體。這個顏色排列方式決定不同顏色的相鄰顏色，以及位置使用方式以及內插顏色

RGB 就像矩形色域，只要指定會標示 3 軸的座標HSL 是一種圓柱色域，系統以色調角度和 2 軸上的座標存取顏色

半切開的 RGB 立方體和切片到 HSL 圓柱會並排顯示，呈現各空間的顏色如何融入形狀。 — https://en.wikipedia.org/wiki/HSL_and_HSV

第 4 級規格加入了 12 新色彩空間。除了 4 種顏色之外先前可用的聊天室：

十六進位
RGB
HSL
HWB

色域和色域摘要

色彩空間是色彩對應，色彩系代表一種顏色。可以將色域視為粒子的總數，而色域則視為瓶子確保每顆粒子都能容納這些粒子

這是由 Alexey Ardov 提供的互動式圖像，示範色彩空間。在這個示範中，你可以拖曳、拖曳及縮放地圖。變更色域以視覺化方式呈現其他聊天室

使用色域來說明多種顏色，例如低範圍或狹窄顏色大範圍還是廣域或廣域
使用色域討論色彩排列，以及用於指定色彩、操控顏色和內色。

，瞭解如何調查及移除這項存取權。

裝滿許多彩色點的立方體。 — 上方是粒子的 sRGB 密度，符合 RGB 立方色域的色彩空間圖片來源

經典色域評論 {#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 的文章。

您也可以在網路上找到更多相關資訊：

以及工具：