Color converter

What this color converter does

Paste one CSS color and read it back in five notations at once: HEX, RGB, HSL, HWB and OKLCH. It accepts anything the CSS color property accepts — 3, 4, 6 or 8-digit hex, rgb()/rgba(), hsl()/hsla(), hwb(), oklch() and the 148 named colors — and each output line has its own copy button. The swatch and the native color picker stay in sync with whatever you typed.

How to use it

1. Type or paste a color into the CSS color field, or click Pick to open the native color picker.
2. The input turns red if the string is not a valid CSS color; otherwise the five outputs update as you type.
3. Click Copy next to the format you need. Transparency, if present, is carried into every output.

Format reference

Format	Example for #6b46ff	Channels	Browser support
HEX	#6b46ff	red, green, blue as 00–ff; 8 digits add alpha	Universal (8-digit since 2016)
RGB	rgb(107, 70, 255)	0–255 per channel, alpha 0–1	Universal
HSL	hsl(252, 100%, 63.73%)	hue 0–360, saturation and lightness in %	Universal
HWB	hwb(252 27.5% 0%)	hue, then how much white and black is mixed in	Chrome 101, Safari 15, Firefox 96
OKLCH	oklch(55.5% 0.2554 283.46)	perceptual lightness, chroma (0 to about 0.4), hue	Chrome 111, Safari 15.4, Firefox 113

HEX, RGB and HSL are three views of the same sRGB cube, so converting between them never changes the color. HWB is also sRGB but is meant for humans: hwb(252 27.5% 0%) reads as “hue 252, lightened with 27.5% white, no black”. OKLCH is a different, wider color space; sRGB colors always fit inside it, but not every OKLCH color fits inside sRGB.

Worked examples

Inputs and what the tool returns:

rebeccapurple             → #663399 · rgb(102, 51, 153) · hsl(270, 50%, 40%)
rgba(107, 70, 255, 0.5)   → #6b46ff80 · hsla(252, 100%, 63.73%, 0.5)
oklch(70% 0.2 150)        → #00bf54 · hwb(150.88 -11.2% 25.2%)

The last line shows the gamut gotcha. oklch(70% 0.2 150) is a vivid green that sits just outside sRGB, so the hex is the clipped nearest color and the HWB whiteness comes out negative. If you see a negative or over-100% channel, the color cannot be displayed exactly on an sRGB screen; lower the chroma until the numbers are back in range.

When to use which format

• HEX for design-tool handoff, tokens and anywhere you need the shortest string. Use 8-digit hex (#RRGGBBAA) instead of rgba() when you want alpha in one token.
• HSL when you want to tweak a color by hand: nudge lightness for hover states, keep hue fixed. Beware that HSL lightness is not perceptual — hsl(60 100% 50%) yellow looks far brighter than hsl(240 100% 50%) blue at the same 50%.
• OKLCH for building palettes and gradients. Equal lightness steps look equal, and you can change hue while keeping perceived brightness constant. The palette generator builds its scale in OKLCH for this reason, and this article shows why gradients look better in it.
• HWB when you think in terms of “add white / add black” — it maps directly onto tint and shade controls in pickers.

A practical pattern for modern stylesheets is a hex fallback followed by the OKLCH value:

.brand {
  color: #6b46ff;
  color: oklch(55.5% 0.2554 283.46);
}

Browsers that do not understand oklch() keep the first declaration; the rest get the wide-gamut one.

Related tools and snippets

• Contrast checker — paste the hex you just converted and check it against your background for WCAG AA/AAA.
• Palette generator — turn one brand color into a 9-step OKLCH scale plus complementary and triadic harmonies.
• Color mixer — blend two colors in OKLCH, RGB or HSL and copy the midpoint.
• Tints and shades generator — lighter and darker variants of a color for hover, border and background states.
• Gradient text snippet — a copy-paste background-clip: text gradient that works well with OKLCH stops.