Color Shades Generator

About Color shades generator

Turn one brand color into an eleven-step scale numbered 50 through 950, the naming Tailwind popularized. The scale is built in OKLCH so steps look evenly spaced, and your original color is pinned to the nearest step so it appears in the ramp unchanged. Export the result as CSS variables or a Tailwind config snippet.

How to use it

1. Enter the color in the input, using hex, rgb(), hsl(), a named color like tomato or the color swatch, then press Enter or leave the field.
2. Type a Color name, which becomes part of each variable name. Characters outside letters, digits, hyphens and underscores turn into hyphens.
3. Review the eleven swatches across the top. Click one to copy its hex.
4. Open CSS variables or Tailwind config in the Export block and copy the code.

Blue seed with the name primary

#3b82f6

50: #f0f6ff
500: #3b82f6 (your seed)
950: #00133a
Export: --color-primary-500: #3b82f6;

When to use it

• Creating a full palette for a new product from a single logo color.
• Building hover and disabled states from steps 600 and 300.
• Generating the color block for a Tailwind config file in seconds.
• Checking whether a brand color sits near the middle of a scale or closer to an edge.

Questions about Color shades generator

Which step does my color land on?

The one whose default lightness is nearest to yours. Light seeds may become step 200 or 300, and dark seeds step 700 or 800. The tool then spaces the other steps evenly on either side.

Why are the lightest and darkest steps less colorful?

Chroma tapers away from the anchor, leaving about 12 percent at the light end and 45 percent at the dark end, because real near-white and near-black shades are tinted neutrals.

What happens if I type a bad color?

An inline message lists formats it understands, such as #f00, rgb(255 0 0), hsl(0 100% 50%) or tomato, and the scale stays on the previous color.

How does this differ from the palette generator?

That tool makes ten evenly lit shades plus harmony colors. This one produces Tailwind-style 50 to 950 steps with hue held constant and exports named tokens.

Related tools

• Color palette generatorGenerate harmonious color palettes — shades, tints, complementary, analogous, and triadic from any seed color
• Spacing scale generatorBuild a design-token spacing scale from a base unit — exports CSS custom properties
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS transform generatorVisually combine translate, rotate, scale, and skew transforms with a live preview element
• Typography scale generatorGenerate a modular type scale from base size and ratio — exports CSS custom properties
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview