Color palette generator

Build harmonious palettes from a base hex color. Lock favorites, regenerate unlocked swatches, and export CSS variables or a Tailwind snippet — all in your browser.

Color palette generator

Lock colors you like, then regenerate the rest.

Base

Pick

#3a6fed

hsl(222, 83%, 58%)

Pick

#403aed

hsl(242, 83%, 58%)

Pick

#7c3aed

hsl(262, 83%, 58%)

Pick

#b83aed

hsl(282, 83%, 58%)

Pick

#ed3ae7

hsl(302, 83%, 58%)

CSS variables

:root {
  --color-1: #3a6fed;
  --color-2: #403aed;
  --color-3: #7c3aed;
  --color-4: #b83aed;
  --color-5: #ed3ae7;
}

Tailwind snippet

// tailwind.config — theme.extend.colors
brand: {
        100: "#3a6fed",
        200: "#403aed",
        300: "#7c3aed",
        400: "#b83aed",
        500: "#ed3ae7",
}