Color Scale Generator
Generate a Tailwind CSS v3/v4-style color scale from a single base color.
| Step | Swatch | HEX | Luminance | |
|---|---|---|---|---|
| 50 | #f6f6f8 | 0.923 | ||
| 100 | #e6e6ef | 0.796 | ||
| 200 | #c8c9e4 | 0.597 | ||
| 300 | #9e9fdb | 0.372 | ||
| 400 | #6567d7 | 0.174 | ||
| 500 | #2528da | 0.070 | ||
| 600 | #2224aa | 0.045 | ||
| 700 | #1c1e7d | 0.027 | ||
| 800 | #171859 | 0.016 | ||
| 900 | #121236 | 0.008 | ||
| 950 | #0c0c1d | 0.004 |
What Is a Color Scale?
A color scale is a set of graduated color steps from light to dark derived from a single base color. Tailwind CSS popularized the 50–950 naming convention, where 50 is the lightest tint and 950 is the darkest shade. Our generator creates perceptually uniform steps by manipulating hue, saturation, and lightness in the HSL color space.
To use the generator, enter a base hex color or use the color picker. The tool automatically generates 11 color steps that you can copy individually or export as CSS variables, SCSS, Tailwind config, JSON design tokens, or Figma variables.
This is invaluable for building design systems, creating UI themes, or generating consistent color ramps for your Tailwind projects.
Frequently Asked Questions
What is the 50–950 naming convention?
This convention was popularized by Tailwind CSS. 50 is the lightest shade (near white), 500 is typically the base or default color, and 950 is the darkest shade (near black). Each step represents a perceptually uniform increase in darkness.
How does the scale generation work?
The generator works in HSL color space. It keeps the hue constant and adjusts lightness and saturation for each step. Middle steps (300–700) have higher saturation while extreme steps (50, 950) desaturate toward white and black respectively.
Can I use these colors in Tailwind CSS?
Yes! Export as Tailwind Config format to generate the exact module.exports = { colors: { ... } } object that can be pasted into your tailwind.config.js file.
What color formats are supported?
You can enter any valid hex color (3 or 6 digits, with or without the # prefix). The scale is generated and displayed in hex format with one-click copy for each step.
How many steps does the scale generate?
The generator creates 11 steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — matching the Tailwind CSS v3/v4 scale exactly.