Tints and Shades

What this tool does

The Tints and Shades generator takes a single base colour and expands it into three related families of swatches. Tints blend the colour toward white, shades blend it toward black, and tones blend it toward a neutral mid-grey. Each family is shown as an evenly stepped row, and you control how many swatches appear — anywhere from three to sixteen per row. Every swatch displays its exact hex value and copies to your clipboard with a single click, so you can move from a starting colour to a full working scale in seconds. All the colour mixing happens locally in your browser using straightforward RGB interpolation, so the tool is fast, works offline, and never sends your colour anywhere.

Use cases

A single brand colour is rarely enough on its own. Real interfaces need a whole scale: a light tint for hover backgrounds, a darker shade for pressed states, and muted tones for borders and disabled controls. This tool gives you that scale instantly from one decision. Designers building a component library can generate a consistent 50-to-900 style ramp without hand-mixing each step. Brand teams can take a primary colour and derive supporting neutrals that still feel part of the family. Illustrators and digital painters use tints and shades to model light and form — a row of swatches becomes a ready palette for highlights and shadows. In data visualisation, a sequential row of tints makes a clean single-hue colour scale for charts and heatmaps. Even for accessibility work, generating darker shades is often the quickest route to a colour that can carry white text.

How to use it

1. Set your base colour using the native colour picker, or paste a hex code into the Base HEX value field. Three-digit shorthand like #25E is accepted.
2. Use the Swatches per row slider to choose how many steps each family contains. Ten is the default.
3. Read the three rows: Tints toward white, Shades toward black, and Tones toward grey. They update live as you change the colour or step count.
4. Click any individual swatch to copy its hex value, use Copy row to grab one whole family, or Copy all to export every value at once.
5. Press Reset to return to the default colour and step count.

Tips

Pick swatches from the start of a row when you want subtle, usable variations — the first two or three tints or shades are close enough to the base to feel intentional rather than washed out. Tones are the underrated family: because mixing with grey lowers saturation without dramatically changing lightness, tones are perfect for backgrounds and surfaces that should recede quietly behind your brand colour. If you are building a UI scale, generate ten shades and map them to numbered tokens (100, 200, 300 …) so your stylesheet stays predictable. When choosing a base colour, start from a mid-lightness, fairly saturated hue — it leaves the most room to travel in both directions and yields the most useful range.

Related techniques

Tints, shades and tones are one half of colour scale work; the other half is harmony. Once you have a primary scale, use a colour scheme or palette generator to find complementary and analogous hues, then run those through this tool to build matching ramps. If you need perceptually even steps rather than even RGB steps, convert your swatches with a colour converter and compare them in OKLCH, where equal numeric jumps look equally spaced to the eye. Finally, before you ship any tint or shade as a background, pair it with your text colour in a contrast checker — generating a scale and verifying it for accessibility are complementary steps, not the same one.