Color Palette Generator

Key features

• Eight harmony rules: complementary, analogous, triadic, tetradic, split-complementary, monochromatic, shades and tints.
• Base color via picker, validated hex input, six quick picks, or a crypto-random pleasing color.
• Every palette includes your base color and rebuilds live as you change anything.
• Click any swatch to copy its hex; each card also has individual HEX and RGB copy buttons.
• Copy all exports the whole palette as one hex per line — ready for CSS variables or design tools.
• Live preview mockup maps the palette onto a mini dashboard: darkest color as background, base as accent, lightest as text.

How it works

1. 1

   Pick a base color

   Use the swatch, type a hex, click a quick pick, or hit Random for a tasteful surprise.

2. 2

   Choose a harmony

   Tap one of the eight rules — each is labeled with its geometry, such as triadic at 120° apart or complementary at +180°.

3. 3

   Copy your colors

   Click a swatch for its hex, use the tiny buttons for HEX/RGB individually, or press Copy all for the full list.

4. 4

   Reality-check the palette

   The mockup panel shows the darkest, base and lightest colors working together as background, accent and text.

Tips for better results

• 💡Shades and tints keep your hue and saturation locked and only walk lightness — great for elevation layers in UIs.
• 💡Copy all gives one hex per line, which pastes cleanly into Tailwind configs, Figma styles or CSS custom properties.
• 💡The mockup's background/accent/text mapping is a starting point, not a rule — but it instantly exposes palettes with no usable dark color.
• 💡Hit Random a few times to explore; it stays within pleasing saturation (58–90%) and lightness (42–65%) ranges.
• 💡Before committing text colors, run the palette's extremes through the Contrast Checker.

Frequently asked questions