Color Converter — HEX, RGB & HSL with Contrast Check
Convert any color between HEX, RGB and HSL — plus instant WCAG contrast ratios against white and black text so you know it's accessible.
Last reviewed 2026-10-19. Rates change — verify against the official sources linked below before relying on these figures.
What this is based on
- sRGB color space throughout — the web standard.
- Contrast ratios per WCAG 2.x formula — AA requires ≥4.5:1 for normal text, ≥3:1 for large text.
When to use which format
HEX is for constants — '#3b82f6' is compact and what design tools emit. RGB is for manipulation — easy to alpha-blend (rgba), easy to loop. HSL is for humans — want a darker version? Drop L by 10%. Want a complementary hue? Add 180° to H. Professional palettes are authored in HSL and compiled to HEX.
The converter shows all three because real-world work needs all three: the mockup gives you HEX, the animation needs RGB, and you figure out hover states in HSL.
The contrast numbers that matter
WCAG AA requires 4.5:1 for body text, 3:1 for large text (18pt+ or 14pt bold). AAA demands 7:1. The ratios here are computed against pure white and pure black text — for colored text-on-color checks, compute both colors and compare their luminances the same way.
The classic failure: medium-gray text (#777) on white is only ~4.5:1 — technically passing, practically unreadable in sunlight. Design for 7:1 on anything that matters.
Frequently asked questions
- How do I convert HEX to RGB?
- Paste the hex value above — or mentally: each pair is one channel in base-16. #3b82f6 = rgb(59, 130, 246).
- What contrast ratio is accessible?
- WCAG AA: 4.5:1 for normal text, 3:1 for large text (18pt+). AAA: 7:1. Below 3:1 fails everywhere.
- Why does #48f work?
- 3-digit hex is shorthand — each digit doubles: #48f = #4488ff. Supported here and in CSS.
- What about alpha/transparency?
- rgba() and hsla() inputs are accepted — the alpha is ignored for conversion since it's a separate channel. Compose it back in your CSS.
Related calculators
Paste JSON to validate and pretty-print it — with error location (line and column) when it's broken, plus key count, depth and size stats. Runs entirely in your browser.
Percent-encode or decode strings, and break any URL into protocol, host, path, query params and fragment — decoded params listed cleanly.
Test a regular expression against your text with instant results: all matches, their positions, capture groups and flag support — runs locally, nothing sent anywhere.