How to use the Color Palette Generator
- Press Space or click Generate. Every press builds a new palette of three to eight colors. If you overshoot a good one, Undo (or Ctrl+Z) steps back through your last 40 palettes.
- Lock what you like. Click the padlock on any swatch and it survives every following generate. The harmony modes build around your first locked color, so locking one swatch quietly steers the rest.
- Pick a harmony and a size. Choose from Random harmonious, From a base color, Analogous, Complementary, Split-complementary, Triadic, Tetradic or Monochrome, and set the number of colors with the 3–8 buttons. For a brand or a client’s favorite color, choose From a base color and type its HEX: that exact value always stays in the palette.
- Fine-tune by hand. Click a HEX on a swatch and type a new one, or use the palette icon for your system color picker. Edited swatches lock themselves so your correction isn’t thrown away on the next press.
- Export it. Copy the code as CSS variables, SCSS, JSON, a Tailwind snippet or a plain HEX list, or download a PNG palette card, a 1000 × 1500 Pinterest pin, an Adobe
.aseswatch file or a Procreate.swatchesfile. The palette also lives in the page address, so Share this palette sends the exact colors.
Why random colors look muddy (and these don’t)
Most quick generators pick colors in HSL, where “lightness 50%” sounds like a fixed brightness. It isn’t. Pure yellow #FFFF00 and pure blue #0000FF are both HSL lightness 50%, yet yellow has a relative luminance of 0.93 and blue just 0.07 — nearly thirteen times as much light by the WCAG formula. Pick five HSL colors at “the same” lightness and you get a jumble of glaring and murky swatches with no clear light-to-dark structure.
This generator works in OKLCH, a color space built so that equal steps look like equal steps. Its lightness runs from 0 to 1 and tracks what you actually see: the same yellow sits at 0.97 and the blue at 0.45. Each palette is planned as a value ladder first — a darkest color somewhere between 0.26 and 0.40, a lightest between 0.86 and 0.96, the rest spaced in between — and only then given hues from the chosen harmony. Chroma (colorfulness) peaks in the mid-tones and falls away toward the ends, the way real light behaves, and the darkest and lightest swatches each have roughly even odds of being pulled almost to neutral. That near-black and near-white anchor is what makes a palette feel usable rather than like a bag of candy.
Colors that would fall outside what a screen can display are pulled back inside the sRGB gamut by reducing chroma, then nudged a little further in so you never get the harsh, fully saturated edge colors that print badly.
What each harmony does here
| Mode | Hues used (offsets from the anchor) | Good for |
|---|---|---|
| Analogous | 0°, ±20–34°, and double that | Calm illustration palettes, landscapes, branding that needs to feel cohesive |
| Complementary | 0° and 180° | Strong focal points: one hue for the mass, its opposite as the accent |
| Split-complementary | 0° and 180° ± 25–37° | Lively but easier to balance than straight complements |
| Triadic | 0°, 120°, 240° | Playful, poster-like sets; let one hue lead |
| Tetradic | 0°, 60°, 180°, 240° | Rich, many-colored scenes such as game art or patterns |
| Monochrome | One hue, many values | Value studies, minimalist sites, single-ink print looks |
Random harmonious picks one of these for you each time, leaning toward analogous and complementary schemes because they are the easiest to balance. The angles are measured on the OKLCH hue circle rather than the old RGB wheel; to explore the classic painter’s wheel instead, try the Color Harmony Wheel.
Which export goes where
| Export | Use it in |
|---|---|
| CSS variables / SCSS | Websites and themes — paste into :root or your variables file |
| JSON | Scripts, design tokens, generative art sketches; includes HEX, RGB and HSL |
| Tailwind | theme.extend.colors in tailwind.config.js, as palette-100, palette-200 and so on |
| Adobe .ase | Photoshop, Illustrator and InDesign swatch panels; Affinity apps import it too |
| Procreate .swatches | Tap the file on an iPad and Procreate adds it to your Palettes |
| PNG palette card | Mood boards, client emails, sketchbook printouts (1600 × 900 px) |
| Pinterest pin | A 2:3 portrait image, 1000 × 1500 px, with every HEX code printed on it |
Tips from practice
Decide the value plan before the hues. Squint at the strip: if two swatches merge into one shape, they’re too close in value to carry separate jobs in a painting or layout. Regenerate with the darkest swatch locked until you see three clearly separate values.
Use the 60-30-10 split. In a finished piece, one color covers most of the area, a second supports it and the rest appear in small doses. A five-color palette rarely means five equal areas — decide which swatch is the 10% accent before you start.
Lock a neutral early. A good warm off-white or a soft charcoal makes almost any set of hues work together. Lock it first, then let Space shuffle the colorful swatches around it.
Check text pairs before you commit. A pretty palette can still fail as text on a background. Run your two most likely pairings through the Contrast Checker — mid-tone accents often need a darker twin for small type.
Keep the link, not just the PNG. The address bar holds the exact palette, so a bookmark or a note with the link reopens it ready to edit months later.