Tailwind CSS's color system is built on 10-step scales from 50 to 950 — the same system used by slate, blue, emerald, and every other built-in color. When you need a custom brand color in your Tailwind project, you need the same scale format: a carefully interpolated set of tints and shades that match Tailwind's perceptual lightness curve.
The Tints & Shades Generator on FreeColorPalettes produces exactly that. Enter any hex color, and you get a complete 50–950 scale with the same perceptual spacing as Tailwind's built-in colors. The export includes a ready-to-paste tailwind.config.js snippet — drop it in, and your custom brand color integrates seamlessly with all of Tailwind's utilities.
This is one of the most-requested workflows in the Tailwind community: a designer specifies a brand primary color, and the developer needs to quickly build a complete scale. This tool does it in seconds.
What It Does
The Tints & Shades Generator takes any input hex color and generates a perceptually smooth 50–950 scale — 11 values from near-white tint to near-black shade. The scale interpolates through both lightness and saturation to maintain visual coherence throughout the range, matching the perceived quality of Tailwind's built-in color scales. Output options include CSS custom properties, a Tailwind config snippet, and a visual preview of each step. You can copy individual values or the entire scale as a formatted config block.
Who It's For
Tailwind CSS developers who need to extend the default palette with custom brand colors, designers specifying color scales for design systems, and front-end engineers building UI component libraries that need a complete brand color range.
How to Use This Tool
- 1Go to the Tints & Shades Generator
- 2Enter your brand hex color in the input field
- 3Review the generated 50–950 scale
- 4Click "Copy Tailwind Config" to get the ready-to-paste snippet
- 5Add to your tailwind.config.js under theme.extend.colors
Related Tools
Useful For These Use Cases
Frequently Asked Questions
How do I add a custom color to Tailwind CSS?
Use the Tints & Shades Generator to create a 50–950 scale from your brand hex color. Copy the Tailwind config output and add it to your tailwind.config.js under theme.extend.colors. Your custom color will then be available as classes like brand-500, brand-200, etc.
What is a Tailwind color scale?
A Tailwind color scale is a set of 10–11 tints and shades of a single hue, numbered 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The scale covers near-white tints to near-black shades in a perceptually uniform progression, similar to the built-in slate, blue, and emerald scales.
Can I use a custom color scale in Tailwind without configuration?
No — custom brand colors must be added to tailwind.config.js. The Tints & Shades Generator produces the config snippet you need. Once added, all Tailwind utilities (bg-, text-, border-, ring-, etc.) become available for your custom color.
How do I create a Tailwind dark mode palette?
Generate your brand scale with the Tints & Shades tool. For light mode, use shades 600–900 for text on light backgrounds. For dark mode, use shades 300–500 for text and interactive elements on dark backgrounds. The 50–200 range works for subtle dark-mode backgrounds.
Ready to try it?
Free, no sign-up, no ads. Works instantly in your browser.
Open Tailwind Color Scale Generator