Color Palette Generator for Websites

How it works

Start with a base color, usually your brand color, and pick a color harmony. The generator places the other colors at fixed angles on the color wheel and balances their lightness so the palette works on a real page. Press Space or Generate for a new random base, and click the lock icon on any color you want to keep: locked colors stay put while the rest change.

Color harmonies explained

• Analogous: neighbors on the color wheel (±15° and ±30°). Calm and cohesive, good for content sites and dashboards.
• Monochromatic: one hue in five lightness steps. Very safe and easy to keep accessible.
• Complementary: the base color plus the color opposite it (180°). Strong contrast for calls to action.
• Split complementary: the two colors next to the complement (150° and 210°). Lively but less harsh than a pure complement.
• Triadic: three colors evenly spaced (120° apart). Playful and balanced.
• Tetradic: four colors in a square (90° apart). Rich palettes for illustrations and marketing pages.
• Random: five pleasant random colors, useful for quick inspiration.

Using the palette in your project

Choose an export format and copy the code:

• CSS variables: --color-1 to --color-5 inside :root.
• SCSS: $color-1 to $color-5.
• Tailwind: a @theme block for Tailwind v4 and a colors object for v3, so you can write classes like bg-brand-3.
• JSON: a plain array of HEX values for design tokens or scripts.

The preview card shows the lightest color as the background, the darkest readable color as text and the most saturated color as the button, so you can see how the palette behaves before you use it. Use the link button to copy a URL that reopens exactly this palette.

Tips for accessible palettes

A good website palette usually needs one very light and one very dark color for backgrounds and text, plus one or two accent colors. Check your text and button pairs with the contrast checker, and turn your main accent into a full 50–950 scale with the tints & shades generator.