Encoders & Utilities

Color Converter & WCAG Contrast

Convert HEX ↔ RGB ↔ HSL with palette generator and WCAG contrast checker.

Pick or paste a color Accepts HEX, rgb()/rgba(), hsl()/hsla(). Try the eyedropper or paste from anywhere.

Try:

About this tool

Color Converter cross-translates colours between the formats designers and developers use every day: HEX (#3366FF), RGB / RGBA, HSL / HSLA, HSV, OKLCH, CMYK, plus the named CSS colours (rebeccapurple, tomato, all 147 of them). Type any format and the rest update instantly; alpha is preserved across the formats that support it.

Two extras make this more than a passive converter. The palette generator produces tonal scales (50/100/.../900) and harmony groups (complementary, triadic, tetradic, split-complementary) around your base colour — useful for filling in a design system. The WCAG contrast checker picks a foreground and background, computes the contrast ratio per WCAG 2.2, and tells you whether the pair passes AA (4.5:1 small, 3:1 large) and AAA (7:1 small, 4.5:1 large).

When to use this tool

Building a design system. Pick one brand colour, get a full tonal ladder for primary/secondary/neutral roles.
Auditing accessibility. Run every text/background pair through the contrast checker; below 4.5:1 means the WCAG AA acceptance criterion fails.
Migrating CSS. Convert old hex constants to OKLCH for the modern wide-gamut workflow.
Designer-developer handoff. Translate Figma RGB values to CSS hex (or vice-versa) without rounding errors.

About WCAG contrast and OKLCH

WCAG 2.2 contrast uses the historical "relative luminance" formula — adequate for most cases but known to over- and under-rate certain colour pairs. APCA (the algorithm slated for WCAG 3) corrects this with a perceptually-uniform metric; we show both numbers so you can plan ahead. OKLCH is a recent CSS colour space that is perceptually uniform — equal numeric steps in L (lightness) look equal to the eye, which makes generating consistent palettes much easier than with HSL.

Frequently asked questions

What is the WCAG AA threshold?

For normal text: contrast ratio ≥ 4.5:1 between text and background. For large text (≥ 18pt regular, or ≥ 14pt bold): ratio ≥ 3:1. The AAA tier is stricter (7:1 / 4.5:1). Most public-facing sites target AA; government and healthcare interfaces increasingly require AAA. Our checker shows pass/fail for every threshold so you do not have to memorise the numbers.

Why are HEX and RGB equivalent?

They are the same colour written differently. #3366FF is just shorthand for "red=0x33 (51), green=0x66 (102), blue=0xFF (255)" — three bytes. RGB notation in CSS (rgb(51, 102, 255)) writes the same three bytes in decimal. HEX is more compact (7 characters vs ~17); RGB is more readable when you need to compute on the channels. Use whichever fits your context; the result is identical.

What is OKLCH and should I use it?

OKLCH is a CSS Color 4 colour space designed to be perceptually uniform — equal numeric jumps in L (lightness), C (chroma), or H (hue) look equal to the eye. HSL is not uniform; a bright yellow at L=80 looks much brighter than a navy at L=80. For design systems and tonal palettes OKLCH is dramatically easier to work with. Browser support is excellent (Safari 16.4+, Chrome 111+, Firefox 113+).

Does the contrast checker support opacity?

Yes — semi-transparent foregrounds are composited against the background colour before the contrast is computed, which is what humans actually see. rgba(0,0,0,0.6) on white renders as the same colour as #666666 on white, and we treat them identically. If you compose against a complex background (image, gradient), pick the average background colour as the reference.