Color Converter
ConvertersConvert between HEX, RGB, HSL, and OKLCH, plus a WCAG contrast checker
Converted
#4f46e5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
oklch(0.511 0.23 277)
Contrast checker
About the Color Converter
A color converter between Hex, RGB, HSL, and OKLCH, with a live swatch and a WCAG contrast-ratio checker. Paste a color in any supported format, or pick one visually, and every other format updates instantly alongside a pass/fail check against AA and AAA accessibility thresholds.
Design and frontend work constantly needs a value translated between formats — a designer hands you a hex code but your CSS variables use OKLCH, or you need to confirm a chosen color combination actually meets accessibility contrast requirements before shipping it. Both are one paste away here.
How to Use the Color Converter
Paste a color in Hex, RGB, HSL, or OKLCH format, or pick one with the color picker.
View the equivalent value in all four formats, with a live swatch preview.
Enter a background/foreground pair to check WCAG contrast compliance.
Frequently Asked Questions
Which color formats are supported?
Input accepts hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), and oklch() — including percentage components. Output shows all four formats at once: Hex, RGB, HSL, and OKLCH.
What is OKLCH and why would I use it?
OKLCH is a newer, perceptually uniform color space supported by all modern browsers in CSS. Unlike HSL, equal steps in OKLCH’s lightness and chroma look like equal visual steps — which makes it much easier to build a consistent color scale or tweak a color without accidentally shifting its perceived brightness.
How does the contrast checker work?
It computes the WCAG 2 contrast ratio between your foreground and background colors and checks it against the standard AA and AAA thresholds for normal and large text (4.5:1, 3:1, 7:1, and 4.5:1 respectively) — the same formula browsers and accessibility auditing tools use.
Is anything sent to a server?
No — parsing, conversion, and the contrast calculation all happen locally in your browser.
Does it support alpha/transparency?
Yes for input (#rrggbbaa, rgba(), hsla()) — alpha is parsed and carried through to the equivalent output formats, though the contrast checker itself compares the two colors as fully opaque, per the WCAG formula.