Tailwind CSS Color Palette Generator, 50-950 Shade Scale & Config Exporter
Building a design system in Tailwind CSS requires generating a complete 11-step color scale (ranging from ultra-light 50 shades for backgrounds to deep 950 shades for dark-mode text and borders). The Tailwind Color Palette Generator transforms a single base brand color into a full, perceptually balanced 50-to-950 swatch palette, exporting production-ready tailwind.config.js code.
A product designer enters a brand hex code: #3B82F6 (Electric Blue) with palette name brand. The algorithm anchors #3B82F6 as the core 500 shade, mapping the color into perceptual HSL/OKLCH color space. It generates an 11-shade progression: 50 (#EFF6FF - 97% lightness), 100 (#DBEAFE), 200 (#BFDBFE), 300 (#93C5FD), 400 (#60A5FA), 500 (#3B82F6 - base), 600 (#2563EB), 700 (#1D4ED8), 800 (#1E40AF), 900 (#1E3A8A), and 950 (#172554 - 12% lightness). The generator displays a visual swatch grid and outputs a clean JavaScript object ready to paste into theme.extend.colors.
The module enables developers to construct consistent, production-ready Tailwind design tokens without manually picking and adjusting individual shades.
Core Architecture & Mathematical Formula
Shade Interpolation: Hex ➔ Perceptual Color Space (HSL/OKLCH) ➔ Curvature Mapping [50: 97% L ➔ 500: Base L ➔ 950: 12% L] ➔ Hex
Maps base brand color into perceptual lightness curves; generates 11 calibrated steps (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) with smooth saturation retention.
Best Practices & Essential Guidelines
- Anchor Your Primary Brand Color at the 500 Shade: The 500 shade serves as the standard baseline for buttons, active tabs, and primary actions in Tailwind CSS conventions.
- Use 50 and 100 Shades for Subtle Component Backgrounds: Use ultra-light 50 and 100 shades for alert banners, table row striping, and tag badges, paired with 700 and 800 shades for high-contrast text.
- Utilize 900 and 950 Shades for Dark Mode Foundations: In dark-mode design systems, 900 and 950 shades serve as dark panel backgrounds and border dividers, maintaining subtle brand tinting.
- Verify Contrast Ratios Across Generated Combinations: Before finalizing your design system, verify that pairing your 700/800 text colors against 50/100 backgrounds satisfies WCAG AA (4.5:1) accessibility criteria.
