Color Palette Generator — Build Color Palettes from a Base Color

A color palette generator creates sets of colors that work well together by applying color theory relationships to a single base color. Starting from one color, it generates complementary colors (opposite on the color wheel), analogous colors (adjacent), and triadic colors (evenly spaced around the wheel).

Use the Color Picker to select a base color and convert between color formats.

Color theory basics

Colors relate to each other based on their position on a color wheel. The wheel arranges hues 0–360°, with related colors at specific angular distances.

The color wheel hue map

0°   = Red
30°  = Orange
60°  = Yellow
120° = Green
180° = Cyan
240° = Blue
270° = Purple
300° = Magenta
360° = Red (same as 0°)

By rotating hue angles, you derive color relationships.

Color harmony schemes

Complementary

Two colors directly opposite on the wheel (180° apart).

Base: hsl(30, 90%, 50%)    = Orange
Complement: hsl(210, 90%, 50%) = Blue

High contrast, vibrant. Use sparingly — complementary colors can vibrate against each other if used in large equal areas. Better for accent + background relationships.

Example: Orange + Blue, Red + Green, Yellow + Purple

Analogous

Three to five colors adjacent on the wheel (30° steps).

Base: hsl(30, 85%, 50%)   = Orange
+30°: hsl(60, 85%, 50%)   = Yellow
-30°: hsl(0, 85%, 50%)    = Red

Harmonious, low contrast. Feels natural — like a sunset gradient. Good for backgrounds and monochromatic designs.

Triadic

Three colors equally spaced 120° apart.

Base: hsl(0, 80%, 50%)    = Red
+120°: hsl(120, 80%, 50%) = Green
+240°: hsl(240, 80%, 50%) = Blue

High energy, balanced. All three colors are equally prominent. Often used in playful, vibrant designs.

Split-complementary

Base color + two colors adjacent to its complement (complement ±30°).

Base: hsl(30, 80%, 50%)     = Orange
Complement: 210°
Split: hsl(180, 80%, 50%)   = Cyan
Split: hsl(240, 80%, 50%)   = Blue

Similar visual impact to complementary but less tension. The two split colors create variety while the base stands out.

Tetradic (Square)

Four colors equally spaced 90° apart.

hsl(0, 75%, 50%)   = Red
hsl(90, 75%, 50%)  = Chartreuse
hsl(180, 75%, 50%) = Cyan
hsl(270, 75%, 50%) = Purple

Rich, complex palettes. Hard to balance — usually one color dominates, others serve as accents.

Monochromatic

One hue at multiple lightness/saturation values.

Base hue: 220 (blue)

Dark background:   hsl(220, 30%, 10%)
Surface:           hsl(220, 25%, 18%)
Muted accent:      hsl(220, 40%, 30%)
Text:              hsl(220, 20%, 85%)
Bright accent:     hsl(220, 90%, 60%)

Safe, professional, easy to control. Monochromatic designs rarely clash. Tailwind’s single-color “shade” system uses this approach.

Building a design system palette

Professional design palettes combine:

1. Primary color: Your brand color, used for key actions and accents

2. Neutral scale: Grays for backgrounds, surfaces, text

:root {
  --gray-50:  #f9fafb;  /* Page background */
  --gray-100: #f3f4f6;  /* Card background */
  --gray-200: #e5e7eb;  /* Borders */
  --gray-400: #9ca3af;  /* Placeholder text */
  --gray-700: #374151;  /* Body text */
  --gray-900: #111827;  /* Headings */
}

3. Semantic colors: Status and state colors

:root {
  --success: hsl(142, 76%, 36%);  /* Green */
  --warning: hsl(38, 92%, 50%);   /* Amber */
  --error:   hsl(4, 86%, 58%);    /* Red */
  --info:    hsl(213, 94%, 68%);  /* Blue */
}

4. Tints and shades: 5–10 lightness steps of the primary color

Generating palettes in CSS

/* Using HSL for systematic palette generation: */
:root {
  --primary-h: 220;
  --primary-s: 90%;
  
  --primary-100: hsl(var(--primary-h), var(--primary-s), 95%);
  --primary-200: hsl(var(--primary-h), var(--primary-s), 85%);
  --primary-300: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-400: hsl(var(--primary-h), var(--primary-s), 60%);
  --primary-500: hsl(var(--primary-h), var(--primary-s), 50%);  /* Base */
  --primary-600: hsl(var(--primary-h), var(--primary-s), 40%);
  --primary-700: hsl(var(--primary-h), var(--primary-s), 30%);
  --primary-800: hsl(var(--primary-h), var(--primary-s), 20%);
  --primary-900: hsl(var(--primary-h), var(--primary-s), 12%);
}

Change --primary-h to change the entire brand color.

Accessibility in color palettes

Every color combination used for text must meet WCAG contrast requirements:

• AA: 4.5:1 for normal text, 3:1 for large text
• AAA: 7:1 for normal text

Common failures in generated palettes:

• Light text on light backgrounds (especially primary-200 on white)
• White text on medium-lightness colors (primary-400, primary-500 often fail at 4.5:1)
• Gray on gray (gray-400 text on gray-100 background often fails)

Test every text/background combination in your palette with a contrast checker.

Dark mode palettes

Dark mode reverses the lightness axis but uses the same hues:

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(220, 20%, 8%);
    --surface: hsl(220, 20%, 13%);
    --border: hsl(220, 20%, 20%);
    --text: hsl(220, 10%, 90%);
    /* Primary color: adjust lightness only */
    --primary-500: hsl(220, 90%, 65%);  /* Lighter for dark bg contrast */
  }
}

Related tools

• Color Picker — pick and convert colors between formats
• HSL Color Guide — programmatic color manipulation
• WCAG Contrast — accessibility color requirements