CSS 颜色 - CSS：层叠样式表 | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
View in English Always switch to English
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 上查看源代码。
备注：CSS 颜色模块引入了 @color-profile at 规则及其 components、rendering-intent 和 src 描述符。这些特性尚未被任何浏览器实现。
备注：CSS 颜色模块引入了 device-cmyk() 和 contrast-color() 函数，它们尚未被任何浏览器实现。
备注：CSS 颜色模块引入了 CSSColorProfileRule，其尚未被任何浏览器实现。
使用 CSS 为各种类型的内容应用颜色的指南，包括所有接受 <color> 值的 CSS 属性。
色彩空间的概述以及 CSS 中可用的不同 <color> 函数表示法。
色彩理论及资源，包括找到合适的颜色以创建无障碍的调色板、对比度以及彩色打印。
本文解释了相对 CSS 颜色语法，展示了不同的选项，并给出了一些说明性的示例。
色彩感知以及考虑到色弱（色盲）用户、视力减退用户以及患有前庭障碍或其他神经障碍的用户如何使用色彩。
解释背景与前景内容之间的对比度要求，以确保可读性。
此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。
本内容的部分版权归 mozilla.org 贡献者所有，©1998–2026。内容依据知识共享许可协议提供。