Color Tools
Color Palette GeneratorImage Color ExtractorColor Contrast CheckerColor Blindness SimulatorColor Shade / Tint GeneratorColor MixerView all 9

Color Palette Generator

Generate a palette from any color using 6 harmony modes — lock what you like, export the rest.

Runs in your browserNo sign-up required
Base color — everything else is generated from this.

Click the lock icon on a swatch to keep it, then randomize or change harmony — locked colors won't change.

Text: dark
AA 8.8
Text: dark
AA 6.46
Text: dark
AA 4.76
Text: dark
AA 5.1
Text: dark
AA 5.77
Export

Lock What Works, Regenerate the Rest

Most palette generators make you start over completely if only one color needs changing. This one lets you lock any swatch you're happy with — then randomizing or switching harmony mode only touches the unlocked ones, alongside a built-in WCAG contrast check on every swatch and export options for CSS, Tailwind, SCSS, and JSON.

How to Use This Tool

  1. 1Pick a base colorEverything else in the palette is generated from this one color.
  2. 2Choose a harmony modeComplementary, analogous, triadic, split-complementary, tetradic, or monochromatic.
  3. 3Lock the colors you likeClick the lock icon on any swatch, then randomize or change harmony — locked colors stay exactly as they are.
  4. 4Export in the format you needCSS variables, a Tailwind config snippet, an SCSS file, or JSON.

Which Harmony Mode Should You Use?

  1. 1Complementary — high contrast, high energyTwo colors directly opposite each other on the color wheel. Strong contrast, good for calls to action, but can feel intense if overused across a whole design.
  2. 2Analogous — calm and cohesiveColors sitting next to each other on the wheel. Naturally harmonious since they share underlying tones, which is why it's a common choice for backgrounds and gradients.
  3. 3Triadic and tetradic — balanced but vibrantThree or four colors evenly spaced around the wheel. More vibrant than analogous while still feeling balanced, since no single hue dominates.
  4. 4Monochromatic — safest for consistencyA single hue at different lightness levels. The easiest mode to keep visually consistent across a whole interface, since every color is a variation of the same base.

Frequently Asked Questions

What does "lock" actually do?

Locking a swatch keeps its exact color fixed while you continue adjusting the base color, harmony mode, or hitting randomize — only unlocked swatches change, which is useful once you've found one or two colors you want to keep.

Why does each swatch show an "AA" badge?

It shows the WCAG contrast ratio between that color and whichever text color (black or white) reads best on it — a quick signal for whether that color could work as a background with readable text on top.

What's the difference between the export formats?

CSS gives you plain custom properties (--palette-1, etc.) for any project. Tailwind gives a ready-to-paste config snippet for your theme. SCSS gives Sass variables. JSON gives a structured list, useful for importing into design tools or other software.

How is the harmony actually calculated?

Each mode rotates the base color's hue by fixed angles around the color wheel (for example, 180° for complementary, 120°/240° for triadic) while keeping saturation constant, then varies lightness to fill out a 5-color palette.

Is my palette saved anywhere?

No — everything is generated locally in your browser. Nothing you create here is saved or transmitted.

Is this palette generator free to use?

Yes, completely free, with no sign-up and no limit on how many palettes you generate.