Color Converter

Why convert colors?

CSS color formats are fragmented across design tools, frameworks, and team conventions. Figma exports HEX, Tailwind configs hold RGB, design tokens are migrating to OKLCH. This converter takes any CSS color and shows all eight formats side by side, plus WCAG contrast, OKLCH shade scale, and the nearest Tailwind v4 palette match — entirely in your browser.

What is OKLCH?

OKLCH is a perceptually uniform color space defined in CSS Color Module Level 4. Equal numerical steps look like equal visual steps, which makes it the recommended space for design-system color scales and accessible UI states. HSL is not perceptually uniform — yellow at 50% lightness looks brighter than blue at 50% lightness — so OKLCH wins for shade generation.

How does the WCAG contrast checker work?

WCAG 2.2 contrast ratio is computed from the relative luminance of two colors. AA requires ≥ 4.5:1 for body text and ≥ 3:1 for large text or UI components; AAA raises the bar to 7:1 / 4.5:1. The checker shows your color against white, black, and a custom comparison color you can paste in.

Is my color data sent anywhere?

No. All parsing, conversion, and shade generation happen locally in your browser. The URL hash you see in the address bar is generated on your device and never POSTed to any server. There is no telemetry and no analytics that captures color values.

FAQ

Why are some OKLCH colors marked as clipped?

OKLCH covers more colors than the sRGB gamut your monitor can show. When the chroma is too high for a given hue and lightness, we clip to the sRGB boundary so the HEX and RGB output stays accurate.

Why use OKLCH over HSL for design tokens?

OKLCH is perceptually uniform, meaning equal numerical steps look like equal visual steps. HSL is not — yellow at 50% lightness looks brighter than blue at 50% lightness. For consistent color scales, OKLCH wins.

What WCAG level should I aim for?

WCAG 2.2 AA is the legal baseline in most jurisdictions: 4.5:1 for body text, 3:1 for large text and UI components. AAA (7:1 / 4.5:1) is best practice for accessibility-first products.

Does this tool send my colors anywhere?

No. All parsing and conversion happens locally in your browser. The URL hash you copy is generated on your device and never POSTed to any server.

Can I share a color via URL?

Yes — the URL hash updates as you change the color. Copy the address bar to get a link your teammate can open to see the same color.