What formats can I convert?

You can convert between HEX, RGB, and HSL, and quickly copy values.

How do I generate a palette?

Choose a base color and a scheme (e.g., complementary/analogous), then click Generate to create a palette.

Pick foreground/background colors to see the contrast ratio and WCAG AA/AAA pass/fail.

It previews how a color may look under common color vision deficiencies.

Yes. Export copies CSS variables (e.g., :root { --color-1: ... }) to your clipboard.

Pick Color

HEX

RGB

HSL

Color Name Sky Blue

Brightness 65%

Base Color

Color Scheme

Foreground Color

Background Color

Sample text for contrast testing

Contrast Ratio 21:1

WCAG AA Normal: ✓ Pass

WCAG AA Large: ✓ Pass

WCAG AAA Normal: ✓ Pass

WCAG AAA Large: ✓ Pass

Test Color

Color Blindness Type

Select a color blindness type to see how colors appear to people with different types of color vision deficiency.