Color Converter

Convert between HEX, RGB, HSL, and OKLCH, plus a WCAG contrast checker

Converted

Hex

#4f46e5

RGB

rgb(79, 70, 229)

HSL

hsl(243, 75%, 59%)

OKLCH

oklch(0.511 0.23 277)

Contrast checker

Sample text
Contrast ratio6.29:1
AA · Normal textPass
AA · Large textPass
AAA · Normal textFail
AAA · Large textPass

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.

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.