One brand colour is rarely enough for a full design. You need a pale version for backgrounds, a slightly lighter one for hover effects and a darker one for borders, pressed buttons and text. Working these out by hand in a design app takes time and the steps are often uneven.

This tint shade generator does it in one go. It mixes your colour with white and black in equal 10% steps, so every lighter and darker version belongs to the same family and the jumps between them are even.

Tints vs Shades: What Is the Difference?

How to Use the Tint Shade Generator

The tool loads with an example colour. Replace it with your own and the results update straight away.

Step 1: Enter a HEX code or pick a base colour

Type a HEX code in Base Color (HEX). Six-digit codes like #0D9488 and three-digit shorthand like #0A9 both work, with or without the # sign. You can also click the colour square to use the picker. The tints and shades refresh as you type, and Generate Colors refreshes them manually.

Step 2: Click a tint to copy its HEX code

The Tints (Lighter) section runs from 90% lighter down to 10% lighter, ending with your base colour. Each card shows the HEX code and how much white was added. Click a card and the code is copied, with a short confirmation message.

Step 3: Use the darker shades for depth and states

The Shades (Darker) section starts with your base colour and goes from 10% to 90% darker. Click any shade to copy it, just like the tints.

Example: Tints and Shades of #0D9488

Here are the results from the screenshots above for a teal base colour, #0D9488.

How the Colours Are Calculated

The tool splits your HEX code into red, green and blue values from 0 to 255. For a tint, each value moves towards 255 (white) by the chosen percentage. For a shade, each value moves towards 0 (black). The result is rounded and turned back into a HEX code.

For example, the red value of #0D9488 is 13. A 90% tint gives 13 × 0.1 + 255 × 0.9 = 237, which is ED in HEX. Do the same for green and blue and you get #E7F4F3.

Where to Use Each Step in a Design

• 80% to 90% tints: page sections, card backgrounds and table stripes.
• 10% to 20% tints: hover states for buttons and links.
• 10% to 20% shades: pressed or active buttons and focus outlines.
• 60% to 90% shades: headings, body text and dark mode backgrounds that keep a hint of your brand colour.

Using a tint shade generator this way gives you a small, consistent colour scale. Many design systems use the same idea with names such as teal-50 to teal-900.

Tips for Better Results

• Start from a mid-tone colour. Very light or very dark base colours leave little room in one direction.
• Check text contrast on light tints. Dark shades of the same colour usually read well on them.
• Mixing with black can make some colours look a little dull. If a shade feels muddy, try a slightly more saturated base colour.

Frequently Asked Questions