截至2026年中，ios 15.7及更早safari、android 4.4–8.0系统webview、ie及edge legacy（≤18）、firefox 115前（需手动开启标志）均不支持hwb()，chrome 111+、safari 16.4+、firefox 117+才稳定支持。
hwb() 在部分浏览器中直接不生效，不是颜色偏差，是整条声明被静默丢弃——比如写了 color: hwb(0 0% 0%)，旧版 Safari 或 Android WebView 里文字就变成继承色（常为黑色），按钮背景可能彻底消失。
哪些浏览器根本不支持 hwb()？
截至 2026 年中：
- iOS 15.7 及更早的 Safari（含 UIWebView）完全忽略 hwb()
- Android 4.4–8.0 的系统 WebView 不解析该函数
- IE 和 Edge Legacy（≤18）无任何支持
- Firefox 直到 115 才开始实验性支持，且需手动开启 layout.css.color-functional-notation.enabled 标志
- Chrome 111+、Safari 16.4+、Firefox 117+ 才算稳定支持
hwb() 的 fallback 必须写在同一选择器内且前置
旧浏览器遇到不认识的颜色函数，不会降级，而是跳过整条声明。所以不能依赖 @supports 或 JS 注入，必须手写降级链：
-
color: #ff0000;—— 十六进制 fallback（IE8+ 全兼容） -
color: rgb(255, 0, 0);—— 为老 Chrome/Firefox 补一层 -
color: hwb(0 0% 0%);—— 新语法放最后
顺序不能颠倒；写成 color: hwb(0 0% 0%); color: #ff0000; 在 Safari 15 里会两个都失效。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
hwb() 参数格式稍有不慎就全挂
它对空格和单位极其敏感：
- 白度（whiteness）和黑度（blackness）必须带
%单位，hwb(0 0 0)是无效语法 - 现代写法推荐空格分隔、无逗号：
hwb(0 0% 0%)，但旧 Safari 15 仍只认逗号分隔：hwb(0, 0%, 0%) - 色相（hue）可以是无单位数字（如
120）或带deg（如120deg），但混用单位（如120deg %）会导致整条规则失效
别指望 hwb() 解决色彩一致性问题
它本身不声明色彩空间，hwb(0 0% 0%) 在 Safari 里仍可能被映射到 Display P3，Chrome 则走 sRGB——和 rgb() 一样面临跨浏览器色偏。真要控色域，得用 color(srgb ...) 配 fallback，hwb() 只是调色便利性工具，不是色彩管理方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
