What is the difference between a tint and a shade?

Tints mix the hue toward white, raising perceived lightness; shades mix toward black, lowering lightness; tones mix toward grey, muting chroma.

How many steps do I need?

UI systems often ship nine stops for primary colours (icon, default button, hover, pressed, disabled) plus neutrals — start there and trim unused ends.

Will every step pass contrast on white?

Not automatically — measure text pairs per step, especially for light tints used as page backgrounds.

Can I export to CSS custom properties?

Copy as `--color-brand-500: #...` sequences or JSON for token pipelines if the tool exposes export.

Why do mid ramps look muddy?

Mixing pure black or white into saturated hues shifts perceived hue; consider perceptual ramps or OKLCH-based tooling for premium polish.

Digital products rarely need mirrors — you may need more dark shades than light tints for dark mode.

Can I lock endpoints?

If the UI supports pinning lightest and darkest stops, use it to align with existing surface tokens.

Shades and Tints

Color Live

Generate shades, tints and tones from any color.

About this tool

Shades and Tints — Generate shades, tints and tones from any color. Free, fast and private. Runs entirely in your browser at Quick Calci Tools.

Examples

Common scenarios for the Shades and Tints.

Blue ramp 9 steps

base: #3b82f6
steps: 9

950–50 style ladder for hover and pressed states.

Muted tone row

base: #f97316
mode: tone

Desaturated oranges for backgrounds behind contrast text.

Who uses the Shades and Tints?

Common scenarios and audiences for this tool.

Design system leads

Bootstrap numbered colour scales that match Stripe-style documentation.

Charting designers

Build sequential palettes where lightness encodes magnitude.

Game UI artists

Derive armour tier colour steps from one jewel tone.

Interior stylists

Preview paint-strip style progressions for client PDFs.

Bootcamp students

See how pigments behave when mixed toward black or white.

Frequently asked questions

Everything you need to know about the Shades and Tints.