What Is the Tailwind Color Scale Generator?
Generate custom Tailwind CSS color scales from a single base color. Create 50-950 shade scales that match Tailwind's distribution pattern.
Why Use This Tool?
Tailwind's default palette doesn't cover every brand color. This tool generates a full 50-950 shade scale from any base color, matching Tailwind's lightness distribution for seamless integration.
How to Use This Tailwind Color Scale
- Enter a base color — Paste a hex code for the color you want to build a scale around.
- Generate the scale — The tool creates a full Tailwind-style shade scale from 50 (lightest) to 950 (darkest) based on your input.
- Preview the palette — See all shades rendered as swatches with their hex values and contrast ratios against white and black text.
- Export for Tailwind — Copy the complete
tailwind.config.js color extension, ready to paste into your project.
Tips and Best Practices
- → Put your brand color at 500. The 500 shade is the default/primary in Tailwind's scale. Center your brand color there and generate lighter (50–400) and darker (600–950) variants around it.
- → Test contrast at every level. Light shades (50–200) pair with dark text; dark shades (700–950) pair with white text. The middle range (300–600) is tricky — always verify contrast.
- → Generate scales for all brand colors. Create full scales for primary, secondary, accent, and neutral colors. Consistent shade scales make component styling predictable and systematic.
- → Use 950 for darkest backgrounds. Tailwind v3.3+ added the 950 shade for very dark backgrounds, especially useful for dark mode designs.
Frequently Asked Questions
How is the scale generated?
The tool uses perceptual color math (OKLCH) to distribute shades evenly across the lightness range. The base color is placed at the 500 position, with lighter tints above and darker shades below.
Can I export directly to tailwind.config.js?
Yes. The tool generates copy-ready JavaScript/TypeScript config objects that you can paste directly into your Tailwind configuration's extend.colors section.
Will custom scales work with Tailwind's opacity modifiers?
Yes. Generated colors use hex or RGB format, which work seamlessly with Tailwind's opacity modifier syntax like bg-brand-500/50.
How does it handle very light or very dark base colors?
The generator adjusts the scale distribution so extremely light bases still produce usable dark shades, and vice versa. The 50 step is always near-white and the 950 step is always near-black.
Can I generate scales for multiple colors at once?
Generate one scale at a time, then copy each to your config. For a complete multi-color palette, use the Design System Builder which handles multiple color families simultaneously.
How does Tailwind's color scale work?+
Tailwind uses a numeric scale from 50 (very light) to 950 (very dark) for each color family. The 500 shade is considered the 'base' or default. Lighter shades work for backgrounds and borders; darker shades work for text and emphasis. Each shade is designed to have predictable contrast relationships.
Can I create custom color scales for Tailwind?+
Yes, extend the colors in tailwind.config.js. Provide an object with numeric keys (50, 100, 200... 900, 950) mapping to hex values. This tool generates that exact format. You can name the scale anything you want and use it with any Tailwind utility (bg-brand-500, text-brand-900).
How many shades should a Tailwind color scale have?+
Tailwind's built-in colors use 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). For custom brand colors, matching this convention ensures compatibility with Tailwind's utility classes and keeps your design system predictable.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service