CSS Function
hwb()
The hwb() function defines colors using Hue, Whiteness, and Blackness, offering an intuitive way to tint and shade colors.
Syntax
hwb(H W B / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| H | number | angle | Yes | Hue angle in degrees (0-360) |
| W | percentage | Yes | Whiteness, 0% (no white) to 100% (pure white) |
| B | percentage | Yes | Blackness, 0% (no black) to 100% (pure black) |
| alpha | number | percentage | No | Opacity, from 0 to 1 |
Examples
Pure red
No white or black added to red hue.
css
color: hwb(0 0% 0%);Tinted red
Red tinted with 30% white, producing a pink.
css
background: hwb(0 30% 0%);Shaded blue
Blue darkened with 40% black.
css
color: hwb(240 0% 40%);Browser Support
✓
Chrome
v101++
✓
Firefox
v96++
✓
Safari
v15++
✓
Edge
v101++
✓
Opera
v87++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[hwb(0_30%_0%)]Frequently Asked Questions
When is hwb useful?▼
HWB is ideal when you want to create tints (add white) or shades (add black) of a base hue. It maps closely to how artists mix paint.
What happens when W + B exceeds 100%?▼
The values are normalized proportionally, and the result is a shade of gray. The hue has no effect when W + B >= 100%.
Explore CSS Color Tools
Try our free tools to work with hwb() and other CSS color functions.
Open Tools