Convert HSL coordinates to the HWB color model. Paste your HSL values into the input area to instantly see their HWB equivalents. The conversion updates live as you type or adjust values.
HSL input
The tool accepts CSS hsl() formats, using degrees for hue and percentages for saturation and lightness. You can paste standard strings like hsl(188, 86%, 53%) or hsl(188 86% 53%). The parser automatically extracts the hue, saturation, and lightness to perform the conversion.
HWB output
The resulting output is formatted as CSS Color 4 hwb(). It describes the same sRGB color using the original hue, but controls the tone using whiteness and blackness percentages. Click the copy button in the output panel to quickly grab the converted results.
Batch conversion
You can convert multiple colors simultaneously by placing one HSL value per line in the input pane. The converter processes each line independently and returns a matching list of HWB values. Invalid lines will display a targeted error message so you can quickly spot formatting issues.
Visual color picker
The active color picker visually reflects the color of the current line your text cursor is on. Adjusting the picker automatically updates the specific HSL value in your input text to match your new selection.