Color Palette Generator

Pick a base color to build a 50-900 shade scale plus complementary, analogous and triadic colors. Click any swatch to copy its hex.

Base color

Hex

Shade scale (50-900)

Complementary

Analogous

Triadic

Export

CSS custom properties

:root {
  --brand-50: #f1f1fe;
  --brand-100: #dedffc;
  --brand-200: #bdbff9;
  --brand-300: #9395f5;
  --brand-400: #6063f1;
  --brand-500: #2c30ec;
  --brand-600: #1317d3;
  --brand-700: #0f12a8;
  --brand-800: #0b0e7e;
  --brand-900: #080954;
}

Tailwind config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#f1f1fe",
          100: "#dedffc",
          200: "#bdbff9",
          300: "#9395f5",
          400: "#6063f1",
          500: "#2c30ec",
          600: "#1317d3",
          700: "#0f12a8",
          800: "#0b0e7e",
          900: "#080954",
        },
      },
    },
  },
};

JSON

{
  "base": "#6366f1",
  "brand": {
    "50": "#f1f1fe",
    "100": "#dedffc",
    "200": "#bdbff9",
    "300": "#9395f5",
    "400": "#6063f1",
    "500": "#2c30ec",
    "600": "#1317d3",
    "700": "#0f12a8",
    "800": "#0b0e7e",
    "900": "#080954"
  },
  "complementary": "#f1ee63",
  "analogous": [
    "#63adf1",
    "#a763f1"
  ],
  "triadic": [
    "#f16366",
    "#66f163"
  ]
}

Runs locally. Scale steps hold hue and saturation while stepping HSL lightness; the Aa badge shows the higher-contrast text color per WCAG 2.1.