HWB
The hwb() CSS function picks colors using hue, whiteness, and blackness channels.
Overview
The hwb() CSS function picks colors using hue, whiteness, and blackness channels.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 101 | 101 | 96 | 15 | 101 | 15 | |
| CSS type | ||||||
hwb.mixed type parameters Mix `<percentage>` and `<number>` in parameters | 121 | 121 | 122 | 18 | 121 | 18 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Basic syntax: hwb(hue white black / opacity) */
.red {
color: hwb(0 0% 0%); /* Pure red */
}
.pastel-red {
color: hwb(0 40% 0%); /* Red mixed with white */
}
.dark-red {
color: hwb(0 0% 40%); /* Red mixed with black */
}
.semi-transparent {
color: hwb(200 20% 10% / 0.5);
}Live demo
Use cases
Using HWB
The hwb() CSS function picks colors using hue, whiteness, and blackness channels.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features