#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)oklch(0.585 0.204 277.1)Free Online Color Converter & Contrast Checker
Convert a color between HEX, RGB, HSL, and OKLCH, or check the WCAG 2.1 contrast ratio between two colors for accessibility compliance. It helps designers and frontend developers translate color formats and check whether interface text meets contrast expectations.
Color spaces explained
HEX and RGB represent a color as red, green, and blue channel values — HEX is just RGB written in base-16. HSL (hue, saturation, lightness) is often more intuitive for humans to reason about and adjust. OKLCH (lightness, chroma, hue) is a newer, perceptually uniform space — a given change in its lightness value looks like the same brightness change to the human eye anywhere in the color space, which isn't true of HSL's lightness.
How WCAG contrast checking works
The checker computes each color's relative luminance using the WCAG 2.1 formula, then calculates the contrast ratio between the lighter and darker color. A ratio of 21:1 (pure black on pure white) is the maximum possible; 1:1 means the colors are identical. The four badges show whether your combination meets each WCAG conformance level and text size threshold.
Common use cases
- Checking whether a design's text/background color combination meets accessibility requirements before shipping
- Converting a design tool's HEX value into the CSS color format your codebase uses
- Building a perceptually uniform color scale using OKLCH's lightness axis
How to use Color Converter for related tasks
Enter a color, compare HEX/RGB/HSL/OKLCH values, and use the contrast result alongside the actual font size and background in your UI.
Related tools: Color Blindness Simulator, CSS Effects Generator.
Frequently asked questions
What is OKLCH and why would I use it over HEX or HSL?
OKLCH is a newer, perceptually uniform color space — meaning equal changes in its Lightness value look like equal changes in brightness to the human eye, which isn't true for HSL. It's increasingly used in modern CSS (the color() and oklch() functions) for building color scales and palettes that look visually consistent.
What do AA and AAA mean for contrast?
These are WCAG 2.1 conformance levels for text contrast against its background. AA (the more commonly required level) needs a 4.5:1 ratio for normal text and 3:1 for large text (18pt+, or 14pt+ bold); AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.
Which color counts as the "foreground" vs "background"?
It doesn't actually matter which one you call foreground or background — the contrast ratio formula is symmetric, comparing the lighter color's luminance to the darker one's regardless of which field you entered them in.
Is this the exact same contrast calculation used by accessibility auditing tools?
Yes — it implements the WCAG 2.1 relative luminance and contrast ratio formulas directly from the specification, the same formulas used by tools like Lighthouse, axe, and browser DevTools' accessibility panels.
Which color format should I use in CSS?
Choose the format your design system supports; modern CSS may use OKLCH, while HEX and RGB remain practical for interoperability.