Color Converter 🔒 Your data never leaves your browser.

HEX ↔ RGB ↔ HSL, with a live preview and color picker.

Contrast checker

Contrast ratio

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Shades & tints

Select a step to load it as the current colour.

About this tool

Paste a color in any CSS format — hex (#1e90ff or #19f), rgb(), hsl(), or a named color like dodgerblue — and get all formats back with one-click copy, plus a live swatch. HEX is what design tools export, RGB is what canvas and JS APIs want, and HSL is the one humans can reason about (hue, saturation, lightness).

Conversion uses the browser's own CSS engine, so anything valid in a stylesheet works here — including modern syntax. 100% client-side.

Frequently asked questions

Is my color data sent anywhere?

No. Every conversion, contrast check, and palette is computed locally in your browser — nothing you enter ever leaves your device.

What's the difference between HSL and HSV?

Both describe hue and saturation, but HSL's third value is lightness (how close to black or white), while HSV's is value (how close to black only, staying at full brightness at the top). HSV tends to match design-tool color pickers; HSL tends to match CSS conventions.

Why does my hex code have 8 digits instead of 6?

The extra pair encodes alpha (transparency) as #rrggbbaa. It only appears when the input color has an alpha channel below 1 — fully opaque colors stay at 6 digits.

What do the AA and AAA badges under the contrast checker mean?

They're WCAG 2 contrast thresholds: AA is the minimum most sites should meet (4.5:1 for normal text, 3:1 for large text or UI parts), AAA is the stricter target (7:1 / 4.5:1). A green badge means your foreground/background pair passes that level.

What is OKLCH and why would I use it over HSL?

OKLCH is a perceptually uniform color space — equal steps in lightness or chroma look equally different to the human eye, which HSL doesn't guarantee. It's increasingly used in modern CSS for building color scales and gradients that don't have unexpected dark or muddy spots.