Palette Generator

One-click 5-color palettes, lock, drag, PNG export.

#14B6DBrgb(20, 182, 219)
Tap to copy
#1484DBrgb(20, 132, 219)
Tap to copy
#1452DBrgb(20, 82, 219)
Tap to copy
#1421DBrgb(20, 33, 219)
Tap to copy
#3914DBrgb(57, 20, 219)
Tap to copy

Export

:root {
  --color-1: #14b6db;
  --color-2: #1484db;
  --color-3: #1452db;
  --color-4: #1421db;
  --color-5: #3914db;
}

Tap swatch to copy HEX; drag to reorder; 🔒 locked colors stay on regenerate.

How to use

  1. Pick base color & mode.
  2. Lock favorites then Generate.
  3. Drag to reorder, export PNG or copy CSS.

FAQ

What modes are there?

Analogous, Complementary, Triadic, Split-Complementary, Monochrome, and Random. Each generates a 5-color set from your base.

What does Lock do?

Locked swatches stay when you tap "Generate" or change base/mode. Drag to reorder.

How to export?

Copy HEX, copy CSS variables (:root with --color-1..5), or export PNG (200×460 per swatch). Tap a swatch to copy its HEX.

Is it accessible?

Text color on each swatch auto-picks black or white by YIQ contrast for readability.

What is the 60-30-10 color rule?

60% dominant color (backgrounds), 30% secondary (sections, cards), 10% accent (buttons, highlights). Generate a 5-color set with this tool first, then assign by ratio for a balanced layout.

How do I make sure colors are readable for everyone?

Keep text-background contrast at 4.5:1 or higher: dark colors for text, light colors for backgrounds, and darken gray text before use. It stays legible on phones, projectors, and printouts.