Tailwind ColorGenerator
Create 11-step custom Tailwind CSS color scales from any base color instantly.
Quick AnswerRead Full Explanation Show Less A Tailwind color scale is an 11-shade palette (50–950) from lightest to darkest of a base color.
Short Answer
A Tailwind color scale is a structured palette of 11 shades (50–950) of a given base color. Shade 50 is the lightest tint and 950 the darkest shade. This numeric system ensures consistent, accessible design for user interfaces.
Detailed Explanation
Comprehensive Overview
Supports HEX, RGB, HSL, OKLCH
Invert scale for dark themes
Ensure usable ramps
Export Options
primary: {
50: "#d4faff",
100: "#caf0ff",
200: "#9cd8ff",
300: "#72bbff",
400: "#539bff",
500: "#3b82f6",
600: "#155ecf",
700: "#0041b1",
800: "#002c80",
900: "#011b4b",
950: "#000634",
}Design System Preview
Feature Card
This preview demonstrates how your generated color scale can be applied to real UI components, ensuring visual harmony and accessible contrast ratios.
How It Works
Pick Base Color
Select a hex code or pick a color to serve as the 500 weight.
Generate Shades
The tool interpolates 11 shades (50-950) using OKLCH.
Check Contrast
Validate WCAG ratios for accessible text pairings.
Export Code
Copy the config object or CSS variables directly to your app.
What Is a Tailwind Color Scale?
Definition
A Tailwind color scale is a precomputed set of 11 color shades (50–950) derived from a base hue. It is designed to provide developers with a ready-to-use, harmonized spectrum of colors for consistent UI theming.
Why Developers Use It
Using a standardized scale prevents the proliferation of arbitrary hex codes across a codebase. It ensures predictability—if you need a slightly darker background, you step from 100 to 200, maintaining visual balance.
Example Palette
Example: Generating a Blue scale from the base color #3b82f6
Common Shade Usage
| Shade Range | Typical Use Case | Notes |
|---|---|---|
| 50–100 | Light backgrounds, large areas, light alerts | Use near-white tints for page or card backgrounds. |
| 200–400 | Subtle accents, disabled states, borders | Medium-light shades for secondary elements. |
| 500 | Primary color, buttons, icons | The mid-tone "brand" base color. |
| 600–700 | Button hover/active states, secondary text | Slightly darker mid-tones for emphasis. |
| 800–950 | Typography, dark-mode backgrounds | Deep tones for high contrast against light backgrounds. |
OKLCH vs HSL Comparison
HSL Model
OKLCH Model
Code Examples
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
500: '#3b82f6',
950: '#172554',
}
}
}
}
}
Accessibility & Contrast
When designing with Tailwind colors, it is crucial to meet WCAG contrast guidelines.
- WCAG AA (Normal Text): Requires a contrast ratio of at least 4.5:1.
- WCAG AA (Large Text): Requires a contrast ratio of at least 3.0:1.
- Rule of Thumb: Text in 700-950 shades on 50-100 backgrounds generally passes.
- Always Test: Use our generator's built-in contrast checker to verify.
Best Practices Checklist
Browser Support for OKLCH
The `oklch()` CSS function is widely available in modern browsers. If you need to support older browsers, our generator also exports standard HEX values.
Troubleshooting
Glossary
OKLCH
A color space representing Lightness, Chroma, and Hue, designed for perceptual uniformity.
Color Ramp
Another term for a color scale; a smooth progression of shades from light to dark.
Design Token
A semantic alias (like --color-primary) for a hardcoded value, enabling consistent theming.
WCAG
Web Content Accessibility Guidelines, defining standards for contrast and readability.
Hue Rotation
Shifting the hue slightly as the color gets lighter or darker to mimic real-world lighting.
Perceptual Uniformity
When mathematical changes in color values match how human eyes perceive the changes.
Frequently Asked Questions
General
What is a Tailwind color scale?
A Tailwind color scale is an 11-step ramp of shades derived from one base hue (numbered 50, 100, up to 950). It ensures UI consistency by using predefined light-to-dark values.
How do Tailwind color scales work?
Tailwind color scales work by providing numerical steps from 50 to 950 that indicate relative lightness. Shade 50 is the lightest tint (for backgrounds), shade 500 is typically the base primary color, and shade 950 is the darkest tone (for text).
Why does Tailwind use numbers 50-950?
The numerical weighting system represents a spectrum of lightness, similar to font weights. This allows developers and designers to intuitively know that '500' is the standard color, '100' is a lighter tint, and '900' is a darker shade.
What are the Tailwind color shade names?
Tailwind uses standard color family names (e.g., slate, blue, red) combined with the numerical shade weight (50-950), such as bg-blue-500 or text-slate-900.
Generation
How do I generate a Tailwind color palette?
You can generate a Tailwind color palette by choosing a base color (hex code) in our generator tool. The tool will automatically compute the 11-shade scale (50-950) using OKLCH interpolation for perceptual uniformity.
How do I use a generated color palette in tailwind.config.js?
You can copy the generated JSON object and paste it into the theme.extend.colors section of your tailwind.config.js file. This registers the new colors for use as utility classes.
How to copy Tailwind palette to CSS variables?
Our tool provides a CSS Variables export option. You can copy the generated CSS custom properties (e.g., --color-brand-500) and paste them into your main stylesheet's :root block.
How to create dark mode colors with Tailwind?
You can use the 'Dark Mode Scale' toggle in our tool, which inverts the lightness distribution. Alternatively, you can use semantic tokens and assign the 900 shade to the background in dark mode and the 100 shade to the background in light mode.
Color Theory
What is OKLCH in CSS?
OKLCH is a modern color space that defines colors by Lightness (L), Chroma (C), and Hue (H). It is designed to model human perception accurately, ensuring smooth and visually uniform gradients.
Does Tailwind v4 support OKLCH?
Yes, Tailwind CSS v4 has embraced modern color spaces and natively supports OKLCH, making it the recommended format for new projects.
Are Tailwind color palettes accessible?
Yes, when used correctly. The default scales are designed so that text in shades 700-950 on backgrounds of 50-100 meets the WCAG AA contrast ratio of 4.5:1. Our tool includes a built-in contrast checker.
Advanced
What are semantic color tokens?
Design tokens (or semantic colors) are aliases for raw color values based on their purpose, such as 'primary', 'success', or 'danger', rather than their hue (like 'blue' or 'green').