Skip to content
All tools

Color

Color Palette Generator

Build a five-color system from one starting point, then export it as CSS variables.

Harmony

:root {
  --palette-1: #ba0a12;
  --palette-2: #d65008;
  --palette-3: #f1b606;
  --palette-4: #d7f917;
  --palette-5: #8bfa30;
}

Give each palette color a job

  1. Choose a starting color and a harmony mode to generate five related colors.
  2. Compare the result with your brand and assign roles such as background, text, accent, and supporting surfaces.
  3. Copy the CSS variables, then check the specific text and background pairs in the contrast checker.

Color harmony is not a contrast guarantee. Verify every foreground/background combination you actually use, including light and dark themes. Avoid conveying status by color alone.

CSS custom properties on MDN

Turn a palette into interface roles

:root {
  --page: #ffffff;
  --ink: #111827;
  --accent: #f2b705;
}

.action {
  color: var(--ink);
  background: var(--accent);
}

Naming tokens by role makes their intended use clear. Five harmonious colors are a starting point; you may still need neutral shades and separate error, success, and focus colors.