Color Palette Generator

Create color palettes, HEX combinations, complementary colors, and design-ready swatches.

Base color

#2563EB

Mode

Analogous

Swatches

6

Palette settings

Generate HEX swatches from a base color and harmony mode.

Harmony mode

Related calculators

What is the color palette generator?

This tool creates harmonious color palettes from one base color using color theory. The generated colors can be copied as HEX, RGB, and HSL, or exported as CSS variables, Tailwind config, JSON, SCSS, or JavaScript arrays.

The source page is aimed at web and app UI, brand identity, marketing assets, social feeds, presentations, and accessible design. It includes WCAG contrast checks and color-vision simulation so palettes can be tested beyond visual taste.

Six harmony modes

Palette rules

  • Monochromatic changes only lightness and saturation from one hue, making a safe and consistent palette.
  • Complementary uses colors 180 degrees apart on the color wheel for strong contrast, useful for CTA buttons and banners.
  • Analogous uses neighboring colors around +/- 30 degrees for natural, comfortable palettes.
  • Triadic uses three colors 120 degrees apart, balancing variety and harmony.
  • Tetradic uses four colors 90 degrees apart, offering richness but requiring careful balance.
  • Split-complementary combines the base color with the two colors beside its complement, keeping contrast while reducing tension.

Customization and workflow

  • Users can choose a base color with the color picker, enter a HEX code directly, press random, or use the spacebar to explore random colors.
  • Palette size can be adjusted from 3 to 10 colors, and individual colors can be locked while regenerating the rest.
  • CSS variable export can be pasted into :root, and Tailwind export can be copied into the project config.
  • The brand design guidance includes the 60-30-10 rule: 60% primary/background, 30% secondary surfaces, and 10% accent/CTA.

Accessibility and color theory

WCAG checks

  • WCAG AA requires 4.5:1 minimum contrast for normal text.
  • AA Large allows 3:1 for 18 pt or larger text, or 14 pt bold text.
  • AAA requires 7:1 and is the stricter target for highly accessible content.
  • The color-vision simulation checks conditions such as red-green, protan, and blue-yellow deficiencies, which the source describes as affecting about 8% of men and 0.5% of women.

Theory notes

  • The color wheel arranges 12 basic colors and dates in the source guide to Isaac Newton’s prism experiment in 1666.
  • HEX, RGB, and HSL represent the same colors in different formats; HSL is often easier for adjusting hue, saturation, and lightness.
  • Recent 20 palettes are auto-saved in local storage, and favorite palettes can be pinned.