Color Converter
Convert between HEX, RGB, HSL with live preview - fully client-side
Preview
hex
#3B82F6rgb
rgb(59, 130, 246)hsl
hsl(217, 91%, 60%)rgba
rgba(59, 130, 246, 1)tailwind
#3b82f6css
--color: #3b82f6;HEX
RGB
R
G
B
HSL
H
S
L
What this tool does
Converts color values between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, and CSS named colors. Live color picker, eyedropper for real-time preview, WCAG contrast checker against black and white backgrounds.
Who it's for: Designers, front-end developers, and accessibility auditors verifying WCAG contrast ratios.
When to use
- •Convert a design HEX to HSL for programmatic tweaks.
- •Check if a button's color has sufficient contrast for WCAG AA.
- •Match a CSS named color to its HEX equivalent.
- •Generate RGBA variants with specific opacity.
How it works
- 1Enter a color in any format (HEX, rgb(), hsl(), name).
- 2All other formats display instantly.
- 3Contrast score against black/white is shown.
- 4Visual preview updates in real time.
Tips
- •WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large.
- •HSL is easier for programmatic manipulation (shift hue, lightness).
- •CSS named colors (140 total) are case-insensitive.
