Base colour

Name

Your colour is kept exactly and placed at whichever step its lightness is nearest — here, 500. The rest are built around it in OKLCH, so the steps are evenly spaced to the eye and none of them clip out of sRGB and shift hue at the ends. Lightness and chroma targets are measured from Tailwind's own default palettes.

100

200

300

400

yours500

600

700

800

900

950

50#F4F8FFL 0.978
100#E6F0FFL 0.952
200#D0E2FFL 0.908
300#B0CEFFL 0.846
400#7FB0FFL 0.755
500#3B82F6L 0.623
600#2B72E5L 0.573
700#195AC0L 0.490
800#124698L 0.413
900#10397AL 0.358
950#051D47L 0.242

CSS custom properties

:root {
  --brand-50: #f4f8ff;
  --brand-100: #e6f0ff;
  --brand-200: #d0e2ff;
  --brand-300: #b0ceff;
  --brand-400: #7fb0ff;
  --brand-500: #3b82f6;
  --brand-600: #2b72e5;
  --brand-700: #195ac0;
  --brand-800: #124698;
  --brand-900: #10397a;
  --brand-950: #051d47;
}

Tailwind config

colors: {
      brand: {
        50: '#f4f8ff',
        100: '#e6f0ff',
        200: '#d0e2ff',
        300: '#b0ceff',
        400: '#7fb0ff',
        500: '#3b82f6',
        600: '#2b72e5',
        700: '#195ac0',
        800: '#124698',
        900: '#10397a',
        950: '#051d47',
      },
    },

How it works

1Set your colour and give the scale a name.

2Your colour is kept exactly and placed at whichever step its lightness is nearest — the scale is built around it.

3Check the L column: it falls step by step, which is what makes the ramp even to the eye rather than only on paper.

4Copy the CSS custom properties, or the Tailwind config block.

Tailwind Shade Generator

How it works

Related tools in Colour