What's HWB and why use it?

HWB describes color as hue + amount of white + amount of black. More intuitive for designers used to mixing pigments. Supported in CSS Color Module 4 — works in all modern browsers.

Is HSL the same as HSV/HSB?

No. HSL's 100% lightness is white; HSV's 100% value is the pure hue. Same hue input gives different perceptual results. CSS uses HSL; many image editors use HSV.

Does it support alpha?

Yes — both hsla() and hwb() with a 4th alpha argument round-trip cleanly. Output uses the modern slash-separated syntax (hsl(120 50% 50% / 0.8)).

Is my data sent anywhere?

No — everything runs in your browser.

rgb · hsl · hwb · live · local · perceptual

Convert RGB to HSL / HWB

Switch between RGB, HSL and HWB color notations. HSL is intuitive for tweaks; HWB mirrors how painters mix white and black with a hue.

HSL / HWB Converter

HEX

#3b82f6

input

HSL

217.2, 91.2%, 59.8%

h s% l%

HWB

217.2 23.1% 3.5%

h w% b%

Status

valid

live

input · color

HEX or sample

Live swatch

output · preview

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217.2, 91.2%, 59.8%)

HWB

hwb(217.2 23.1% 3.5%)

Quick Start

How to convert to HSL or HWB

Paste a HEX color and instantly see HSL and HWB representations alongside RGB.

01
Paste or pick HEX
Use the native swatch or type any HEX value.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
in · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
See HSL & HWB
HSL splits into hue, saturation, lightness. HWB into hue, whiteness, blackness.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
mathhex · rgb · hslP3gamut-mappedlive
hsl · optionsready · live
```
hsl(217, 91%, 60%)
```
options applied · livelive
03
Copy what you need
Click the copy button on any row to grab that one notation.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
copyWCAG 2.2APCAAA · AAAcontrast
row · converted1 · ready
```
✓ Copied HSL
```
converted · liveWCAG-aware
04
Drop into CSS
Use HSL when you need to tweak lightness; HWB for painter-style mixing.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
color: hsl(217 91% 60%)
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to use HSL or HWB

CSS tweaks, theming, color exploration.

Easy adjustments

Bump lightness by 10% without leaving sRGB. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Brand variants

Build hover / focus shades by HSL lightness deltas. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Painter mode

HWB feels like adding white/black to a pure hue. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Tailwind-style scales

Step lightness to build a tonal scale. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick checks

Eyeball hue and saturation at a glance. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Design hand-off

Communicate colors in the format your designer prefers. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

What's the difference between HSL and HWB?

HSL uses saturation+lightness; HWB uses whiteness+blackness — same hue, different intuition.

Is HSL accurate visually?

It is convenient but not perceptually uniform. For uniform lightness use OKLCH.

Does HWB have wide browser support?

Yes — all evergreen browsers since 2022.

What about HSV?

HSV is similar but tuned for picker UIs. See the Color Picker for HSV output.

Is anything sent to a server?

No — conversion runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!