Back to Tools

Color Palette Generator

Generate harmonious color palettes from a base color. Export as CSS variables or Tailwind config.

Base Color

Harmony Type

Harmony Palette

Shade Scale

#3BDFF6

rgb(59, 223, 246)

hsl(187, 91%, 60%)

#3B82F6

rgb(59, 130, 246)

hsl(217, 91%, 60%)

#523BF6

rgb(82, 59, 246)

hsl(247, 91%, 60%)

#AF3BF6

rgb(175, 59, 246)

hsl(277, 91%, 60%)

#3BF6AF

rgb(59, 246, 175)

hsl(157, 91%, 60%)

CSS Variables

:root {
  --color-1: #3bdff6;
  --color-2: #3b82f6;
  --color-3: #523bf6;
  --color-4: #af3bf6;
  --color-5: #3bf6af;

  --color-100: #e7effe;
  --color-200: #b9d2fc;
  --color-300: #8bb5fa;
  --color-400: #5c97f8;
  --color-500: #2e7af5;
  --color-600: #0b5fe9;
  --color-700: #094cbb;
  --color-800: #06398d;
  --color-900: #04275f;
  --color-1000: #021431;
}

Tailwind Config

"primary": {
  "100": "#e7effe",
  "200": "#b9d2fc",
  "300": "#8bb5fa",
  "400": "#5c97f8",
  "500": "#2e7af5",
  "600": "#0b5fe9",
  "700": "#094cbb",
  "800": "#06398d",
  "900": "#04275f",
  "950": "#021431"
}