Color Palette Generator
Generate perfect color combinations for your designs using color theory harmony rules.
How to use the Color Palette Generator?
- 1Choose a harmony rule — Select from Analogous, Complementary, Triadic, Split-Complementary, Monochromatic, or Tetradic to auto-generate a harmonious palette.
- 2Start with colors — Begin with the default palette or add colors using the color picker on each card.
- 3Lock and shuffle — Lock colors you want to keep, then click Shuffle to regenerate the rest. Drag cards to reorder.
- 4Add or remove colors — Use the + buttons to insert new colors, or the × button to remove unwanted ones.
- 5Export your palette — Click the Export button to download your palette as PNG, CSS, SCSS, JSON, SVG, or Tailwind config.
Why use our Color Palette Generator?
Discover the ultimate color palette generator for designers and creatives. Effortlessly create harmonious color schemes and color combinations for your digital designs, websites, apps, or artwork. With our interactive tool, you can add, remove, and reorder colors to visualize the perfect palette for your project. Experiment with different design colors and find inspiration for your next creative project in seconds. Every swatch copies as HEX or RGB using the notations defined in the W3C's CSS Color Module Level 4, or exports as PNG and SVG for design handoff.
What each harmony rule actually does
Every rule returns five colors and derives them from the hue and saturation of the one you set. These are the offsets the code applies, so you can predict the output instead of shuffling until something looks right.
| Rule | Derived from the base | How it reads | Fits when |
|---|---|---|---|
| Analogous | Hue -30, -15, 0, +15, +30 at matching saturation | Quiet, low separation between neighbors | Backgrounds and section tints, not for telling actions apart |
| Complementary | Base, a softened base, +180, a dimmed +180, and -15 | Strong push and pull | One accent that has to survive against a brand color |
| Triadic | Base, softened base, +120, +240, softened +120 | Vivid and evenly weighted | Category colors, illustrations, playful brands |
| Split-Complementary | Base, softened base, +150, +180, +210 | Complement tension without the hard clash | Accents that must contrast but not fight |
| Monochromatic | One hue, brightness stepped +30, +15, 0, -20, -35 | Calm, orderly, obviously related | Dashboards, docs, form states, scales |
| Tetradic | Base, +90, +180, +270, plus a softened +45 | Four-way and the hardest to balance | Editorial and illustrative work, rarely UI |
Saturation and brightness carry through from the base, so a washed-out base gives a washed-out palette. Starting from something near the middle of the range is what makes the fifth swatch usable rather than muddy.
Lock, shuffle, drag - what each control really touches
The three controls look interchangeable and are not. Knowing the scope of each saves a lot of losing a color you liked.
- Changing the rule re-harmonizes from the current base color, and leaves locked cards alone.
- Shuffle takes the first unlocked card as the new base and rebuilds only the unlocked positions, so a locked color survives every roll.
- Dragging reorders the sequence and nothing else. The order matters when you export, because the CSS, SCSS, JSON and Tailwind output name the colors color-1, color-2 and onward in the order they appear.
- Random picks a new base in the middle of the range - saturation between 40 and 89, lightness between 35 and 74 - which is why it rarely hands you a neon or a muddy near-black.
Export formats and what to do with each
The Export button offers six shapes of the same five colors, plus a PNG image of the strip.
| Format | What you get | Useful for |
|---|---|---|
| CSS | A :root block with --color-1 through --color-n | Pasting straight into a stylesheet |
| SCSS | One $color-n declaration per line | Sass projects and partials |
| JSON | An object with a colors array | Design tokens pipelines and tooling |
| SVG | A 1000 by 400 strip of filled rects | Putting the palette in a deck or a spec |
| Tailwind | A theme.extend.colors module export | Utility-first projects, merged into your config |
| PNG | The same strip as an image | Sharing where nobody can open a file |
Every format writes color-N names in the visible order. Rename them to roles before the code goes anywhere a human has to read it.
Five swatches is not yet a website palette
A harmony set is a group of colors that agree with each other. A site needs colors that have jobs. The gap between the two is small but specific, and it is where most self-assembled themes break.
- Name the roles first: page background, card surface, body text, primary action, secondary action, and the feedback set for success, warning and error. That is six or seven slots against five swatches, so something has to be a neutral.
- Give the neutrals away from the hue. A background inherited from a saturated base makes an entire page feel like a colored filter; desaturate it hard and keep the chroma for the parts that mean something.
- Measure every text pair you create rather than assuming harmony implies readability. Complementary rules in particular produce accents that pass at 24px and fail at 16px.
- Build the hover state from the same hue by shifting lightness only, which is what the Monochromatic rule does across its five steps.
The longer version, including how many colors a marketing site actually needs, is on the color palette for website page. The measuring step lives in the Contrast Checker.
From export to something maintainable
Rename the tokens when they arrive
:root {
/* the five swatches, renamed by the job each one does */
--page: #eaf1fb; /* background */
--surface: #ffffff; /* cards */
--ink: #101828; /* body text */
--action: #1a73e8; /* buttons, links */
--action-2: #0ea5e9; /* secondary accent */
}
body { background: var(--page); color: var(--ink); }
.button { background: var(--action); color: var(--surface); }The comment column is the difference between a theme someone can edit and a theme nobody dares to.
JSON, if the palette feeds tooling
{
"colors": ["#eaf1fb", "#ffffff", "#101828", "#1a73e8", "#0ea5e9"]
}The exporter writes the array in the display order, so reorder the cards before you copy this rather than editing the array afterwards.
This page and the tool above it are built and maintained by the Online Color Tools team. The walkthrough was last reviewed against the live tool; both ship from the same code base, so if a step here ever disagrees with what you see on screen, that is a bug - tell us and it gets fixed, not buried.