What is HWB and how does it differ from HSL?

HWB (Hue, Whiteness, Blackness) describes a color by how much white and black paint you would mix into a pure hue. HSL uses Lightness as an axis that goes from black through the pure color to white. HWB is generally considered more intuitive: increasing Whiteness adds white, increasing Blackness adds black. Both models share the same Hue (0–360°) channel.

Is HWB supported in CSS?

Yes. The hwb() color function is part of CSS Color Level 4 and is supported in all modern browsers (Chrome 101+, Firefox 96+, Safari 15+). You can write hwb(210 10% 0%) directly in your stylesheet.

What happens when Whiteness + Blackness exceeds 100%?

When the sum of Whiteness and Blackness is greater than 100%, browsers normalize both values proportionally. For example, hwb(0 60% 60%) becomes a medium gray. This converter caps the values to avoid over-specification.

Does the Hue value change between HSL and HWB?

No. The Hue angle (0–360°) is identical in both HSL and HWB — only the second and third channels differ (Saturation/Lightness vs. Whiteness/Blackness).

Why is this tool useful for accessibility?

HWB makes it easy to reason about tints (add white) and shades (add black) of a color, which maps directly to accessibility adjustments for contrast ratios. Adding Whiteness lightens a color; adding Blackness darkens it — more predictably than tweaking HSL Lightness.

Is the conversion lossless?

Yes. HSL and HWB represent the same sRGB color space. Converting between them is mathematically exact (rounding to integers introduces at most 1-unit differences). The color swatch visually confirms the result is identical.

HSL to HWB Converter

Name: HSL to HWB Converter
Availability: InStock
Author: Nham Vu

Enter HSL values and instantly get the equivalent HWB (Hue, Whiteness, Blackness) color with a live preview and one-click copy.

HSL Input

Hue (0 – 360)

Saturation (0 – 100 %)

Lightness (0 – 100 %)

Color Picker

hsl(210, 80%, 55%)

HWB Output

Hue (°)

Whiteness (%)

Blackness (%)

Reverse: HWB to HSL

Drag the sliders to build a color from HWB — the HSL values update live.

Hue 210°

Whiteness 11%

Blackness 1%

Copied!

Summary

Enter HSL values and instantly get the equivalent HWB (Hue, Whiteness, Blackness) color with a live preview and one-click copy.

How it works

Enter the Hue (0–360), Saturation (0–100), and Lightness (0–100) values in the HSL input fields.
The converter calculates the HWB equivalents using the standard formula: W = (1 - S/100) * min(L/100, 1-L/100) * 100 * 2; B = (1 - V/100) * 100.
A live color swatch and picker update to show the exact color being converted.
Use the reverse HWB sliders to build a color from Whiteness and Blackness and see the HSL result update live.
Click Copy to grab the hwb() or hsl() string for use in your CSS.

Use cases

Convert CSS hsl() values to the modern hwb() format supported in all current browsers.
Understand how much white and black a color contains when designing accessible palettes.
Translate design tokens from HSL-based design tools into HWB for CSS Color Level 4 projects.
Explore how adjusting Whiteness and Blackness affects a hue compared to Lightness.
Validate color transformations during UI or brand kit development.
Cross-reference HSL and HWB representations of the same color for documentation.

Frequently Asked Questions

Related tools

Hsl To Hsv Hsl To Rgba Hex To Rgb

Last updated: 2026-05-28 · Reviewed by Nham Vu