Tailwind Color Generator: Custom Palette Builder
Tailwind CSS uses a shade scale from 50 (lightest) to 950 (darkest) for every color. Building your own palette on that scale means your colors behave like the built-in ones: the same eleven steps, the same contrast relationships, and no special cases in your config. Here is how the scale works and how to build one.
The Tailwind CSS v4 Color System
Tailwind v4 moved from JavaScript configuration to CSS-native theming with the @theme directive. Colors are defined as CSS custom properties, making them accessible to any styling approach and not only Tailwind utility classes. The shade scale convention remains the same: 11 stops from 50 to 950, each mapping to a specific lightness level.
This means your generated palette is simultaneously a Tailwind theme, a set of CSS custom properties, and a design token system that any framework can consume.
How the 50-950 Shade Scale Works
| Shade | Typical Usage | Note |
|---|---|---|
| 50 | Subtle backgrounds, hover states | Lightest |
| 100 | Card backgrounds, secondary surfaces | |
| 200 | Borders, dividers, input rings | |
| 300 | Disabled states, placeholder text accents | |
| 400 | Icons, secondary text on light backgrounds | |
| 500 | Primary buttons, links, brand color | Base |
| 600 | Button hover states, active elements | |
| 700 | Headings on colored backgrounds | |
| 800 | Dark surfaces, footer backgrounds | |
| 900 | High-contrast text, dark mode surfaces | |
| 950 | Near-black text, darkest shade | Darkest |
Steps to Create a Custom Palette
Pick a base color
Start with your brand color or a hue that matches your design intent. This becomes your 500 shade, the anchor of the entire scale. A good base color typically has 45-55% lightness in HSL and moderate saturation.
Generate tints and shades
From the base, generate lighter tints (50-400) by increasing lightness and slightly reducing saturation. Generate darker shades (600-950) by decreasing lightness and shifting hue slightly. Algorithmic generation ensures perceptually uniform steps.
Verify accessibility
Check that your lightest shades (50-200) have sufficient contrast against dark text, and your darkest shades (700-950) work well with white text. The 500 shade should meet WCAG AA contrast (4.5:1) against white for button labels. See our WCAG Contrast Guide for the full breakdown of AA and AAA requirements.
Export to your project
Copy the generated palette as CSS custom properties, a Tailwind @theme block, or any supported export format. Drop it directly into your configuration file.
Tailwind v4 @theme Example
In Tailwind v4, you define your custom color scale in your CSS file using the @theme block. Here is what a generated palette looks like:
@theme {
--color-brand-50: oklch(0.97 0.01 250);
--color-brand-100: oklch(0.93 0.02 250);
--color-brand-200: oklch(0.86 0.04 250);
--color-brand-300: oklch(0.76 0.08 250);
--color-brand-400: oklch(0.64 0.13 250);
--color-brand-500: oklch(0.53 0.16 250);
--color-brand-600: oklch(0.46 0.14 250);
--color-brand-700: oklch(0.39 0.12 250);
--color-brand-800: oklch(0.32 0.09 250);
--color-brand-900: oklch(0.27 0.07 250);
--color-brand-950: oklch(0.20 0.05 250);
}With this defined, you can use bg-brand-500, text-brand-200, and any other Tailwind utility class with your custom color.
Best Practices for Accessible Color Scales
Maintain consistent saturation curves
Lighter tints should gradually desaturate while darker shades can maintain or slightly increase saturation. Avoid sharp jumps that make intermediate shades look out of place.
Test against real UI components
Apply your scale to buttons, cards, form inputs, and badges before committing. A shade that looks perfect in a swatch can feel off when used as a full-width background.
Use perceptual color spaces
Linear interpolation in sRGB creates uneven lightness steps. Tools that work in OKLCH or OKLAB produce more visually uniform scales because they account for how human vision perceives color.
Include a neutral gray scale
Every design needs neutrals alongside brand colors. A warm gray (slight yellow or red tint) or cool gray (slight blue tint) that matches your primary hue's temperature creates a more cohesive feel.
Supported Export Formats
Our palette generator supports exporting your custom color scale in multiple formats so you can use it anywhere:
Related Guides
Build Your Palette Now
Generate a complete 50-950 shade scale from any base color. Preview it live, check contrast ratios, and export to Tailwind, CSS, SCSS, and 6 more formats.
Open Color Palette Generator