Skip to main content
Back to Colors generators

Colors

Tailwind Color Shade Generator

Used by developers, writers, and creators worldwide.

A Tailwind color shade generator builds a full 50-to-900 shade scale from a single base hue, the way Tailwind CSS organises its color palette. Tailwind's genius is its consistent shade scale — a light 50 for backgrounds, a mid 500 for buttons, a deep 900 for text — and recreating that for a custom brand color by hand is tedious and error-prone. This tool takes one hue and generates the whole ladder of ten shades, each with a hex code you can copy. Enter a hue from 0 to 360 and generate. It is ideal for Tailwind users building a custom color, design-system authors, and developers who want a coherent set of tints and shades. Drop the values into your config or design tokens and you have a ready-made, harmonious scale for one color.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Enter a base hue from 0 to 360.
  2. Click Generate to produce the 50-900 shade scale.
  3. Copy the hex code for any shade.
  4. Paste the values into your Tailwind config or tokens.

Use Cases

  • •Building a custom color for a Tailwind config
  • •Creating design-system color tokens
  • •A consistent set of tints and shades for a brand hue
  • •Light-to-dark backgrounds, buttons, and text colors
  • •Prototyping a coherent UI color scale

Tips

  • →Use 50-200 for backgrounds and 700-900 for text.
  • →Pick 500 or 600 as your main interactive color.
  • →Keep one hue per scale for consistency.
  • →Check contrast when pairing a shade with text.

FAQ

what is a tailwind color scale

Tailwind organises each color into a numbered scale from 50 (lightest) to 900 (darkest), giving you a consistent ladder of shades for backgrounds, components, and text. The scale keeps a color coherent across an entire interface.

how do i create a custom tailwind color

You need a full 50-900 shade scale for your base hue, which you add to your Tailwind config. This generator produces that whole ladder from one hue, so you can paste the hex values straight into your theme instead of mixing each shade by hand.

which tailwind shade should i use

A common pattern is light shades (50-200) for backgrounds, mid shades (400-600) for buttons and accents, and dark shades (700-900) for text. Using the scale consistently keeps your interface coherent and easy to maintain.