Color Converter
Convert HEX ↔ RGB ↔ HSL, copy CSS variables and Tailwind values, and check WCAG contrast — all in one place.
All Formats
HEX, RGB, RGBA, HSL, HSLA, CSS variables, and Tailwind arbitrary syntax — copy with one click.
WCAG Contrast
Live AA / AAA contrast scoring vs. white and black so you ship accessible colors by default.
Browser-Only
Color math runs locally — nothing is uploaded, logged, or tracked.
Frequently Asked Questions
What contrast ratio do I need?
WCAG AA — the legal default — needs 4.5:1 for body text and 3:1 for large text (≥18pt regular or ≥14pt bold). AAA goes higher: 7:1 / 4.5:1.
How do I convert from HSL to HEX?
Paste the hsl(…) value into the input. The HEX value updates instantly, and you can copy it with one click.
Can I use 8-digit hex?
Yes — 8-digit hex like #ff9800cc encodes alpha in the last two chars. The converter parses and preserves alpha across all formats.
Does this support OKLCH?
OKLCH support is on the roadmap. For now, modern HSL with alpha covers the most common Tailwind v3 and CSS use cases.
Part of the Tools Lab by Azeem Shafeeq