Base colour

How to Use

Enter a base colour

Type any colour you want as the 500-level colour for your Tailwind scale.

Generate the scale

Click Generate and the tool interpolates from white (50) through your colour (500) to black (950).

Copy to your project

Use the Copy CSS button to grab the full colour scale for your tailwind.config.js.

About Tailwind shades

Tailwind CSS colour scales range from 50 (lightest) to 950 (darkest) with 500 as the base. This tool generates a full 11-step scale from any colour by interpolating toward white at the light end and black at the dark end, matching Tailwind's design system conventions.

About Tailwind Shades

Tailwind projects often need a brand colour extended into a full scale of shades, and generating them by eye produces uneven results. ILikePdf Tailwind Shades builds the entire 50-to-950 shade scale from a single base colour with perceptually spaced steps, previews it as a vertical swatch list, and exports it ready to paste into tailwind.config.js. It is the quickest path from one brand colour to a complete, consistent utility palette.

How to generate Tailwind colour shades Tailwind Shades

Step 1: Enter a base colour for your custom palette.

Step 2: The tool generates shades from 50 to 950 automatically.

Step 3: Preview the full scale as a vertical swatch list.

Step 4: Copy the shades as Tailwind config entries.

Step 5: Paste them into your tailwind.config.js and use them in classes.

Common use cases for Tailwind Shades

Create custom brand colours for Tailwind CSS projects.
Extend default palettes with on-brand shades.
Build accessible shade scales for UI components.
Convert a single brand colour into a full utility scale.

Pro tips

Shade 500 is typically your base colour; 50–300 for light surfaces, 700–900 for text on light backgrounds.
Generated scales are perceptually spaced for consistency.
Output is ready to paste — no manual adjustment.

Was this tool helpful? Rate it

Tap a star to rate.

Tailwind Shades