Export

CSS variables

:root {
  --color-brand-50: #eff4fe;
  --color-brand-100: #d9e3f9;
  --color-brand-200: #b9ccf1;
  --color-brand-300: #90b1ee;
  --color-brand-400: #6193ed;
  --color-brand-500: #3b82f6;
  --color-brand-600: #296de7;
  --color-brand-700: #2257c3;
  --color-brand-800: #1d449c;
  --color-brand-900: #1b367b;
  --color-brand-950: #0f204e;
  --color-brand-neutral-50: #f0f4fb;
  --color-brand-neutral-100: #dfe3e9;
  --color-brand-neutral-200: #c8cbd2;
  --color-brand-neutral-300: #adb1b7;
  --color-brand-neutral-400: #91959b;
  --color-brand-neutral-500: #84878d;
  --color-brand-neutral-600: #72767b;
  --color-brand-neutral-700: #5d6066;
  --color-brand-neutral-800: #494c51;
  --color-brand-neutral-900: #3a3d42;
  --color-brand-neutral-950: #222429;
}

Tailwind config

colors: {
  brand: {
    50: '#eff4fe',
    100: '#d9e3f9',
    200: '#b9ccf1',
    300: '#90b1ee',
    400: '#6193ed',
    500: '#3b82f6',
    600: '#296de7',
    700: '#2257c3',
    800: '#1d449c',
    900: '#1b367b',
    950: '#0f204e',
  },
  brand-neutral: {
    50: '#f0f4fb',
    100: '#dfe3e9',
    200: '#c8cbd2',
    300: '#adb1b7',
    400: '#91959b',
    500: '#84878d',
    600: '#72767b',
    700: '#5d6066',
    800: '#494c51',
    900: '#3a3d42',
    950: '#222429',
  }
}

JSON

{
  "brand": {
    "50": "#eff4fe",
    "100": "#d9e3f9",
    "200": "#b9ccf1",
    "300": "#90b1ee",
    "400": "#6193ed",
    "500": "#3b82f6",
    "600": "#296de7",
    "700": "#2257c3",
    "800": "#1d449c",
    "900": "#1b367b",
    "950": "#0f204e"
  },
  "brand-neutral": {
    "50": "#f0f4fb",
    "100": "#dfe3e9",
    "200": "#c8cbd2",
    "300": "#adb1b7",
    "400": "#91959b",
    "500": "#84878d",
    "600": "#72767b",
    "700": "#5d6066",
    "800": "#494c51",
    "900": "#3a3d42",
    "950": "#222429"
  }
}

Color Palette Generator

Pick one base color and get a complete Tailwind-style shade scale — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — computed in the OKLCH color space so light ends stay vivid, dark ends keep the hue, and the mid tone never drifts.

The 500 step always equals your input color, so the scale is anchored to what you picked.
Lightness steps follow a fixed perceptual curve; chroma is scaled per step and clamped to stay inside sRGB.
The hue gains a slight warm shift on light steps and a cool shift on dark steps, matching how hand-tuned palettes behave.

An optional neutral row generates a gray scale that carries a hint of the base hue — the same idea as Tailwind's slate or zinc. The tint slider controls how much hue survives: 0% is pure gray, 100% is a clearly colored neutral.

Click any swatch to copy its hex value. Names are sanitized into URL-friendly tokens (My Brand! becomes my-brand).

Export

CSS variables: --color-brand-50 through --color-brand-950, plus a *-neutral block when enabled, wrapped in :root.
Tailwind config: a colors.brand snippet with every step, ready for tailwind.config.js or the CSS @theme block.
JSON: both rows keyed by step for design-token pipelines.

The random button picks a new mid-tone base color. Everything runs locally in your browser.

Color Palette Generator

Shade scale

Export

Color Palette Generator

Export

Related tools

Color Converter

Gradient Generator

Image Color Extractor & Picker