Staring at a blank canvas trying to invent five colors that belong together is a bad use of an afternoon. Rolling dice against a color wheel until something clicks, then pinning the keepers and rolling again, is a much better one. That is the whole loop this page implements.
One random base hue, five swatches, four rules
Three of the four harmony modes pick a single random base hue and lay the five swatches over a fixed pattern of offsets from it.
- Random ignores the wheel completely and gives each swatch its own independent hue. Maximum variety, no relationship, useful purely as a starting point.
- Complementary alternates between the base hue and the point directly opposite it, 180 degrees away. Across five swatches that works out as three at the base and two at the opposite, so you get two hues rather than five.
- Analogous steps in 30 degree increments centered on the base, running from 60 degrees below it to 60 degrees above. It is the only mode built on a base hue where all five hues differ, and the total spread of 120 degrees is wider than the word “analogous” usually implies.
- Triadic cycles three positions 120 degrees apart. Swatch four repeats swatch one’s hue and swatch five repeats swatch two’s, so a triadic row is three hues with two of them appearing twice.
Rolling, locking and taking it away
- A random row appears the moment the page loads, so there is nothing to submit and no empty state to fill in.
- Choose a rule from the Harmony mode dropdown if you want one.
- Press the Regenerate (or press Space) button, or just tap the spacebar anywhere outside a form field, to roll a new row.
- Click the padlock on any swatch you want to keep. It flips to a closed lock and that color is skipped by every subsequent roll.
- Take the result with Copy HEX list, Copy CSS variables or Download PNG.
The spacebar shortcut deliberately stands down whenever focus is inside an input, a select, a textarea or anything editable, so the dropdown stays keyboard-navigable and a space typed elsewhere on the page is still a space. When it does fire it suppresses the default action, so the page will not scroll out from under you while you are rolling.
Changing the mode does not reroll the row
The dropdown records a preference for the next generation and nothing more. The swatches on screen were built under whichever rule was active when they were generated, and they stay exactly as they are until you regenerate. It is a small thing that catches people out, and it exists so that flipping between modes to read the descriptions cannot wipe a row you were curating.
A lock keeps the color, not the harmony
This is the behavior worth understanding before you rely on it. Every regeneration produces a completely fresh palette from a completely new random base hue, and then your locked swatches are dropped back into their positions unchanged. The lock is a guarantee about a color, not a constraint on the generator.
In practice that means a locked teal sitting in a triadic row will usually not belong to the triad the other four swatches were just drawn from. If you want a palette that genuinely radiates from one anchor color, the honest workflow is to roll until the whole row pleases you rather than to lock one swatch and grind.
Saturation 55 to 75, lightness 40 to 70
Hue is the only thing the harmony rules control. Saturation and lightness are rolled independently for every swatch, within a fixed window: 55 to 75 percent saturation, 40 to 70 percent lightness. Those bounds are what stop a triadic palette from being three identical-looking blocks, and they keep every swatch in a mid range rather than out at the extremes.
The cost is a real one, so plan around it: you cannot roll a near-black, a near-white or a pastel here. A design system usually wants those too, and the color converter is the quicker route to a darker or lighter variant once you have a base you like.
Three exports, and the 800 by 200 strip
The hex export is one code per line, plain text, ready to paste anywhere. The
CSS export is a :root block with the colors named --color-1 through
--color-5, which drops straight into a stylesheet. The PNG is an 800 by 200
strip written to color-palette.png, five equal 160 pixel columns with no gaps
and no labels, which is what you want for a mood board or a client email.
Nothing is saved. There is no account, no server call and no local storage in this widget at all, so the row lives only in the open tab.
Two things worth doing before a palette ships. Run any pair that will carry text through the WCAG contrast checker, because a harmonious palette says nothing about legibility. Then push the whole set through the color blindness simulator, since a triadic red and green can be a delight to look at and completely indistinguishable to a significant slice of your readers. From there the CSS gradient generator and the rest of the generators hub pick up the actual building.
