Color Shades

What Is a Color Shade Generator?

A color shade generator creates a complete tint-to-shade scale from a single base color — typically 9-11 steps from near-white to near-black. This is the foundation of every design system's color palette: Design systems number these steps: Tailwind CSS runs 50 to 950, Material Design's classic palette 50 to 900, and Bootstrap 5's Sass colour maps 100 to 900.

Shades vs Tints vs Tones

Shades — darker variants, created by adding black (reducing lightness in HSL). Tints — lighter variants, created by adding white (increasing lightness). Tones — muted variants, created by adding gray (reducing saturation). A complete color scale combines all three for maximum versatility.

How to Use This Color Shade Generator

1. Enter your base color — Paste a hex code or pick a color using the color input. This is the starting point for your shade palette.
2. Generate shades and tints — The tool builds the scale in OKLCH: each step gets a set lightness, the hue and chroma come from your colour, and chroma is lowered only where sRGB cannot show it. Your exact colour takes the step whose lightness is closest to it, marked "base".
3. Adjust the number of steps — Choose 5 steps (100 to 900 in 200s), 9 (100 to 900), 10 (50 to 900) or 11 (50 to 950).
4. Copy individual values — Click any swatch to copy its hex code, or Copy as CSS Variables for the whole scale as --color-50 ... custom properties.

Tips and Best Practices

• → Change lightness, not blackness. Mixing with black also drains chroma and can shift the hue toward grey. Holding hue and chroma while stepping OKLCH lightness, as this tool does, keeps the colour recognisable from 50 to 950.
• → Build a 50–950 scale. Tailwind uses 50 to 950. A light brand colour will land around 300 or 400 here rather than at 500, because steps are set by lightness; that keeps the same number equally light across every colour in your palette.
• → Test shade contrast. Make sure your text color shade has at least 4.5:1 contrast against your background shade. Use our Contrast Checker to verify.
• → Avoid pure black for shadows. Instead of #000000, use your darkest shade (900 or 950) for shadows and dark backgrounds. It creates more cohesive, less harsh designs.

Related tools

• If you want to author the anchor color in OKLCH first before generating shades, the OKLCH Color Picker gives you direct lightness, chroma, and hue controls.
• Shades and tints cover the lightness axis; the Color Desaturator covers interaction states (hover, active, focus, disabled) using OKLCH lightness and chroma deltas.

Frequently Asked Questions

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service