HEX, RGB, HSL, HWB and OKLCH — which one when?

CSS gives you half a dozen ways to write the same color. HEX (#8b5cf6) is the compact classic every design tool exports. RGB spells out the channels directly. HSL describes hue, saturation and lightness — far easier to tweak by hand, because lightening a color means raising one number instead of three. HWB trades saturation for whiteness and blackness, which some designers find more intuitive. OKLCH is the modern perceptual notation: equal numeric steps look like equal visual steps, making it ideal for design systems.

The catch is that every tool in your chain speaks a different dialect: your design handoff is HEX, your CSS variables might be HSL, your new palette is OKLCH, and that Stack Overflow answer from 2014 is rgba(). A converter that shows all notations side by side — plus the nearest Tailwind color and the WCAG contrast ratios — turns a lookup chore into a glance. (One clarification: this tool converts color codes. If you need to convert an image's color space, like sRGB or Display P3, use the Color Space Converter instead.)

Open the free Color Converter — no signup, runs entirely in your browser.

How to use it

  1. Type or paste any color: #8b5cf6, rgb(139 92 246 / 50%), hsl(258, 89.5%, 66.3%), hwb(258 36% 4%), or a keyword like rebeccapurple.
  2. Read every notation off the stacked rows — HEX, RGB(A), HSL(A), HWB and OKLCH — each with a one-click copy button.
  3. Check the keyword and Tailwind v3 rows for a ready-made name, and the contrast rows to see whether white or black text passes WCAG AA or AAA on your color.

Why this one

  • Accepts every CSS input syntax, legacy comma and modern space/slash alike, plus all 148 named colors.
  • Translucent colors handled honestly: 8-digit HEX, rgba()/hsla() output, a checkerboard preview, and contrast computed after compositing.
  • OKLCH output uses the standard perceptual transform, verified against the reference implementation.
  • Nearest Tailwind v3 palette entry measured in perceptual OKLab distance — and hidden when nothing is genuinely close.
  • Runs entirely in your browser; nothing you enter is uploaded.

Frequently asked questions

Why can't I enter an OKLCH color?

Many valid OKLCH coordinates lie outside the sRGB gamut, so accepting OKLCH input would require gamut mapping — silently clipping would hand you the wrong color. This tool keeps inputs strictly in sRGB notations and always provides OKLCH as output.

What do the AA and AAA badges mean?

They are WCAG contrast grades for normal-sized text: AA needs a ratio of at least 4.5:1, AAA at least 7:1. The tool shows the ratio against pure white and pure black, compositing translucent colors over the background first, and marks which grade each passes.

Is HSL better than HEX?

For hand-editing, usually yes — lightness and saturation are separate dials, so creating a hover shade means changing one number. HEX is more compact and universal in tooling. They represent the same colors; use whichever fits the workflow and convert freely.

How close is the "nearest Tailwind color" really?

It is measured as euclidean distance in OKLab, a perceptually uniform color space, so the number tracks what your eye would say. When the nearest palette entry is farther than 0.1 OKLab units — meaning visibly different — the row is hidden instead of suggesting a misleading match.