ColorKitFree color palette generator
Palette generator with a padlock on every swatch
Press the space bar and five colors change; press the padlock on one worth keeping and the next roll works around it, taking its hue as the new seed. A rule selector decides how the unlocked slots relate to that seed — analogous, triadic, split complementary, tetradic, monochromatic or an unconstrained roll — while a fixed lightness ladder running from 90 down to 22 stops the set collapsing into five colors of the same brightness. Free and no signup, and the finished five leave as CSS custom properties, a JSON array, a plain hex list or a downloadable SVG sheet.
- 100% free
- No signup
- Space to re-roll
- 6 rules
- 4 export formats
Press Ctrl+V anywhere on the page to drop in a hex code, which lands in the first free slot and locks it — no need to click the field first.
Export
:root {
--palette-1: #d6e1f5;
--palette-2: #9496e6;
--palette-3: #7349d4;
--palette-4: #71259d;
--palette-5: #59155b;
}How to generate a color palette
Roll, keep what works, roll again — the loop the padlock exists for.
Roll until something is worth keeping
Press Generate, or tap the space bar with focus anywhere that is not a form control, and all five swatches change at once. Nothing is precious at this stage — the point of the loop is volume, and a roll costs one keystroke. If you already have the color the set has to be built around, paste its hex: it drops into the first free slot and locks itself on the way in.
Lock the survivors
Hit Lock on any swatch you want carried forward and it stops changing. The first locked swatch also becomes the seed: its hue is what the remaining slots are measured from, so locking a color does not merely preserve it, it re-centres everything else around it. You can also open the small color input on a swatch and nudge the value by hand, which locks it automatically — a hand-edited swatch you did not mean to keep would be a strange thing to throw away on the next roll.
Pick the rule, then take the set out
The six rules decide how the unlocked slots relate to the seed, and switching one re-rolls immediately so you can hear the difference rather than imagine it. Watch for the orange note listing pairs closer than ΔE 10 — those two will read as one color in a chart legend. When the five are right, choose CSS variables, JSON or a plain hex list and copy, or take the SVG sheet if the palette is going into a design file rather than a stylesheet.
Technical specifications
| Swatches | Five, each independently lockable and directly editable through its own color input |
|---|---|
| Rules | Six — analogous at ±20° and ±40°, triadic at 120°, split complementary at 150° and 210°, tetradic at 60°, 180° and 240°, monochromatic, and an unconstrained roll |
| Randomisation | Lightness pinned to an HSL ladder of 90, 74, 56, 38 and 22 with ±5 points of jitter; hue wobbles ±12° on analogous and ±10° on the other angle rules, and not at all on monochromatic |
| Monochromatic ramp | Perceptual, stepped in LCH from lightness 88 down to 20 at fixed chroma |
| Collision check | All ten pairs measured with CIE76 in Lab; anything under ΔE 10 is listed by hex |
| Export shapes | CSS custom properties, JSON array, newline-separated hex, and a 1000 × 260 pixel SVG sheet with each code printed on its swatch |
| Keyboard | Space rolls the unlocked slots; the binding stands down whenever focus is in a control |
| Cost | Zero, with no account, no daily roll allowance and no watermark on the SVG |
Frequently asked questions
What does locking a swatch actually do to the next roll?
Two things: the locked swatch is skipped, and the first one you lock supplies the seed hue for everything else. That second part is the one people miss. With nothing locked, each roll picks a fresh random seed and the whole set moves somewhere new; lock a color and every subsequent roll is a search around that color instead, which turns the tool from a slot machine into an incremental hunt. Locking three and rolling the other two is how most usable palettes here get finished.
Why do the five always come out light to dark?
Because a fixed lightness ladder is what separates a palette from five random colors. The slots target HSL lightness 90, 74, 56, 38 and 22, jittered by five points a roll, so there is always a tint pale enough to sit behind text and a value dark enough to be text. Randomising lightness as well produces sets that look lively as a row of squares and collapse the moment one of them has to go behind another, which is the single most common failure of generators that randomise everything.
Can I get a palette back after I close the tab?
Only by exporting it — there is no permalink and no history, deliberately. A seed in the URL would be a promise that the same seed produces the same five colors forever, which stops being true the first time the jitter ranges or the ladder are tuned. Copy the CSS block or download the SVG before you leave; both are complete records, and the SVG prints each hex onto its own swatch so it survives being dropped into a slide.
The space bar scrolls the page instead of rolling.
That means focus is sitting on a control rather than on the page. The shortcut is bound at document level and deliberately steps aside when the event target is an input, a textarea, a select, a button or a disclosure summary, because stealing the space bar from a button the user just tabbed to would break the keyboard entirely. Click any empty area of the page, or press Escape out of the field you are in, and the space bar rolls again.
What is the ΔE 10 warning telling me?
That two of your swatches are close enough to be mistaken for each other once they are separated by whitespace. All ten pairs are measured with CIE76 in Lab; under about 2.3 two patches are indistinguishable even when touching, and under 10 they still read as one color in a chart legend, a tag list or a set of status dots where nothing is adjacent. Two similar colors in a palette are not a bug if you meant them as a pair, which is why this is a note and not a block.
Is the free roll worth using?
Occasionally, and only because the ladder is still underneath it. Unconstrained hue with unconstrained lightness produces something usable in a small minority of rolls, which is why generators that offer it as their only mode feel like a fruit machine; keeping the lightness ladder fixed raises the hit rate enough that the mode earns its place for finding a hue combination you would not have reached for. Once one of them lands, lock it and switch to a rule.
Why five swatches rather than eight?
Because five rungs is what the lightness range will support. The ladder spans L 90 to L 22, and five steps puts roughly 17 points between neighbors, which is comfortably above the point at which two swatches stop looking like separate decisions. Eight steps across the same range leaves about 10 points between rungs, at which the ΔE check starts firing on almost every roll and you are really generating a single-hue ramp — which is what the monochromatic rule and the dedicated shades table are for.
About generating a palette rather than choosing one
The generate-lock-generate loop is the actual idea here, and it is worth being precise about what it does. Choosing five colors by hand is a search through a space of about 1036 combinations with no gradient to follow; a generator turns that into random sampling with a human as the fitness function, which only works if two conditions hold. The samples have to be drawn from a constrained region rather than uniformly, or almost every one is waste, and progress has to be preserved between draws, or every roll starts from nothing. The rules supply the first condition and the padlock supplies the second, and it is the padlock that changes the character of the thing: with three swatches held, the search space for the remaining two is small enough that a handful of presses exhausts the interesting part of it.
The constraint that does the most work is the least visible one. Hue is randomised, but lightness is not — each slot targets a rung of a fixed ladder, so every palette arrives with a pale tint, a mid value and something dark enough to set type in, whatever the hues turned out to be. That is also why the monochromatic rule is the only one that ignores HSL and builds its ramp in LCH: with a single hue there is nothing but lightness to look at, and HSL steps of equal size are visibly unequal, bunching near the light end. Where those angles come from in the first place is laid out on the color wheel, and if what you actually want is one hue explored properly rather than five hues found, the shades, tints and tones table does that job in one view. For a starting hue with no constraints at all, the random color generator lets you bound the range before rolling.
What a generator cannot know is which of your five swatches is a background. That is the honest limit of this page and the reason the collision check is the only judgement it passes: five colors that pass a ΔE test are a palette, not a design system, and the moment one of them has to sit behind text the question stops being about harmony and starts being about luminance — which is the scheme generator’s job. Two other routes in are worth knowing: a palette lifted from a photograph usually beats one rolled from nothing, which is what the image color picker is for, and the SVG sheet this page downloads is a real vector file, so it can be flattened with SVG to PNG for a slide deck or run back the other way through PNG to SVG if all you have is a screenshot of someone else’s swatches.
Where the rolls happen
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The SVG sheet is written as text in this tab, wrapped in a blob and handed to the browser through a temporary object URL that is revoked a tick later, so the download never touches a server. No palette is kept once the tab is closed.