CSS Color Palettes: Complete Guide

A well-structured CSS color palette is the foundation of any design system. Rather than using ad-hoc hex values throughout your codebase, a systematic palette of shades, tints, and harmonies — stored as CSS custom properties — gives you consistent colors, easy theme switching, and effortless dark mode support.

Use the generator above to create a complete palette from any base color. Choose shades (darker), tints (lighter), shades and tints combined, or color harmonies (complementary, triadic, analogous). Click any swatch to copy its hex value, then copy the full palette as CSS variables, HEX, RGB, or HSL.

How to Use This Color Palette Generator

1. Pick a base color — use the color picker or type a hex value. This is your brand's primary color.
2. Choose palette type — Shades darkens the color, Tints lightens it, "Shades + Tints" gives you both, and Harmonies generates related colors from color theory.
3. Set steps — more steps give you finer-grained palette like Tailwind's 50–950 scale.
4. Choose format — CSS Variables are best for production code. HEX, RGB and HSL are useful for specific contexts.
5. Copy — click any swatch to copy that single color, or click "Copy Code" for the full palette.

Using CSS Custom Properties for Color Palettes

CSS custom properties (CSS variables) are the industry-standard way to define color palettes. Define them on :root and use them anywhere:

:root {
  --color-primary-50:  #ede9ff;
  --color-primary-100: #d4ccff;
  --color-primary-200: #b3a8ff;
  --color-primary-300: #9080ff;
  --color-primary-400: #7c6fff;  /* base */
  --color-primary-500: #6456e0;
  --color-primary-600: #4d3fc0;
  --color-primary-700: #38299a;
  --color-primary-800: #231773;
}

/* Usage */
.button {
  background: var(--color-primary-400);
  color: var(--color-primary-50);
}
.button:hover {
  background: var(--color-primary-500);
}

For more on CSS custom properties, see our CSS Variables guide and the CSS Custom Properties deep dive.

Color Harmony Types Explained

Complementary: The color directly opposite on the color wheel (180° apart). Creates high contrast — good for calls to action against a background.

Triadic: Three colors evenly spaced (120° apart). Vibrant and balanced — common in illustrative UI design.

Analogous: Colors adjacent on the wheel (30° apart). Natural and harmonious — works well for backgrounds and gradients.

Split-complementary: Your color plus the two colors adjacent to its complement. High contrast with less tension than a pure complement.

Tetradic: Four colors at 90° intervals. Rich and complex — needs careful balance to avoid overwhelming the design.

Dark Mode with CSS Color Palettes

CSS custom properties make dark mode straightforward. Redefine your palette inside a prefers-color-scheme: dark media query or a .dark class:

:root {
  --bg: #ffffff;
  --surface: #f5f5f8;
  --text: #1a1a2e;
  --primary: #7c6fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0f;
    --surface: #13131a;
    --text: #f0f0ff;
    --primary: #9d8fff; /* slightly lighter for dark bg */
  }
}

Using palette shades in this pattern means you swap the entire theme in a few lines. See our CSS Gradient Generator to use your palette colors in gradients.

Tailwind-Style Numbered Palettes

Tailwind CSS popularized the 50–950 scale for color palettes. The numbers represent lightness — 50 is very light, 950 is very dark. This scale is useful because it's predictable: you always know that -100 is lighter than -400 across every color in your system:

:root {
  --purple-50:  #ede9ff;
  --purple-100: #d4ccff;
  --purple-200: #b3a8ff;
  --purple-300: #9080ff;
  --purple-400: #7c6fff;
  --purple-500: #6456e0;
  --purple-600: #4d3fc0;
  --purple-700: #38299a;
  --purple-800: #231773;
  --purple-900: #120a4d;
}

Frequently Asked Questions

Using your palette in gradients? Try our CSS Gradient Generator or explore the Gradient Collection for inspiration.