ffee All tools
EN 中文 FR DE

Color Shades Generator

Generate ten tints and ten shades of a base colour in the colour space you choose.

Build tints and shades

Base: #3b82f6 · hsl(217, 91%, 60%)
Space: sRGB · mixes run towards white for tints and towards black for shades.
Swatches are calculated locally with your own colour maths. Click any swatch to copy its hex value.

How to use the Color Shades Generator

  1. Pick the base colour with the colour field.
  2. Choose the colour space used for mixing tints and shades.
  3. Click any swatch to copy a hex value, or copy the whole CSS block.

Features

Advertisement

More tools

Color Converter Color Picker Color Palette Generator Random Color Generator Color Harmony Generator Color Blindness Simulator Color Mixer Color Name Finder Image Color Picker Color Temperature Converter CSS Color Converter Image Compressor

Frequently Asked Questions

Common questions about the free online color shades generator.

It takes one base colour and produces a scale of lighter tints, mixed towards white, and darker shades, mixed towards black.
A tint is the base colour mixed towards white, so it gets lighter. A shade is mixed towards black, so it gets darker.
sRGB matches what most tools expect. Linear RGB and LAB give smoother ramps, while HSL keeps the hue and saturation steady.
Ten tints and ten shades, each in ten percent steps, plus the untouched base colour in the middle of the two rows.
Click the swatch you want. The hex value is placed on your clipboard and a short confirmation message appears.
The generated block defines variables such as --brand-500 and --brand-tint-30, so a whole palette can be reused from one stylesheet.
Yes. Each swatch is a linear interpolation between the base colour and white or black, over the colour space you selected.
Yes. Colours are not copyrightable, so any palette you generate here is free to use in personal and commercial projects.
No. Every conversion runs in your browser with plain JavaScript, so the colour you type never leaves your device.

Last updated: October 10, 2026