CSS 顏色

實際應用中的顏色

下面的顏色語法轉換器顯示了當前選中顏色在 紅-綠-藍 (RGB)、十六進位制 (HEX)、色相、飽和度、亮度 (HSL) 和 色相、白度、黑度 (HWB) CSS 顏色格式中的值。這裡所有的 RGB、HEX、HSL 和 HWB 顏色值，雖然書寫方式不同，但代表相同的顏色值。

透過顏色選擇器選擇顏色並透過滑塊選擇不透明度會更新 RGB、HEX、HSL 和 HWB 值。當您選擇新的顏色或不透明度值時，背景顏色和滑塊會分別透過 CSS 屬性 background-color 和 accent-color 進行更新。

要檢視此顏色語法轉換器的程式碼，請在 GitHub 上檢視原始碼。

參考

屬性

• color
• dynamic-range-limit
• opacity

At-rule 和描述符

CSS 顏色模組還引入了 @color-profile at-rule，以及它的 components、rendering-intent 和 src 描述符。目前，沒有瀏覽器支援這些特性。

函式

• 顏色函式
  • rgb()
  • hsl()
  • hwb()
  • lab()
  • lch()
  • oklab()
  • oklch()
  • color()
• color-mix()
• contrast-color()
• light-dark()
• dynamic-range-limit-mix()

CSS 顏色模組還引入了 device-cmyk()、contrast-color() 和 hdr-color() 函式。目前，沒有瀏覽器支援這些特性。

資料型別

• <color>
• <color-function>
• <hex-color>
• <named-color>
• <alpha-value>
• <hue>
• <system-color>
• <colorspace-params>

詞彙表術語和關鍵詞

• 顏色空間
• currentColor
• 插值
• RGB
• transparent

介面

CSS 顏色模組還引入了 CSSColorProfileRule 介面。目前，沒有瀏覽器支援此功能。

指南

使用 CSS 將顏色應用於 HTML 元素

使用 CSS 將顏色應用於各種型別內容的指南，包括所有接受 <color> 作為值的 CSS 屬性。

CSS 顏色值

顏色空間概述以及 CSS 中可用的不同 <color> 函式表示法。

明智地使用顏色

色彩理論和資源，包括尋找合適的顏色以建立可訪問的調色盤、對比度以及彩色列印。

使用相對顏色

本文解釋了相對 CSS 顏色語法，展示了不同的選項，並給出了一些說明性示例。

顏色格式轉換器

一個工具，可讓您輸入或選擇顏色並以任何 CSS 顏色格式複製其相應的值。

理解顏色和亮度

考慮顏色感知，並與色盲（顏色不敏感）使用者、視力下降使用者以及患有前庭疾病或其他神經系統疾病的使用者一起使用顏色。

WCAG 1.4.1：顏色對比度

解釋背景和前景內容之間的對比度要求，以確保可讀性。

相關概念

• 屬於其他規範的 CSS 屬性
  • accent-color
  • background-color
  • background-image
  • border-color
  • box-shadow
  • caret-color
  • color
  • color-scheme
  • column-rule-color
  • outline-color
  • scrollbar-color
  • text-decoration-color
  • text-emphasis-color
  • text-shadow
  • -webkit-tap-highlight-color
• 屬於其他規範的 SVG 顏色屬性
  • fill
  • flood-color
  • lighting-color
  • stop-color
  • stroke
• SVG color 屬性
• 色輪詞彙表術語
• 插值詞彙表術語
• @font-palette-values at-rule 的 override-colors 描述符
• @color-profile at-rule
• color-gamut @media 特性
• forced-colors @media 特性

規範

另見

• CSS 顏色調整模組和 print-color-adjust 屬性。
• CSS 影像模組，其中定義了 CSS <gradient> 影像。
• VideoColorSpace 介面
• SVG <feColorMatrix> 元素
• Canvas API：應用樣式和顏色