Color Palette Generator — Developer & Web Tools — Zapit
ZapitZapit

Color Palette Generator

Generate harmonious color palettes from a base color.

CSS Variables

:root {
  --color-1: #e9ecfc;
  --color-2: #bcc6f6;
  --color-3: #8fa1f0;
  --color-4: #627bea;
  --color-5: #3555e3;
  --color-6: #1c3cca;
  --color-7: #152e9d;
  --color-8: #0f2170;
  --color-9: #091443;
  --color-10: #050b24;
}

JSON Array

[
  "#e9ecfc",
  "#bcc6f6",
  "#8fa1f0",
  "#627bea",
  "#3555e3",
  "#1c3cca",
  "#152e9d",
  "#0f2170",
  "#091443",
  "#050b24"
]
Generate beautiful, harmonious color palettes from any base color. Choose from tints/shades, complementary, analogous, triadic, tetradic, or split-complementary harmonies and export as CSS variables or JSON.

Key Features

Harmony Types
Six harmony modes: Shades, Complementary, Analogous, Triadic, Tetradic, and Split Complementary.
Random Base
Hit the random button to instantly generate a random palette for inspiration.
Click to Copy
Click any color swatch to instantly copy its hex code to the clipboard.
CSS Variables Export
Export the palette as CSS custom properties (--color-1 through --color-N).
JSON Export
Export the palette as a JSON array of hex color strings.

How to Use

  1. 1Pick a base color using the color picker or type a hex code.
  2. 2Select a harmony type from the tabs.
  3. 3Click any swatch to copy its hex code.
  4. 4Use the CSS Variables or JSON export panels to copy the full palette.

Frequently Asked Questions