What is the difference between a tint and a shade?

A tint is the base colour mixed with white (lighter); a shade is the base colour mixed with black (darker). This tool generates both, in even steps, from a single base colour.

How are the steps calculated?

Each tint mixes the base colour toward white by an even fraction (step ÷ steps+1); each shade mixes toward black the same way. So with 5 steps you get 5 increasingly light tints, the base, and 5 increasingly dark shades.

Can I use this to build a design-system palette?

Yes. A base brand colour plus its tints and shades gives you a ready-made scale (like the 50–900 ramps in many UI kits) for backgrounds, borders, hover states and text.

Is anything uploaded?

No. All colour maths runs in your browser; nothing is sent anywhere.

What is the Color Tint and Shade Generator?

Generate a full tints-and-shades scale from any base colour — even steps toward white and toward black, each as a copyable HEX swatch. Perfect for design systems and UI palettes, and it runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Color Tint and Shade Generator

Name: Color Tint and Shade Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Generate tints and shades from one colour

Enter a single base colour and get a complete scale of tints (lighter, mixed toward white) and shades (darker, mixed toward black). Every swatch is click-to-copy, so you can build a consistent palette in seconds.

How the scale is built

tint(step)  = mix(base, white, step / (steps + 1))
shade(step) = mix(base, black, step / (steps + 1))

Mixing is a straight linear blend of each RGB channel. With, say, 5 steps you get 5 evenly spaced tints, the base colour in the middle, and 5 evenly spaced shades — a balanced light-to-dark ramp.

Why tints and shades matter

A single brand colour is rarely enough for a real interface. You need lighter tints for backgrounds and hover states, and darker shades for borders, pressed states and text. Generating them from one base keeps everything harmonious and on-brand — the same approach behind the numbered colour ramps (50, 100, … 900) in popular design systems.

Common uses

Building a design-system colour ramp from a brand colour.
Picking accessible darker text and lighter background variants of one hue.
Creating monochrome palettes for charts, badges and UI states.

All colour maths runs locally in your browser — nothing is uploaded.