Color palette generator

How to use the palette generator

The generator builds 5 colors at a time. The workflow is quick:

• Generate: press the space bar or click the generate button to get a new combination. Run through several in a row until one catches your eye.
• Lock: like a color? Click its lock. Future generations keep locked colors and recalculate only the others, so you can build the palette step by step.
• Start from your own color: enter your brand color in the base color field. The selected harmony rule is then calculated from it.
• Copy: each color shows its HEX code and the nearest color name. Click a color to copy the HEX.
• Share: the URL updates with the current colors in the format ?c=hex-hex-hex-hex-hex. Copy the address and send it to a client or teammate: anyone who opens it sees exactly the same palette.

The harmony rules

The rules rely on positions on the color wheel, measured by hue (the H in HSL, from 0° to 360°). Each one creates a different effect:

Rules are a starting point, not a guarantee: two complementary colors with the same lightness, for instance, vibrate uncomfortably when placed side by side. The color harmony guide walks through each scheme with examples and shows how to balance the proportions between colors.

How to apply a 5-color palette to a website

A generated palette has 5 colors of similar visual weight, but a website needs hierarchy. The 60-30-10 rule is a good place to start:

• 60% for the dominant color: in interfaces, almost always a light neutral (or a dark one in dark mode) for backgrounds. If the palette has no neutral, derive one: take the lightest color and drop most of its saturation, or use something like off-white.
• 30% for the secondary color: header, footer, cards and alternating sections.
• 10% for the action color: primary buttons, links and highlights. Pick the most saturated color in the palette and use it sparingly so it keeps drawing attention.

The two remaining colors can become supporting variations, such as a button's hover state or a badge color. For body text, use a very dark shade derived from the palette instead of pure black, such as charcoal gray. The guide on building a website color palette covers the role of each color, including status colors (error, warning, success).

Check accessibility before you ship

A beautiful palette can still be unreadable. WCAG requires a minimum contrast of 4.5:1 for normal text and 3:1 for large text and for UI components such as input borders and icons. Saturated mid-tones, exactly what a generator tends to produce, rarely pass as text colors on a white background.

Before using the palette, test every text and background pair in the contrast checker. If a pairing fails, darken or lighten the color while keeping its hue: the palette keeps its identity and becomes readable. Also remember that part of your audience is color blind; the color blindness simulator shows whether your colors stay distinguishable.

Export to code

When the palette is ready, export it in one of these formats:

• CSS variables: five custom properties, --color-1 through --color-5, ready to paste into your stylesheet.
• Tailwind: a snippet for theme.extend.colors in your config file, which generates bg- and text- classes with your colors.
• JSON: the list of colors, useful for design tokens, scripts or other tools.

Here is an example of the CSS variables in use, with roles assigned:

:root {
  --color-1: #264653;
  --color-2: #2A9D8F;
  --color-3: #E9C46A;
  --color-4: #F4A261;
  --color-5: #E76F51;
}

body { background: #FAF9F6; color: var(--color-1); }
.button { background: var(--color-5); color: #000000; }
.card { border-top: 4px solid var(--color-2); }

A good habit is to rename the variables after the role they play, such as --color-primary or --color-surface, rather than their position. That way, swapping the palette later does not mean touching every component. Note the button text in this example: white on #E76F51 reaches only about 3.1:1, below the 4.5:1 needed for normal text, so black text is used instead. Darkening the coral is the other option.