Color Shades Generator

Generate tints and shades from a base color.

Base Hex: #00f2feRGB: 0, 242, 254Steps per side: 5Total Palette Colors: 11

Quick Presets

Base Color

Steps Count (5)

Tints (Lighter)

Tint 1

#2bf4fe

Tint 2

#55f6fe

Tint 3

#80f9ff

Tint 4

#aafbff

Tint 5

#d5fdff

Base Color

Base

#00f2fe

Shades (Darker)

Shade 1

#00cad4

Shade 2

#00a1a9

Shade 3

#00797f

Shade 4

#005155

Shade 5

#00282a

CSS Variables

:root {
  --color-tint-1: #2bf4fe;
  --color-tint-2: #55f6fe;
  --color-tint-3: #80f9ff;
  --color-tint-4: #aafbff;
  --color-tint-5: #d5fdff;
  --color-base: #00f2fe;
  --color-shade-1: #00cad4;
  --color-shade-2: #00a1a9;
  --color-shade-3: #00797f;
  --color-shade-4: #005155;
  --color-shade-5: #00282a;
}

JSON Export

{
  "base": "#00f2fe",
  "tints": [
    "#2bf4fe",
    "#55f6fe",
    "#80f9ff",
    "#aafbff",
    "#d5fdff"
  ],
  "shades": [
    "#00cad4",
    "#00a1a9",
    "#00797f",
    "#005155",
    "#00282a"
  ]
}

Tints and shades explained

A tint is a color mixed toward white, and a shade is mixed toward black. Starting from your base color, this tool blends evenly toward each extreme to produce a balanced palette — perfect for hover states, backgrounds, borders, and full design systems built around one brand color. The math is a straight linear interpolation in RGB, computed instantly in your browser.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Producing tints and shades around a base brand colour.
Generating a hover and active variant from one colour.
Building a scale for a design token set.
Comparing a lighter and darker step at several intensities.
Producing a range to pick from rather than mixing by hand.

Frequently Asked Questions

What is the difference between a tint, a shade and a tone?: A tint adds white, a shade adds black, and a tone adds grey. All three are commonly called shades in casual use, and the distinction matters when building a ramp — mixing toward grey desaturates while mixing toward black mostly darkens.
How many steps should a ramp have?: Nine to eleven is the convention that Tailwind, Material and most design systems settled on, numbered 50 to 900 or 950. It gives enough separation for text, borders, backgrounds and hover states without producing steps nobody can distinguish.
Why do evenly spaced shades not look evenly spaced?: Because HSL lightness is a geometric coordinate rather than a perceptual one. Equal steps cluster visually at the light end and spread at the dark end, which is why a hand-tuned palette always has uneven numbers behind an even-looking ramp.
How do I generate a ramp that is genuinely even?: Work in OKLCH and step the lightness. Because its L axis is perceptual, equal numeric steps produce equal visual steps — which is precisely why Tailwind v4 moved its default palette into that space.
Which shades should carry text?: Whichever pass the contrast check, which has to be measured rather than assumed. The usual pattern is 600–700 for text on a light background and 200–300 on a dark one, but the exact hue changes where that boundary falls — yellow and blue behave very differently.