Color Converter

About this tool

Working with color means jumping between notations: HEX for legacy CSS, RGB for channel manipulation, HSL for intuitive tweaks and OKLCH for perceptually uniform palettes. This converter accepts any of those formats — including a visual picker — and shows all four equivalents instantly, plus the WCAG 2 contrast ratio of the color over white and black (AA ≥ 4.5, AAA ≥ 7 for normal text). If you enter an OKLCH color outside the sRGB gamut, the result is clamped and flagged. Everything runs in the browser.

Use cases

• Convert design tokens between CSS formats
• Generate OKLCH values for perceptually uniform palettes
• Check WCAG contrast of brand colors on light/dark backgrounds
• Normalize colors received in mixed formats

Frequently asked questions

Which input formats are accepted?

Hex with 3, 4, 6 or 8 digits (with or without #), rgb()/rgba() with numbers or percentages, hsl()/hsla() and oklch(l c h). You can also use the visual color picker.

What is OKLCH and why use it?

OKLCH is a perceptually uniform color space: varying L changes the perceived lightness consistently, unlike HSL. It is ideal for generating balanced palettes and color scales.

What does the 'out of gamut' notice mean?

Some OKLCH colors have no equivalent in sRGB (standard displays). The converter approximates to the nearest displayable color and shows the notice so you know the value was adjusted.

How is contrast calculated?

Using the WCAG 2 relative luminance formula: the ratio ranges from 1 to 21. AA requires ≥ 4.5 for normal text and AAA ≥ 7. The panel shows the color's ratio over white and over black.