# 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.

**URL:** https://convertto.tech/t/tailwind-shade-generator
**Category:** Color Tools (https://convertto.tech/c/color-tools)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [Colour Converter](https://convertto.tech/t/color-converter): Convert any colour to HEX, RGB, HSL, HSV, CMYK, LAB and native code — with contrast, tints and harmonies.
- [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [Colour Palette Generator](https://convertto.tech/t/color-palette-generator): Build harmonious palettes — complementary, triadic, analogous and monochromatic.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.