What's the difference between a tint and a tone?

Tint = base + white (lighter). Shade = base + black (darker). Tone = base + gray (desaturated at same lightness). This tool covers tints and shades; for tones, drop saturation in HSL directly.

How is this different from a Tailwind 50–950 scale?

Tailwind scales follow a perceptual lightness curve in OKLCH and span the full near-white to near-black range. Tints/shades are simpler: linear mix toward white or black at fixed 10% steps. Use Tailwind for token systems; tints/shades for ad-hoc UI states.

Can I export the ramp as Tailwind config?

For full Tailwind output, use the Tailwind Palette Generator. This tool focuses on the click-and-copy individual steps.

Why linear mixing instead of HSL lightness sweep?

Sweeping HSL lightness produces uneven saturation. Linear mixing toward white/black keeps the hue stable and produces predictable contrast steps that work for hover/pressed/disabled state pairing.

Color ramps

Tints & Shades Generator

Generate 10 tints (mixed toward white) and 10 shades (mixed toward black) from any base color. sRGB-linear interpolation — perceptually balanced ramps for design systems, gradients, and brand palettes.

10 tints from base → white
10 shades from base → black
sRGB-linear mixing for perceptually-balanced ramps
Click any swatch to copy its HEX

Direct answer

A tint is a base color mixed with white (lighter, less saturated). A shade is the base mixed with black (darker, less saturated). Tints and shades let you build a ramp without picking each variant by hand.

Base color

Tints — mixed toward white

Shades — mixed toward black

When this saves you time

Real workflows where tints & shades generator replaces tedious manual work or an in-app subscription tool.

Hover states

Generate hover and pressed variants

Hover usually wants a 10–15% shade of the base; pressed usually wants a 20–25% shade. Pull both off the ramp in seconds.

Disabled states

Find a calm disabled variant

Disabled buttons usually sit at a 50–70% tint — desaturated but still recognizably the brand. Pick from the tint row.

Backgrounds

Subtle brand-tinted backgrounds

Use a 90% tint as a section background — gives a touch of brand without overwhelming. Common pattern in marketing pages.

Dark mode

Build dark surface variants

Shade your brand neutral 70–95% toward black to create dark-mode surfaces. The ramp shows you several options at once.

Tint percentages for spot printing

Print shops express spot color screens as percentages (e.g. 50% Pantone 286 C). The ramp visualizes what each percentage will look like.

How it works

The methodology — every transformation documented so the output is reproducible.

Parse the base color

HEX → sRGB 8-bit triple. Invalid input flags inline.

Mix in linear space

For tints: linear-mix(base, white, t). For shades: linear-mix(base, black, t). t ∈ {0.1, 0.2, … 1.0}.

Convert back to sRGB

Apply sRGB EOTF (gamma) on the way out, round to 8-bit per channel, emit HEX.

Render + copy

Each swatch is click-to-copy. Pick the steps that fit your design system and drop them into tokens or Tailwind.

Worked examples

Input	Result	Notes
#7A3DFF (brand purple)	Tint 50% → #BDA1FF · Shade 50% → #3F1F89	Both 50% midpoints. Use Tint for hover, Shade for pressed.
#16A34A (success green)	Tint 20% → #4ABA73 · Shade 20% → #11833B	20% steps are typically what hover/pressed states use.
#F59E0B (warning amber)	Tint 70% → #FBD994 · Shade 30% → #B97308	Useful for status badges (tint background, shade border).
#DC2626 (error red)	Tint 90% → #FDDBDB · Shade 80% → #2D0808	Extreme tints are subtle status backgrounds; extreme shades are dark-mode surfaces.

Common mistakes to avoid

Treating tints/shades as perceptual

sRGB-linear mixing is the de-facto standard but not perceptually uniform. For perceptually-flat ramps (e.g. button states at equal contrast steps), use the Tailwind palette generator with OKLCH.

Forgetting WCAG contrast on dark shades

Shade 80%+ approaches black — text on those tiles needs white or near-white to stay AA. Always pair shade steps with a contrast check.

Skipping the saturation drop

Tints desaturate as they approach white. A 90% tint of a saturated red looks pink-gray, not red. Use shorter ramps if you need to preserve chroma.

Using tints/shades for warning/success

Status colors should be discrete (own hue) — tinting your brand red to make 'warning' creates accessibility issues and weakens the semantic signal.

Frequently Asked Questions

Tint vs shade vs tone — the design vocabulary

Color theory distinguishes three operations on a base hue:

Tint: add white. Lighter and less saturated. "Baby pink" is a tint of red.
Shade: add black. Darker and less saturated. "Burgundy" is a shade of red.
Tone: add gray. Same lightness, less saturated. "Brick" is a tone of red.

When tints and shades aren't enough

For full UI systems, you'll outgrow a tint/shade ramp because the saturation desaturates as steps approach the endpoints. A saturated red tinted 80% is almost pink-gray. For saturation-preserved ramps, use HSL adjustment with chroma damping (the Tailwind palette generator does this via OKLCH).

Common UI state pattern

A reliable button-state ramp uses 4 stops from this tool:

Disabled: 60% tint of base.
Default: base.
Hover: 10% shade of base.
Pressed: 20% shade of base.

Verify each pair against the WCAG contrast checker before shipping.

Tints & Shades Generator