Colour Palette Generator

Build a harmonious palette from one colour, or pull the seed straight out of an image. Export as CSS variables, a Tailwind config, or JSON.

Free, unlimitedRuns entirely in your browser

1 · Seed colour

2 · Scheme

CSS

:root {
  --brand-50: #4EFFF8;
  --brand-200: #00DDD4;
  --brand-400: #00817C;
  --brand-600: #DD0009;
  --brand-800: #7F0D11;
}

Tailwind

colors: {
  brand: {
    '50': '#4EFFF8',
    '200': '#00DDD4',
    '400': '#00817C',
    '600': '#DD0009',
    '800': '#7F0D11',
  },
}

JSON

{
  "50": "#4EFFF8",
  "200": "#00DDD4",
  "400": "#00817C",
  "600": "#DD0009",
  "800": "#7F0D11"
}