Skip to content
Convertto

Tailwind Colour Shade Generator

Generate a full 50–950 Tailwind colour scale from a single brand colour.

To generate a Tailwind colour scale, pick your brand colour and it becomes the 500 shade, with 50 through 950 derived by adjusting lightness and desaturating the pale end. Output is ready to paste into a Tailwind v4 @theme block or a v3 config file.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

What do the Tailwind numbers mean?

A lightness scale from 50, the lightest, to 950, the darkest, with 500 as the base. The numbering exists so a component can reference 600 for a hover state without knowing which colour it is.

How to use the tailwind colour shade generator

  1. 1Pick the brand colour.
  2. 2Enter or paste your colour name.
  3. 3The result appears immediately — copy or download it.

Embed this tool

Put the working tailwind colour shade generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.Glassmorphism CSS GeneratorCreate frosted-glass CSS with backdrop blur, transparency and a subtle border.CSS Gradient GeneratorBuild linear, radial and conic CSS gradients and copy the code.Colour ConverterConvert any colour to HEX, RGB, HSL, HSV, CMYK, LAB and native code — with contrast, tints and harmonies.Blob Shape GeneratorDesign organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.

Last updated

More color tools