Tailwind Color Palette Generator in OKLCH

How the shades are generated

Tailwind's built-in colours come in eleven steps: 50, 100, 200 through 900, and 950. To make a custom Tailwind colour that sits comfortably beside them, this generator works in OKLCH, the colour space Tailwind CSS v4 uses for its own default palette. OKLCH describes a colour by perceptual lightness (L), chroma (C, roughly saturation) and hue (H). Unlike HSL, equal steps in OKLCH lightness look like equal steps to the eye, so a ramp built on it does not have the muddy middle or the jump between 400 and 500 that HSL-based generators often produce.

Your base colour is converted from sRGB to OKLCH using Björn Ottosson's published OKLab matrices. It is placed on the shade whose target lightness is closest, using targets modelled on Tailwind v4's default blue (about 97% for 50, 62% for 500 and 28% for 950). You can override that with Base colour becomes, for example to force a brand colour to be exactly 600. The other shades are spaced around it so lightness always decreases from 50 to 950, chroma follows a curve that is low at the pale end and peaks around 500 to 600, and hue is held constant.

Some combinations of lightness, chroma and hue do not exist on an ordinary sRGB screen, especially bright yellows and very saturated blues. Each shade is checked and, if it falls outside sRGB, its chroma is reduced step by step until it fits, keeping lightness and hue unchanged. That is why the most saturated shades of some colours look slightly calmer than the input. The shade marked with a star is your exact input.

Contrast on every swatch

Each swatch shows its WCAG 2 contrast ratio against white and against black text, with the level it reaches: AA needs 4.5:1 for body text, AAA needs 7:1, and AA Large needs 3:1 for text around 24px, or 19px bold. Use this to choose pairings before you write any classes. On typical generated palettes, white text reaches AA from about 600 or 700 upwards and black text reaches it on 50 to roughly 500, but the crossover point shifts with hue and with where your base colour landed, so check the numbers rather than assume. The swatch label switches between black and white to whichever contrasts better. Click any swatch to copy its hex value.

Tailwind v4 and v3 output

Tailwind v4 is configured in CSS. Copy the @theme block into the stylesheet that imports Tailwind and you immediately get bg-brand-500, text-brand-700, border-brand-200 and every other colour utility for your name. The values are written as oklch() so they match the format of the built-in palette. If you add a second custom colour, generate it separately and paste its lines into the same @theme block.

Tailwind v3 reads colours from tailwind.config.js. The v3 tab writes a theme.extend.colors object with hex values, which keeps the default palette and adds yours alongside it.

The colour name is lowercased and hyphenated so it is a valid CSS custom property and class name. All conversions run in your browser in plain TypeScript. To convert a single colour between formats, use the Color Converter.