Tint & Shade Scale Generator
Turn one brand color into a 50-900 design-system scale — ten tints and shades with hex codes, click to copy.
728 views
Click a swatch to copy its hex
From One Color to a System
Design systems (Tailwind, Material) never ship a single brand color — they ship a scale from 50 (near white) to 900 (near black), with the brand sitting around 500. Light steps (tints) mix the base toward white; dark steps (shades) mix toward black. This generator produces the ten standard stops with hex codes and CSS variables; click any swatch to copy.
How the scale gets used: 50-100 for backgrounds and hover fills, 200-300 for borders, 500-600 for buttons and links, 700-900 for text on light backgrounds. Pairing steps from the same scale keeps the UI harmonious, and steps ≥700 on ≤100 usually clear WCAG contrast — verify the exact pair with our contrast checker.
Frequently Asked Questions
Why does my vivid color look washed out in light tints?
Mixing toward pure white drains saturation — that is desirable for backgrounds. If you want livelier tints, nudge the base color more saturated before generating.
Where should my brand color sit on the scale?
Aim for 500-600. If your brand color is very light or dark, place it at the step matching its lightness and let the generator fill both directions.
Are these the same values Tailwind would give?
Not identical — Tailwind palettes are hand-tuned per hue. This scale uses consistent mixing, which is predictable for custom brand colors and close enough for real projects.
Similar Tools
Report a Problem
Tint & Shade Scale Generator