CSS 颜色

CSS 颜色模块定义了颜色、颜色类型、颜色混合、不透明度，以及如何将这些颜色和效果应用到 HTML 内容中。

虽然此模块仅包含两个 CSS 属性，即 color 和 opacity，但有超过 20 个 CSS 和 SVG 属性、CSS 图像、At 规则以及 @media 规则依赖于这两个属性。

色彩运用

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

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

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

参考

属性

At 规则和描述符

备注： CSS 颜色模块引入了 @color-profile at 规则及其 components、rendering-intent 和 src 描述符。这些特性尚未被任何浏览器实现。

函数

备注： CSS 颜色模块引入了 device-cmyk() 和 contrast-color() 函数，它们尚未被任何浏览器实现。

数据类型

术语和关键字

接口

备注： CSS 颜色模块引入了 CSSColorProfileRule，其尚未被任何浏览器实现。

指南

使用 CSS 为 HTML 元素应用颜色

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

CSS 颜色值

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

明智地使用颜色

色彩理论及资源，包括找到合适的颜色以创建无障碍的调色板、对比度以及彩色打印。

使用相对颜色

本文解释了相对 CSS 颜色语法，展示了不同的选项，并给出了一些说明性的示例。

理解颜色和亮度

色彩感知以及考虑到色弱（色盲）用户、视力减退用户以及患有前庭障碍或其他神经障碍的用户如何使用色彩。

WCAG 1.4.1：颜色对比度

解释背景与前景内容之间的对比度要求，以确保可读性。

相关概念

规范

Specification
CSS Color Module Level 4
CSS Color Module Level 5

参见