Color Palette Generator

Generate harmonious color schemes

Complementary• Complementary | 2 colors

Harmony:

Export:

Show shades

Configuration

Base Color

Harmony Type

Show shades (50-950)

Export Format

Palette & ExportComplementary | 2 colors

Complementary Palette

Primary Shades

CSS Export

:root {
  /* Primary Color */
  --color-primary: #3b82f6;

  /* Harmony Colors */
  --color-1: #3c83f6;
  --color-2: #f6af3c;

  /* Shades */
  --color-primary-50: #f0f6fe;
  --color-primary-100: #e2ecfe;
  --color-primary-200: #bbd4fc;
  --color-primary-300: #8fb8fa;
  --color-primary-400: #5996f7;
  --color-primary-500: #0b64f4;
  --color-primary-600: #0a54cd;
  --color-primary-700: #0846aa;
  --color-primary-800: #063684;
  --color-primary-900: #052861;
  --color-primary-950: #021431;
}

About Color Palette Generator

Free online color palette generator. Create complementary, analogous, triadic, and monochromatic palettes. Export as CSS, Tailwind, SCSS.

Color Converter
Contrast Checker
Gradient Generator

About Color Palette Generator

Related Tools