What is HWB color format?

HWB stands for Hue, Whiteness, Blackness. It describes a color by its base hue (0–360 degrees) plus how much white (lightening) and black (darkening) are mixed in. It was introduced in CSS Color Level 4 as a more intuitive alternative to HSL.

What is HSL color format?

HSL stands for Hue, Saturation, Lightness. It represents colors using the hue angle (0–360), the saturation percentage (0–100%), and the lightness percentage (0–100%). It is widely supported in CSS, design tools, and color pickers.

What happens if whiteness + blackness exceeds 100?

When the sum of whiteness and blackness exceeds 100, both values are scaled down proportionally so they sum to 100. This normalization follows the CSS Color Level 4 specification.

Are the hue values the same in HWB and HSL?

Yes. Both HWB and HSL use the same hue angle (0–360 degrees), so the hue component does not change during conversion. Only saturation and lightness are derived from the whiteness and blackness values.

Can I use HSL output directly in CSS?

Yes. The output is formatted as hsl(H, S%, L%) which is valid CSS. You can paste it directly into any CSS property that accepts color values.

HWB to HSL Color Converter

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

Enter HWB color values and instantly get the equivalent HSL representation with a live color preview.

HWB Input

Hue 180°

Whiteness 40%

Blackness 20%

Color Preview

hsl(180, 50%, 40%)

HSL Output

Hue

180

Saturation

Lightness

hsl(180, 50%, 40%)

Summary

Enter HWB color values and instantly get the equivalent HSL representation with a live color preview.

How it works

Enter the hue angle (0–360), whiteness percentage (0–100), and blackness percentage (0–100).
If whiteness + blackness exceeds 100, they are normalized proportionally.
The tool converts HWB to RGB first using the standard formula, then derives HSL from RGB.
The result shows the HSL values and a live color preview swatch.
Copy the HSL string directly to use in your CSS or design application.

Use cases

Convert CSS Color Level 4 HWB values to widely-supported HSL format.
Translate design tool HWB exports to HSL for use in stylesheets.
Understand the relationship between HWB and HSL color models.
Quickly preview a color defined in HWB before using it in code.
Verify color conversions when building themes or design systems.
Learn color theory by experimenting with whiteness and blackness mixing.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu