Colour Shades and Tints Generator

Generate tints and shades of any color with copyable HEX codes — free online tool.

Base colour Steps each side

Click a swatch to copy its HEX code. Darker shades are on the left, the base colour is in the middle, and lighter tints are on the right.

This tool needs JavaScript enabled in your browser to calculate results.

About

About the Colour Shades and Tints Generator

Takes a single base colour and generates a full range of shades (mixed toward black) and tints (mixed toward white) on either side of it, evenly spaced. Set how many steps you want on each side, and click any swatch to copy its exact HEX code.

Designers use it to build a full tonal scale from a single brand colour for buttons, backgrounds and hover states, while developers use it to generate a consistent set of colour variables for a design system. It's one of many free designer tools on Toolapt, and like every tool here, it's free to use with no sign-up and no limit on how many times you run it.

Guide

Using the Colour Shades and Tints Generator

How to use 4 Features 8 Who uses this 4

1

Step 1

Pick a base colour using the colour picker.
2

Step 2

Set how many shade and tint steps to generate on each side.
3

Step 3

The swatches update live as you change the colour or step count.
4

Step 4

Click any swatch to copy its HEX code.

Generates darker shades (mixed toward black) and lighter tints (mixed toward white) from one base colour
Updates the whole swatch strip live as you change the colour or step count, with no button to click
Adjustable from 2 to 10 steps on each side of the base colour
Click any swatch to copy its exact HEX code instantly
Automatically picks readable black or white text on each swatch based on its brightness
Works entirely in your browser — no installs and no sign-up
Free to use, with no limit on how many times you run it
Fully responsive, so it works just as well on a phone as on a desktop

Designers

Designers use the Colour Shades and Tints Generator for building a full tonal scale from a single brand colour for buttons, backgrounds and hover states.

Developers

Developers use the Colour Shades and Tints Generator for generating a consistent set of colour variables for a design system.

UI/UX designers

UI/UX designers use the Colour Shades and Tints Generator for checking that a colour still reads well at lighter and darker tones.

Illustrators

Illustrators use the Colour Shades and Tints Generator for a quick tonal palette to shade a single-colour illustration.

Examples

Colour Shades and Tints Generator examples

3 worked examples

Darkest shade

Starting from base #10B981 with 5 steps each side, the darkest swatch mixes about 83% (5/6) toward black to produce #031F16; each step in between is 1/6 darker.

Lightest tint

Starting from the same base #10B981, the lightest swatch mixes about 83% toward white to produce #D7F3EA.

The base colour itself

The middle swatch of the 11 is always the base colour itself, unchanged — #10B981 with a 0% mix.

Box Shadow Generator

Design a CSS box-shadow with sliders for offset, blur, spread, colour and opacity, and copy the code.

Use it

Border Radius Generator

Set each corner's CSS border-radius with sliders, preview the shape and copy the shortest CSS.

Use it

Colour Palette Generator

Build a palette from a base colour using classic colour-wheel relationships.

Use it

Colour Converter

Convert between HEX, RGB, HSL, HSV and CMYK. Named CSS colours work too.

Use it

Colour Blindness Simulator

Preview a photo as it might look under common types of colour vision deficiency.

Use it

Image Colour Palette Extractor

Pull the dominant colours out of a photo, with HEX codes ready to copy.

Use it

FAQ

Frequently asked questions

Quick answers to common questions about the Colour Shades and Tints Generator.

Still have a question?

Send us a message and we'll help you out.

What does the Colour Shades and Tints Generator do?

It takes one base colour and generates a range of darker shades and lighter tints around it, each with its own HEX code.

Is the Colour Shades and Tints Generator free to use?

Yes. It's free, with no sign-up, no watermark and no limit on how many times you use it.

Is my input safe when I use this tool?

Yes. Every colour is calculated entirely on your own device — nothing is sent to a server.

What's the difference between a shade and a tint?

A shade is the base colour mixed with black (darker); a tint is the base colour mixed with white (lighter). This tool shows shades on the left, the base colour in the middle, and tints on the right.

How do I copy a specific colour?

Click directly on any swatch to copy its HEX code to your clipboard.

Can I control how many shades and tints are generated?

Yes. The "Steps each side" field controls how many shades and how many tints are generated, from 2 to 10 on each side.

Can I use the Colour Shades and Tints Generator on my phone?

Yes. The page is fully responsive and works on mobile, tablet and desktop browsers alike.

Does the Colour Shades and Tints Generator have any limitations?

It generates up to 10 steps on each side of the base colour, using simple linear mixing toward black and white rather than perceptual colour models.

Still have a question? Contact us

Colour Shades and Tints Generator

About the Colour Shades and Tints Generator

Using the Colour Shades and Tints Generator