ilovekit

Color Shade Scale Generator

9 tools

Generate a full 50-900 shade scale from one color.

Runs in your browser — your files and text stay on your device

Pick a color and get an instant palette, extract dominant colors from a photo, mix two colors, build gradients, check WCAG contrast, simulate color blindness, or browse a reference of named and Tailwind-style colors — all computed locally as you adjust each control.

Picker & PaletteShade ScalePalette from ImageColor MixerGradient GeneratorContrast CheckerColor BlindnessNamed ColorsPalette Reference

How to use this tool

  1. 1Pick or type a base color.
  2. 2A full 50-900 shade scale is generated from it, matching the convention used by Tailwind and similar design systems.
  3. 3Click any swatch to copy its hex code.

Frequently asked questions

Where does 500 sit in the scale?

500 is always your exact input color — lighter shades (50-400) blend it toward white, darker shades (600-900) blend it toward black.

Is this sent to a server?

No, the scale is generated entirely in your browser.

Guides

All guides →