Color Picker

Choose a color and get everything you need: hex, RGB and HSL values, how well it contrasts against black and white, and a ready-made complementary and analogous palette.

Pick a color

Hex

HEX: #f97316
RGB: —
HSL: —

Contrast

Palette

How it works

The color is converted between hex, RGB and HSL using standard color-space math. Contrast ratios are computed the way WCAG defines them, from the relative luminance of each color.

The complementary color is 180° around the hue wheel; the analogous palette is the color plus its neighbours at ±30°.

Frequently asked questions

What do the contrast ratios mean?

They compare your color to black and to white. A ratio of 4.5:1 or higher passes WCAG AA for normal text; 3:1 passes for large text. Use the higher-contrast background for readable text.

How are the palette colors made?

We rotate the hue in HSL space and keep the same saturation and lightness, so the palette stays harmonious with your base color.