Color palette generator

Pick a base color and we suggest colors that go well with it according to color theory, plus a full scale of light and dark shades (50 to 950) for your website or app.

Base color

Matching colors

Shade scale

Click a color to copy its HEX code. The ● dot marks the shade your base color fits in.

Color harmonies

Harmonies are based on the position of colors on the color wheel. Complementary uses the opposite color (180°) for maximum contrast; analogous uses the neighbours (±30° and ±60°), which feel calm and natural; triadic uses three colors 120° apart; split complementary uses the two neighbours of the opposite color, easier to balance than complementary; and tetradic uses four colors 90° apart. Monochromatic keeps the hue and varies the lightness.

A classic tip is the 60-30-10 rule: a dominant color in 60% of the design, a secondary one in 30% and an accent color in the remaining 10%.

The 50-950 shade scale

Design systems such as Tailwind CSS, Material or Bootstrap use a scale from 50 (almost white) to 950 (almost black) for each color: light shades for backgrounds, mid shades for buttons and links, and dark shades for text and active states.

We calculate the palette in the OKLCH color space, which is perceptually uniform: when you rotate the hue or change the lightness, colors keep the same apparent brightness, which does not happen with HSL (in HSL, a yellow and a blue with the same "lightness" look very different).