Stepped Color Shade Generator - Online Tailwind‑Style Palette

A stepped color shade generator creates a full palette of 10 shades (50 to 900) from a single base color — just like the system used by Tailwind CSS. It uses HSL color space interpolation to produce lighter tints (50–400) and darker shades (600–900), with the base color at the 500 level. This gives you a professional, harmonious color scale ready for design systems, UI components, and branding.

Tailwind uses a numeric scale from 50 (lightest tint) to 900 (darkest shade). The 500 level is the "base" or reference color. Lower numbers (50–400) are progressively lighter — ideal for backgrounds, hover states, and subtle accents. Higher numbers (600–900) are progressively darker — perfect for text, borders, and emphasis. This 10-step scale provides enough granularity for complex UI without overwhelming designers.

Click the "Copy Tailwind Config" button to get a JavaScript object ready to paste into your tailwind.config.js under theme.extend.colors. Alternatively, use "Copy CSS Vars" to get custom properties (--color-50 through --color-900) that you can drop into any CSS file. The "Copy HEX List" option gives you plain hex values — great for Figma, Sketch, or documentation.

HSL (Hue, Saturation, Lightness) maps directly to how humans perceive color. By adjusting the Lightness value while keeping the Hue constant, you get perceptually uniform shades that feel natural. RGB, on the other hand, mixes red, green, and blue channels — making it unintuitive for lightening or darkening colors while preserving their character. That's why Tailwind and most modern design tools use HSL-based shade generation.

This generator automatically produces all 10 shades from your base color using an optimized HSL interpolation algorithm. While you cannot manually tweak individual shades in this tool, you can copy the generated palette and fine-tune specific levels in your own CSS or Tailwind config. Many designers use the auto-generated palette as a starting point, then adjust the 50 and 900 extremes for their specific needs.

Choose a base color with moderate saturation (50–80%) and mid-range lightness (40–60%). Colors that are too light (like pastels) won't have enough room for the 50–400 tints, while colors that are too dark won't produce meaningful 600–900 shades. The best base colors are vibrant but not extreme — think Tailwind's blue-500 (#3b82f6) or indigo-500 (#6366f1). Use the preset colors above as a guide!

The generated shades follow Tailwind's distribution, which generally provides good contrast ratios. However, WCAG compliance depends on usage — pairing a 50-level background with white text will fail contrast checks. For accessible designs, use darker shades (700–900) for text on light backgrounds, and lighter shades (50–300) for backgrounds with dark text. Always verify with a contrast checker for critical content.