CSS 颜色

下面的颜色语法转换器显示了当前选定颜色的值，以 红-绿-蓝 (RGB)、十六进制 (HEX)、色调、饱和度和亮度 (HSL) 以及 色调、白度和黑度 (HWB) CSS 颜色格式表示。这里所有 RGB、HEX、HSL 和 HWB 颜色值虽然写法不同，但代表的是相同的颜色值。

通过 颜色选择器 选择颜色，并通过 滑块 选择不透明度，将更新 RGB、HEX、HSL 和 HWB 值。当您选择新颜色或不透明度值时，背景和滑块的颜色将分别通过 CSS 属性 background-color 和 accent-color 更新。

要查看此颜色语法转换器的代码，请 在 GitHub 上查看源代码.

• color
• opacity

• @color-profile
  • components 描述符
  • rendering-intent 描述符
  • src 描述符

• 颜色函数
  • rgb() 及其 rgba() 别名
  • hsl() 及其 hsla() 别名
  • hwb()
  • lab()
  • lch()
  • oklab()
  • oklch()
  • color()
• color-contrast() 实验性
• color-mix()
• device-cmyk()
• light-dark()

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

• 颜色空间
• currentcolor
• 插值
• RGB
• transparent

• CSSColorProfileRule

使用 CSS 将颜色应用于 HTML 元素

使用 CSS 将颜色应用于各种类型内容的指南，包括所有接受 <color> 作为值的 CSS 属性。

CSS 颜色值

颜色空间和 CSS 中可用的不同 <color> 函数表示法的概述。

明智地使用颜色

颜色理论和资源，包括如何找到合适的颜色来创建可访问的颜色调色板、对比度以及彩色印刷。

使用相对颜色

本文解释了相对 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 属性
• 色轮 术语
• 插值 术语
• The @font-palette-values at-rule override-colors descriptor
• The @color-profile at-rule
• The color-gamut @media feature
• The forced-colors @media feature

• CSS 颜色调整 模块和 print-color-adjust 属性。
• CSS 图像 模块，其中定义了 CSS <gradient> 图像。
• The VideoColorSpace interface
• SVG <feColorMatrix> 元素
• Canvas API：应用样式和颜色