Color Converter

Convert between HEX, RGB, HSL, RGBA, and HSLA. Check WCAG contrast, generate palettes, and find Tailwind matches.

All Formats

HEX#3b82f6
HEX (no #)3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217.2, 91.2%, 59.8%)
CSS Variable--color: #3b82f6;
Tailwind (closest)blue-500

Interactive Sliders

R
59
G
130
B
246
A
1

WCAG Contrast Checker

on

3.68:1

Sample Text
Fail AAPass AA LargeFail AAAFail AAA Large
on

5.71:1

Sample Text
Pass AAPass AA LargeFail AAAPass AAA Large

Color Palette

Complementary

Triadic

Analogous

Shades (darker)

Tints (lighter)

Tailwind CSS Quick Pick

What is a Color Converter?

A color converter translates colors between different notation systems: HEX (#ff5733), RGB (rgb(255, 87, 51)), HSL (hsl(14, 100%, 60%)), and named CSS colors. This tool includes a WCAG contrast checker for accessibility compliance, palette generators, Tailwind CSS color matching, and interactive sliders for fine-tuning colors.

Common Use Cases

  • •Converting design tool colors (HEX) to CSS-friendly formats
  • •Checking color contrast ratios for WCAG accessibility
  • •Finding the closest Tailwind CSS color class
  • •Generating complementary and analogous color palettes
  • •Converting between color spaces for different platforms

Frequently Asked Questions

What WCAG contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Use this tool's contrast checker to verify your color combinations meet these standards.

When should I use HSL instead of HEX?

HSL (Hue, Saturation, Lightness) is more intuitive for creating variations — change lightness for shades/tints, saturation for vibrancy, and hue for completely different colors. HEX is more compact and widely supported in older tools.