Skip to content
TechnologyTools

Colors

Color Shades & Tints Generator

Expand any color into tints, shades, and tones in controlled steps — the systematic way to build scales for UI states.

Tints (toward white)

Shades (toward black)

Tones (toward gray)

Tints add white, shades add black, tones add gray — the systematic way to build UI state colors.

Building a Usable Scale

A practical shade scale (like Tailwind's 50–950) steps lightness more than hue, keeping the hue constant so the ramp reads as one color. Use the lightest steps for backgrounds, mid steps for borders and hover states, and the darkest for text — and verify the pair you actually ship (e.g. shade-700 text on shade-50 background) passes contrast.

How the Color Math Works

  1. Pick a base color and the number of steps (5–12).
  2. Three scales are produced: tints (toward white), shades (toward black), and tones (toward gray).
  3. Each swatch shows its exact lightness delta, with HEX, RGB, and HSL on click-to-copy.
  4. Export the whole scale as CSS custom properties with one click.
Formula & Technical Standard
Tint: mix with white by k%. Shade: mix with black. Tone: mix with mid-gray. All in sRGB space.

Worked Example

Alert color scale
Input: Red base, 9 steps
Output: 50 → 950 scale
Alert components need a light background tint, a mid border tone, and a dark text shade — one scale covers all three.
Chart series from one hue
Input: Blue base, 6 shades
Output: 6 ordered blues for data series
Sequential scales communicate magnitude in charts without introducing new hues.

Common Questions

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

Tints add white, shades add black, tones add gray. Design systems mostly use tint/shade ramps; tones are useful for muted backgrounds.

Should steps be perceptually even?

The generator spaces them evenly in sRGB, which is standard for design ramps. Perceptual spaces like OKLCH are a refinement for advanced systems.

Colorspopular

Color Palette Generator

Turn one base color into a full design-ready palette: tints, shades, and harmonic variations, each with HEX/RGB/HSL values.

Colors

Color Mixer & Blender

Blend any two colors at any ratio with RGB and HSL mixing modes, showing the full gradient of intermediate steps.

Colorspopular

WCAG Color Contrast Checker

Test foreground/background color pairs against WCAG 2.1 AA and AAA contrast requirements with a live text preview.