Color Tools
Color Palette GeneratorImage Color ExtractorColor Contrast CheckerColor Blindness SimulatorColor Shade / Tint GeneratorColor MixerView all 9

Color Shade / Tint Generator

A full 50→950 scale from one color, with contextual labels and multi-format export.

Runs in your browserNo sign-up required
50
#f2f2fd
100
#e5e4fb
200
#c7c5f7
300
#a19df1
400
#726cea
500
#3f36e2
600
#261dcd
700
#1f18a5
800
#17127d
900
#100c55
950
#090731

Click any swatch to copy its hex value. Hover a swatch to see what it's typically used for.

Export

One Color, a Full System

A single brand color rarely gets you through a real interface — you need lighter tints for backgrounds and darker shades for text and dark mode. This tool generates the complete ramp at once, labels each stop with what it's typically used for, and exports directly in the format your project needs.

How to Use This Tool

  1. 1Pick a base colorType a hex value or use the color picker.
  2. 2Review the full scale11 stops from 50 (lightest) to 950 (darkest), each labeled with a typical use.
  3. 3Click a swatch to copyInstantly copies that stop's hex value.
  4. 4Export in your formatCSS custom properties, a Tailwind config object, or SCSS variables.

Good to Know

  • The numbering (50 through 950) follows the modern convention popularized by Tailwind CSS — 50/100 for subtle backgrounds, 500 as the base/primary color, 900/950 for near-black text and dark-mode surfaces.
  • Each swatch is labeled with what it's typically used for — turning a bare color ramp into something you can apply correctly without design experience.
  • The scale keeps your color's hue and saturation constant while varying only lightness — the same approach real design systems use to keep a ramp feeling like "one color," not several different colors.
  • Export directly as CSS variables, a Tailwind config object, or SCSS — whichever matches your project.

Frequently Asked Questions

Will stop 500 be exactly my input color?

Not necessarily — the scale uses a fixed lightness curve across all 11 stops (the same way real design systems build a scale), so your input color's hue and saturation carry through, but its exact lightness may not land precisely on the 500 stop.

What's the difference between this and the Color Palette Generator?

The Palette Generator creates a small set of harmonious but different colors (complementary, triadic, etc.) from one base. This tool creates a single-hue tint-to-shade ramp — many light-to-dark variations of the SAME color, the format a design system actually needs.

Can I use a custom variable name in the export?

Yes — the prefix field controls the variable/class name used in every export format.