CSS中的hwb颜色模式是什么_CSS最新颜色表示语法介绍-css教程-PHP中文网

CSS中的hwb颜色模式是什么_CSS最新颜色表示语法介绍

P粉602998670

发布： 2025-11-10 11:48:03

原创

164人浏览过

HWB颜色模式通过色调、白度和黑度直观调整颜色，适合设计系统中的色彩微调。

css中的hwb颜色模式是什么_css最新颜色表示语法介绍

CSS 中的 hwb() 颜色模式是一种直观且符合人类认知的颜色表示方法，它让开发者能更自然地调整和“脑补”出想要的颜色。这种模式特别适合在设计系统中进行颜色微调，比如生成同一色调下的不同深浅或明暗的变体。

HWB 模式的基本原理

HWB 是 Hue（色调）、Whiteness（白度）和 Blackness（黑度）的缩写。它的核心思想是先选一个主色调，再通过混合白色和黑色来调整最终效果。

H (色调) 与 HSL/HSV 相同，用 0 到 360 的角度表示色轮上的颜色，0 和 360 代表红色，120 是绿色，240 是蓝色。 W (白度) 表示混合了多少白色，0% 就是不加白，100% 就是完全变成白色。 B (黑度) 表示混合了多少黑色，0% 就是不加黑，100% 就是完全变成黑色。

例如 hwb(0 20% 30%) 可以理解为：从红色开始，加入 20% 的白色让它变粉嫩一点，再加入 30% 的黑色让它变深沉一点，最终得到一种带有灰调的、饱和度较低的红色。这种思维方式比调整 HSL 中的饱和度和亮度更直接。

如何使用 hwb() 函数

在 CSS 中使用 hwb() 函数非常简单，语法清晰。你可以用它来设置任何需要颜色的属性，比如背景色、文字色或边框色。

立即学习“前端免费学习笔记（深入）”；

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

基础语法：background-color: hwb(色调白度黑度); 带透明度的语法：background-color: hwb(色调白度黑度 / 透明度);

这里的透明度可以用 0 到 1 的小数，或者 0% 到 100% 的百分比表示。例如：

hwb(120 40% 20%)：在绿色基础上加 40% 白和 20% 黑，得到一种柔和的橄榄绿。
hwb(240 50% 10% / 0.7)：在蓝色基础上加 50% 白和 10% 黑，并设置 70% 的不透明度，得到一种半透明的淡蓝灰色。

CSS 最新的颜色表示语法趋势

CSS 颜色标准（Level 4 和 Level 5）正在经历一次革新，引入了更多基于人眼感知的颜色模型和更灵活的语法。

新颜色空间：除了 HWB，还有 LCH 和 Lab 等新函数。LCH 基于人眼对亮度、色彩鲜艳程度和色调的感知，能在保持颜色鲜艳的同时避免过曝，非常适合创建无障碍访问的配色方案。 统一的 alpha 语法：最新的语法允许所有颜色函数都使用 / 符号来分隔透明度值。这意味着你不再需要区分 rgb() 和 rgba()，可以直接写 rgb(255 0 0 / 50%) 来表示半透明的红色。 空格分隔符：新的语法支持用空格代替逗号分隔颜色参数，代码更简洁，例如 hsl(120 100% 50%) 而不是 hsl(120, 100%, 50%)。

基本上就这些。虽然 HWB 和其他新特性在主流现代浏览器中已得到良好支持，但在实际项目中，考虑到兼容性，有时仍需提供传统的 HEX 或 RGB 作为回退方案。

以上就是CSS中的hwb颜色模式是什么_CSS最新颜色表示语法介绍的详细内容，更多请关注php中文网其它相关文章！