SeaGit UI

bySeaGit

Landing sample

Get the kit

Tailwind Color Palette Generator

Enter one brand colour and get a full Tailwind-style shade scale from 50 (near white) to 950 (near black). The scale keeps the colour's hue, so every shade still looks like your brand, and the output is ready to paste into a Tailwind project.

Each step shows its hex value and its OKLCH components. The generator runs in your browser; the colour you enter is not sent anywhere.

50
#f2f7ff
L 98% C 0.056 H 260
100
#e1ecfe
L 94% C 0.085 H 260
200
#c7dcfe
L 89% C 0.117 H 260
300
#a4c6fc
L 82% C 0.150 H 260
400
#73a8fd
L 73% C 0.175 H 260
500
#4087fc
L 64% C 0.188 H 260
600
#2b6fdc
L 56% C 0.180 H 260
700
#1d58b7
L 48% C 0.162 H 260
800
#14438f
L 40% C 0.135 H 260
900
#0c326e
L 33% C 0.113 H 260
950
#05214f
L 26% C 0.090 H 260
Tailwind v4 (@theme)
@theme {
  --color-brand-50: oklch(97.5% 0.056 259.8);
  --color-brand-100: oklch(94.0% 0.085 259.8);
  --color-brand-200: oklch(89.0% 0.117 259.8);
  --color-brand-300: oklch(82.0% 0.150 259.8);
  --color-brand-400: oklch(73.0% 0.175 259.8);
  --color-brand-500: oklch(64.0% 0.188 259.8);
  --color-brand-600: oklch(56.0% 0.180 259.8);
  --color-brand-700: oklch(48.0% 0.162 259.8);
  --color-brand-800: oklch(40.0% 0.135 259.8);
  --color-brand-900: oklch(33.0% 0.113 259.8);
  --color-brand-950: oklch(26.0% 0.090 259.8);
}
Tailwind v3 (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
      50: '#f2f7ff',
      100: '#e1ecfe',
      200: '#c7dcfe',
      300: '#a4c6fc',
      400: '#73a8fd',
      500: '#4087fc',
      600: '#2b6fdc',
      700: '#1d58b7',
      800: '#14438f',
      900: '#0c326e',
      950: '#05214f',
        },
      },
    },
  },
};

How to use it

  1. Enter a hex colour, or pick one with the colour control.
  2. Give the palette a name. It becomes the prefix of the class names, for example brand or primary.
  3. Review the 11 swatches. Check that the 500 step works as your main colour.
  4. Copy the @theme block for Tailwind v4, or the config object for Tailwind v3.

About the CSS behind it

Tailwind v4 defines colours as CSS variables inside an @theme block, and each --color-NAME-STEP variable becomes utilities such as bg-NAME-STEP. The Tailwind colour documentation describes the naming and the 50 to 950 steps. The values here use the oklch() function, which is specified in the W3C CSS Color Module Level 4.

OKLCH splits a colour into lightness (L), chroma (C, colourfulness) and hue (H). Because lightness is perceptual, you can set the 50 to 950 lightness values once and get evenly spaced steps for any hue. The generator fixes the lightness for each step, takes the hue and chroma from your input, and lowers chroma for the pale and dark steps to stay inside the sRGB gamut.

Check contrast before you use a step for text. A common practice is to put 50 to 300 behind dark text and 600 to 950 behind light text, then test the actual pairs with a contrast checker against the WCAG 2.2 minimum of 4.5:1 for normal text.

Frequently asked questions

Does this produce Tailwind's built-in colours?
No. It builds a new 50 to 950 scale from the colour you enter, keeping its hue and chroma. Tailwind's own palette is a fixed set of values, documented on its colors page. Use this generator when you need your own brand scale in the same shape.
What colour space does the scale use?
OKLCH, the perceptual colour space that CSS Color Level 4 defines. Equal steps in lightness look more even than steps in HSL, and the generator keeps the hue constant across the scale.
Why are some shades lower in saturation than my input?
Very light and very dark shades cannot hold the full chroma of a bright colour inside the sRGB gamut. The generator lowers chroma at the same lightness and hue until the colour fits, rather than clipping one channel.
How do I use the output in Tailwind v4?
Paste the @theme block into your main CSS file. Tailwind then creates utilities such as bg-brand-500 and text-brand-900 from the --color-brand-* variables. For Tailwind v3, use the config object with hex values under theme.extend.colors.

Related tools and components