Tailwind Shade Generator

Tailwind CSS uses a numeric shade scale from 50 (lightest) to 950 (darkest) for each color. The 500 shade is typically the base or mid-point color. Lower numbers (50-200) are tints used for backgrounds, higher numbers (700-950) are shades used for text and borders. This scale provides consistent, design-system-ready color ramps that ensure visual harmony across your entire application.

The 500 shade is the conventional base or primary color in Tailwind's scale. It serves as the anchor from which lighter tints and darker shades are generated. Use 500 for primary buttons and interactive elements, 50-100 for page backgrounds, 200-300 for borders and dividers, 600-700 for text on light backgrounds, and 800-950 for text in dark mode.

Our generator uses perceptually uniform interpolation in the OKLCH color space. Starting from your base color, it adjusts lightness while maintaining consistent chroma and hue. Unlike simple HSL lightness adjustments, OKLCH ensures each step looks evenly spaced to the human eye. The result matches the quality of hand-tuned scales like Tailwind's default palette.

A shade is created by adding black to a color (reducing lightness), while a tint is created by adding white (increasing lightness). In Tailwind's scale, numbers above 500 are shades (darker) and numbers below 500 are tints (lighter). A tone is created by adding gray (reducing saturation). Our generator produces the full range from near-white tints to near-black shades.

Absolutely. The generated shades are standard hex color codes that work with any CSS framework, design tool, or platform. You can use them in Bootstrap custom themes, Material UI palettes, CSS custom properties (variables), Figma styles, or plain CSS. The Tailwind config export format is provided for convenience but the raw hex values are universally compatible.