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：应用样式和颜色