Skip to main content
ToolsHub

Color Shades & Tints Generator

Pick any color and get a complete Tailwind-style color scale (50-900). Copy as CSS variables or a Tailwind config object in one click.

Updated

Files never leave your browser

Color Scale

50

#F5F9FF

100

#E2ECFE

200

#C4DAFC

300

#A7C7FB

400

#80AEF9

BASE
500

#3B82F6

600

#2F68C5

700

#234E94

800

#183462

900

#0F213E

CSS Variables

:root {
  --color-brand-50: #F5F9FF;
  --color-brand-100: #E2ECFE;
  --color-brand-200: #C4DAFC;
  --color-brand-300: #A7C7FB;
  --color-brand-400: #80AEF9;
  --color-brand-500: #3B82F6;
  --color-brand-600: #2F68C5;
  --color-brand-700: #234E94;
  --color-brand-800: #183462;
  --color-brand-900: #0F213E;
}

Tailwind Config

{
  '50': '#F5F9FF',
  '100': '#E2ECFE',
  '200': '#C4DAFC',
  '300': '#A7C7FB',
  '400': '#80AEF9',
  '500': '#3B82F6',
  '600': '#2F68C5',
  '700': '#234E94',
  '800': '#183462',
  '900': '#0F213E'
}

How to use Color Shades & Tints Generator

Generate a full set of tints (lighter) and shades (darker) from any base color — see 20 variations from near-white to near-black in a single view. Copy any swatch's HEX value instantly. Essential for building consistent hover states, disabled states, and background variations without guessing hex codes.

  1. Enter a base color in HEX, RGB, or HSL, or pick it visually.
  2. The tool generates 10 tints (lighter) and 10 shades (darker) from the base.
  3. Click any swatch to copy its HEX value.
  4. Use the "Export all" button to get all 20 values as a JSON or CSS list.
  5. Toggle the WCAG contrast overlay to see which shades meet AA contrast on white or black.

Your data never leaves your device — 100% private processing.

Tints vs. shades vs. tones

A tint adds white to the base color (increases lightness in HSL), producing progressively lighter, softer versions. A shade adds black (decreases lightness), producing darker, richer versions. A tone adds grey (reduces saturation while keeping lightness constant), producing more muted, desaturated versions. Designers typically use tints for subtle backgrounds and disabled states, shades for hover/active states and borders, and tones for text variants and placeholder colors.

Practical use in component design

A button component needs at minimum: a base color (500), a hover state (one shade darker — 600), an active/pressed state (700), a subtle background variant (100), and a border color (300). Using shades from the same hue family ensures visual consistency. Avoid arbitrarily lightening or darkening with opacity (e.g., rgba(hex, 0.5)) as this produces semi-transparent colors that look different on dark vs. light backgrounds — use explicit shade values instead.

Worked examples

Tints and shades

Inputs: #3498db

Result: 10 tints toward white + 10 shades toward black

Hover-state shade

Inputs: base #3498db, one step darker

Result: darker shade for hover state (≈ #2e86c1)

Glossary

Tint
A color made lighter by mixing it with white; in HSL, achieved by increasing the lightness value.
Shade
A color made darker by mixing it with black; in HSL, achieved by decreasing the lightness value.
Tone
A color made more neutral by reducing saturation while keeping the hue and lightness constant.
Hover state
The visual style applied to an interactive element when the user's cursor is positioned over it.

Related reading

Free · No spam

Get weekly tool tips & updates

New tools, power-user tips, and productivity hacks — delivered free every Friday.

No spam, ever. Unsubscribe with one click.

Related Color & Design

Noise / Grain Generator

Generate a random noise or film-grain texture PNG at any size, in monochrome or RGB, with an optional transparent overlay. Free, private, browser-based.

Pixelate Image

Turn any image into a pixel mosaic with an adjustable block size. Great for retro effects or obscuring detail. Free, private pixelate tool in your browser.

Color Picker & Converter

Pick a color and convert HEX, RGB, HSL, HSB, and CMYK instantly. Generate tints, shades, and export-ready palette values.

Color Palette Generator

Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with live preview controls. Copy production-ready gradient code instantly online.

Color Contrast Checker

Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.

Explore all Color & Design.