Color Palette Generator

Generate harmonious brand palettes from one seed color using color theory rules. Copy CSS variables or Tailwind config when you're ready to ship.
Open Color Checker
Free Tool Design System
Tools Overview

Color Palette Generator

Generate harmonious brand palettes from a seed color using color theory rules, then copy CSS variables and Tailwind config.

Catalog Context Part of Design System

See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.

PreviousNext
Next Move - Strong resultDesign System

Recommended: Color Blindness CVD Simulator

Palette is ready. Verify it works for color-blind users next.

Simulate color blindness

Seed Color

Pick a base color and harmony rule to build the palette.

Current base

#7C3AED

HSL 262° / 83% / 58%

Generated Palette

Click any color to copy its hex code.

Shades

Tints

CSS Variables

:root {
  --color-1: #7C3AED;
  --color-2: #ACED3B;
}

Tailwind Config

colors: {
  brand: {
    1: '#7c3aed',
    2: '#aced3b',
  }
}