# Colour Tints & Shades Generator

> Generate lighter tints and darker shades of any colour, with hex values.

To generate tints and shades, pick a base colour and choose how many steps you want in each direction. Tints are produced by mixing toward white and shades by mixing toward black, keeping the hue constant so the whole scale reads as one colour family.

**URL:** https://convertto.tech/t/color-shades-generator
**Category:** Color Tools (https://convertto.tech/c/color-tools)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Pick the base colour.
2. Set the steps each way.
3. The result appears immediately — copy or download it.

## FAQ

### Why do my shades look uneven?

Because HSL lightness does not match perceived brightness — yellow at 50% lightness looks far brighter than blue at 50%. Generating in a perceptual space such as OKLCH gives steps that actually look evenly spaced.

## Related tools

- [Colour Palette Generator](https://convertto.tech/t/color-palette-generator): Build harmonious palettes — complementary, triadic, analogous and monochromatic.
- [Image Colour Palette Extractor](https://convertto.tech/t/image-palette-extractor): Pull the dominant colours out of any image as HEX and RGB values.
- [Colour Converter](https://convertto.tech/t/color-converter): Convert any colour to HEX, RGB, HSL, HSV, CMYK, LAB and native code — with contrast, tints and harmonies.
- [Colour Blindness Simulator](https://convertto.tech/t/color-blindness-simulator): See how a colour appears to people with protanopia, deuteranopia and tritanopia.
- [Colour Mixer & Blender](https://convertto.tech/t/color-mixer): Blend two colours and generate the intermediate steps between them.
- [Random Colour Generator](https://convertto.tech/t/random-color-generator): Generate random colours as a free palette or a harmony built around a base colour.
- [Tailwind Colour Shade Generator](https://convertto.tech/t/tailwind-shade-generator): Generate a full 50–950 Tailwind colour scale from a single brand colour.
- [CSS Named Colours Reference](https://convertto.tech/t/css-named-colors): Every CSS colour name with its HEX, RGB, HSL and OKLCH value, sortable by hue and contrast.