Color Palette Generator

Build a matching color scheme in seconds

This color palette generator gives you five colors that work together, starting from a random draw, a base color or a photo. For every color you get the HEX, RGB and HSL codes, its contrast against white and black, and the text color that stays readable on it. Everything runs in your browser: nothing is uploaded.

How to use it

1. Click "Generate a palette" or press the space bar. The "Harmony" menu sets the rule, from "Complementary" to "Monochromatic", or "Random".
2. Like a color? Click its padlock: it stays put and the other colors are built around it.
3. To start from a specific color, type it into "Base color" and click "Apply harmony". "Hue calculation" switches between HSL and OKLCH, which keeps lightness more even from one hue to the next.
4. Adjust any color with its picker or HEX field; drag the handle on a swatch to change the order.
5. Click a code to copy it. "Export the palette" gives you CSS variables, a JSON array, a PNG image and a link that reopens the palette.

You can also pull a palette from a photo, turn one color into "Shades from 50 to 900" for a design system, and keep favorites and your last 20 palettes on this device.

The color wheel and color harmonies

On the color wheel each hue sits at an angle: red at 0°, green at 120°, blue at 240°. A color scheme is a set of angles. Here are the results in HSL mode, starting from pure red #ff0000:

Complementary colors sit opposite each other and give the strongest contrast. Analogous colors are neighbors and feel calm. A monochromatic palette keeps one hue and plays with lightness. When a harmony has fewer than five colors, the tool adds lighter or darker versions.

HEX writes a color as three pairs of hexadecimal digits for red, green and blue, such as #1d4ed8. RGB gives the same values from 0 to 255, rgb(29, 78, 216), while HSL turns them into hue, saturation and lightness, hsl(224, 76%, 48%).

Putting a palette to work: the 60-30-10 rule

The 60-30-10 rule gives 60% of the surface to a dominant color, often a neutral, 30% to a secondary color and 10% to an accent kept for what should catch the eye.

• Website: light background, brand color for headings, accent for buttons and links.
• Logo: two or three colors, tested in black and white and at favicon size.
• Slide deck: one background, one heading color, one or two for charts, with strong contrast because projectors wash colors out.
• Home decor: walls take the 60%, furniture the 30%, cushions and accessories the 10%. Paint never looks like a screen, so try a sample pot first.

Contrast, accessibility and color blindness

The WCAG guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (level AA), and 7:1 for level AAA. Black #000000 on white reaches 21:1. Gray #777777 on white only scores 4.48:1: it fails for normal text, so the tool shows "AA large text".

Roughly 8% of men and 0.5% of women of European descent are estimated to have some form of color vision deficiency, most often trouble telling red from green. The "Color blindness simulation" shows your palette with protanopia, deuteranopia and tritanopia. If two colors merge, add a label or an icon.

Frequently asked questions

Why is the complementary color different in OKLCH?

In HSL the complement of #ff0000 is #00ffff. In OKLCH the hue rotates at equal perceived lightness, giving #009aac, which balances better against red.

How do I keep a color when I generate again?

Click its padlock. The space bar does nothing while you are typing in a field.

Are my photos uploaded?

No. The image is analyzed in your browser: pixels are grouped by similar color and each large group becomes one color.

How do I share a palette?

"Copy palette link" stores the five codes in the address, for example #ff0000-00ffff-….