Color Shades Generator

What this tool does

Color Shades Generator expands a single colour into the 50 to 950 step ramp popularised by Tailwind CSS, computing each step's lightness and chroma in OKLCH so the whole scale stays visually even and keeps the original hue. Step 500 is always set to your exact input colour, every swatch shows its contrast ratio against white and black, and the ramp is ready to copy as CSS variables, a Tailwind colours object or JSON.

Design systems rarely use just one shade of a colour: buttons need a hover state, backgrounds need a subtle tint, and disabled text needs something quieter than pure black. Building that full ramp by hand usually means eyeballing a dozen hex codes until they feel consistent, which rarely survives a second look.

This generator instead derives the whole 50 to 950 scale from a single lightness and chroma curve in OKLCH, so each step moves by a comparable visual amount instead of jumping unevenly. Your input colour is placed exactly at step 500, the midpoint most design systems treat as the default, and every other step is scaled from it and gamut-mapped back into sRGB so nothing clips into an unexpected hue.

How to use Color Shades Generator

1. Enter your base colour, or pick it with the native colour picker.
2. Scan the generated 50 to 950 ramp; step 500 is marked and matches your input exactly.
3. Check the contrast figures shown under each swatch for its readability on white and black backgrounds.
4. Choose an export format: CSS variables, a Tailwind colours object or JSON.
5. Copy the snippet or download it as a ready-to-use file.

Tips for better results

• Steps 50 to 200 work well as subtle backgrounds and hover states behind dark text.
• Steps 700 and above are usually the only ones with enough contrast for body text on a white page.
• If the ramp looks too muted at the dark end, your input colour likely has low chroma to begin with; try a more saturated base.
• Keep the hex codes exactly as generated rather than rounding them by hand, since the whole ramp is tuned to work together.

Common use cases

• Building a full Tailwind colour scale for a new brand colour in minutes.
• Replacing a design system's grey or accent scale with one derived from a single approved colour.
• Finding a background tint and a matching dark text colour that are guaranteed to come from the same hue.
• Checking which step of an existing colour has enough contrast for accessible text before writing CSS by hand.

Common mistakes to avoid

• Picking a near-black or near-white input colour, which leaves very little room for the extreme steps to differ from the middle of the ramp.
• Assuming every step is readable as text; always check the printed contrast ratio instead of guessing from the swatch colour.
• Mixing shades from this ramp with unrelated colours picked elsewhere, which breaks the consistent lightness curve that makes the scale useful.