Palettes that just
work together

How to use every option

1. Pick a harmony mode — Random for full surprise, Monochromatic/Shades/Tints for one hue at different lightness, Analogous/Complementary/Split-Complementary/Triadic/Tetradic/Square for classic color-wheel relationships, and Neutral, Warm, Cool, Pastel, Vibrant, Earth, Jewel, Web-Safe, Material, Duotone, or Retro for mood-based sets.
2. Set the size — drag the slider from 3 to 10 colors depending on how large a system you need.
3. Choose a display format — HEX, RGB, HSL, HSV, or CMYK; every swatch label updates instantly.
4. Generate — click Generate Palette, or press the Space bar anywhere on the page (outside text fields).
5. Lock colors you like — click a swatch's lock icon before generating again; locked swatches are skipped and every other color is refreshed.
6. Copy a value — click any swatch (not the lock) to copy its color in the current format to your clipboard.
7. Build a shade/tint ramp — click "Shades" under a swatch to generate a 10-step scale from near-black to near-white for that hue.
8. Check contrast — set a foreground and background color (type a HEX or use the color picker) to see the WCAG ratio and AA/AAA pass/fail for normal and large text.
9. Simulate color blindness — choose protanopia, deuteranopia, tritanopia, or achromatopsia to preview how your current palette looks to color-blind viewers.
10. Extract from an image — drop in a photo or graphic; the tool samples its pixels and shows the most common colors, which you can load as your working palette.
11. Export for code — copy as CSS custom properties, a Tailwind config snippet, raw JSON, or a plain HEX list.
12. Save and revisit — click "Save to History" to keep a palette on this device, then click any history entry to reload it.

One tool instead of a dozen color utilities

Related tools