Palette builder with harmony rules, locks, and spacebar regenerate. Free, private, runs in your browser.
100% private — your files never leave your browser. All processing happens locally on your device.
Press Space to regenerate unlocked colors. Click a hex to copy.
:root {
--color-1: #3bdff6;
--color-2: #3bb1f6;
--color-3: #3b82f6;
--color-4: #3b53f6;
--color-5: #513bf6;
}Color harmony is the idea that certain combinations 'just work' because of their angular relationship on the color wheel. Complementary (opposite hues) gives maximum contrast — perfect for calls to action. Analogous (neighboring hues) gives calm, unified feel — perfect for backgrounds and illustrations. Triadic (three evenly-spaced hues) gives balanced energy. Tetradic (four hues, two pairs of complements) gives rich, busy palettes. Split-complementary softens the clash of pure complementary. Compound is a practical working palette. Shades varies lightness only — useful for generating monotone tints. Monochromatic varies lightness with saturation preserved.
Press Space (on desktop) to regenerate unlocked colors. This single interaction loop is why Coolors owns the category — you can sweep through dozens of palette variations in seconds without ever touching a menu. Lock the colors you like; keep pressing Space until the rest click. On mobile, the lock buttons stay visible permanently for tap ergonomics; use the seed input and harmony mode toggle to drive exploration.
Brand colors are fixed — you don't get to generate them. Lock your brand color in column 1, then press Space to find neutrals and accents that harmonise with it. This is the realistic workflow: the primary is known; the supporting palette is the interesting design problem. Unlock anything anytime to throw it back into the pool.
The palette builder uses chroma-js, which does its math in LAB and LCH color spaces. These spaces are perceptually uniform — a step of 10 in LAB lightness looks like the same step to your eye regardless of starting hue. In plain HSL, the same 10-point step would look huge in yellows and tiny in blues. The result is palettes that feel balanced across hues, not muddy in some colors and blown out in others.
The CSS export produces `:root { --color-1: #...; }` custom properties. The Tailwind export produces a theme-extend block registering the palette under `colors.palette.{1-5}`. The hex export is a plain list — use it for any other toolchain. The share URL encodes palette + locks + harmony in the URL hash, so you can paste a link in Slack and someone else sees your exact palette state on open. All processing is local; nothing is uploaded or persisted to a server.
Traditional color-theory rules that pair colors based on their angular relationships on a color wheel. Complementary uses opposite colors (vivid contrast), analogous uses neighbors (calm, harmonious), triadic evenly spaces three colors (balanced energy), and so on. Each mode produces a different mood.
Hover over a color column and click the lock icon. Locked colors stay put when you press Space or change the seed. Unlock by clicking again.
Yes. Tap a color column to copy its hex; the lock icon is always visible on mobile. The spacebar shortcut is desktop-only — mobile users tap the 'regenerate' affordance instead.
The CSS export gives you `:root { --color-1: #...; --color-2: #...; ... }` — drop it into your stylesheet and reference `var(--color-3)` anywhere. The Tailwind export gives you a config snippet that registers the palette under `colors.palette.{1-5}`.