Aqeeb Studio

Gradients & Mixing

Tints, Shades and Tones Generator

Enter a base color to see three scales: tints mixed with white, shades mixed with black, and tones mixed with gray. Each step has a HEX code you can copy.

Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.

How to use the Tints, Shades & Tones Generator

  1. Pick a base color with the color square or type a HEX, rgb() or hsl() value.
  2. Choose how many steps each row should have, from 5 to 15.
  3. Click any step to copy its HEX code.
  4. Use Copy CSS variables, Copy JSON or Download SVG under a row to take the whole scale with you.

Examples

Five steps of royal blue

The tints of #4169E1 run #6182E6, #809BEB, #A0B4F0, #C0CDF5, #DFE6FA. The shades run #3658BC, #2B4696, #213571, #16234B, #0B1226.

Tones

Tones mix in gray, so the blue becomes calmer: #4C6DD1, #5671C1, #6175B1, #6B78A0, #767C90.

A design-system scale

Many design systems use about nine steps per color. Choose 9 steps, copy the CSS variables and rename them 100 to 900.

Tips

  • Check text contrast on a few steps before choosing them for backgrounds.
  • The base color is shown first in every row, so you can compare it with its variants.

Questions about the Tints, Shades & Tones Generator

What is the difference between a tint, a shade and a tone?

A tint is a color mixed with white, a shade is mixed with black and a tone is mixed with gray. Tints are lighter, shades are darker and tones are less saturated.

Which should I use for a hover state?

A slightly darker shade is the usual hover color for a filled button, and a light tint is common for subtle backgrounds and selected rows.

How are the steps spaced?

Evenly, by mixing the base color with the target color in equal increments in sRGB.

Will the tints and shades keep the same hue?

Mixing with white or black keeps the hue very close to the original. Mixing with gray lowers the saturation, which can make the color look slightly different.

Color Mixer

Mix two colors in any proportion and see the in-between steps.

Monochromatic Palette Generator

Create a palette from one hue by varying its lightness.

Color Palette Generator

Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.

Color Picker

Pick any color and copy its HEX, RGB, HSL and CMYK values.