TXT · Text & Data tools

HWB to HSL Converter

Active color#000000

hwb(0 0% 100%)

HWB Input
HSL Output
1Active Line0Valid Items
Go To Full Color Converter

Switch your color definitions from HWB to the standard HSL model. Enter your HWB text into the input field to automatically translate its tone controls into saturation and lightness.

HWB input

Paste your string using the standard hwb(h w% b%) format. The tool extracts the starting hue alongside the whiteness and blackness mix. If whiteness and blackness total more than 100%, the values are normalized to a gray scale and the hue is ignored.

HSL output

The returned CSS value is formatted as hsl(h, s%, l%). Because both models share the same underlying hue wheel, the output hue generally matches your input. The tone controls are simply mapped from whiteness and blackness to their exact saturation and lightness equivalents.

Batch conversion

You can translate large lists of colors by pasting them with one HWB string per line. The output panel will continuously update to show a parallel list of HSL codes. Blank lines are preserved, and syntax errors are caught and labeled directly in the output pane.

Visual color picker

The built-in color input control reflects the HWB color from the line your cursor is currently on. Adjust the color visually, and the tool will automatically overwrite that specific line with the newly selected HWB values.

Frequently Asked Questions

CSS Color 4 hwb(h w% b%), space-separated: hue in degrees (0–360), whiteness and blackness as percentages. Paste one color per line for batch conversion.

CSS hsl(h, s%, l%), where hue is in degrees (0–360) and saturation and lightness are percentages. Example: hsl(188, 86%, 53%).

Yes. Both use the same hue wheel, so the hue value usually stays the same. Only the tone controls differ: HWB uses whiteness and blackness, HSL uses saturation and lightness.

Yes. Both describe the same sRGB color, so converting between them changes the coordinates, not the gamut.

No.

Try one of our format-specific converters below

Full Color Converter tool

Explore Our Tools

Browse all tools