Gradient Palette Generator

Build a harmonious color palette from a base color and a color-theory scheme, then export it as CSS variables, JSON, or a Tailwind config. All computed in HSL.

Base color

#6366f1

Scheme

Gradient

Swatches

CSS variables

:root {
  --color-1: #64adf2;
  --color-2: #6467f2;
  --color-3: #a864f2;
}

JSON

[
  "#64adf2",
  "#6467f2",
  "#a864f2"
]

Tailwind config

module.exports = {
  theme: {
    extend: {
      colors: {
        palette: {
        "10": "#64adf2",
        "20": "#6467f2",
        "30": "#a864f2",
        },
      },
    },
  },
};