From One Brand Color to a Complete Scale
Your brand guide says #3B82F6 is the primary blue. But you need a lighter version for hover backgrounds, a darker one for pressed states, something even lighter for page backgrounds, and a near-black version for dark mode. Eyeballing “a little lighter” in a color picker gives inconsistent results. This gives you 10 tints and 10 shades in mathematically even steps.
Pick your base color and the tool generates 21 swatches: 10 progressively lighter tints (mixing toward white), the original color in the middle, and 10 progressively darker shades (mixing toward black). Each has its HEX code, clickable to copy.
How the Math Works
The tool converts your color to HSL and adjusts the lightness component in even increments. Hue and saturation stay constant, so every variation unmistakably belongs to the same color family. The lightest tint approaches white. The darkest shade approaches black.
Starting with #3B82F6 (a standard blue), you’ll get tints ranging from a barely-blue #EBF1FE up top, through progressively richer blues, down to the base. Then shades descend from a slightly deeper blue through to a near-black navy (#060D19).
Building a Design System Color Scale
Here’s the trick that saves hours: map the lightest tint to your 50 token, the darkest shade to 950, and the base color falls around 500. That’s the same numbering convention Tailwind CSS and Material Design use. Your custom color scale becomes instantly familiar to any developer who’s used those frameworks.
Hover states. The tint one or two steps above your base makes a natural hover background.
Active/pressed states. The shade one or two steps below gives you an obvious pressed state.
Backgrounds and text. Light tints (50-200 range) for page backgrounds. Dark shades (700-900 range) for text. This naturally creates high-contrast pairings.
Dark mode. Invert the logic. Dark shades become backgrounds. Light tints become text and accents.
Data visualization. The graduated scale maps naturally to sequential data, lighter values for low numbers, darker for high. Choropleth maps, heat charts, progress bars.
Tints vs. Shades vs. Tones
A tint adds white, making the color lighter. A shade adds black, making it darker. A tone (not generated here) adds gray, reducing saturation without much lightness change. It’s a distinction from traditional color theory that matters when you’re being precise about what you want.
Use the Color Picker to find your base color, the Palette Generator for multi-hue harmonies, and the Color Mixer to blend two colors before generating their scales. Everything runs in your browser.