Color Converter & Palette Tool

Convert HEX ⇄ RGB ⇄ HSL, generate tints & shades, and check WCAG contrast. Free, instant, no sign-up.

Pick a color

Tints (lighter)

Shades (darker)

WCAG contrast

A fast, free color converter

Paste any color in one format and get the others instantly. Designers and developers use HEX for CSS, RGB for code, and HSL for tweaking lightness and saturation — this tool keeps all three in sync and lets you copy any value in one tap. Use the tints and shades rows to build a quick palette around a base color, and the WCAG contrast panel to make sure text stays readable.

FAQ

How do I convert HEX to RGB (or HSL)?
Type or paste your HEX code into the HEX box. The RGB and HSL fields update automatically — tap “Copy” on any of them.
What contrast ratio do I need?
WCAG AA needs at least 4.5:1 for normal text (3:1 for large text); AAA needs 7:1. The panel above shows your color’s ratio against white and black and whether it passes.
What’s the difference between a tint and a shade?
A tint mixes your color with white (lighter); a shade mixes it with black (darker). Click any swatch to make it the active color.
More tools: WCAG Contrast Checker · CSS Gradient Generator · all free tools.
Like colors? Try our daily color-deduction puzzle Spectra — crack a hidden RGB color in 6 guesses — or read the color guessing game guide.
Copied!