Color Tints Generator

Hex tints: lighter shades of the same hue

A tint is a lighter variation of a base color, produced by mixing the hue with white. Tints are the natural complement of shades (mix with black): together they form the full vertical ramp of a color in a design system. Tints power the gentle, low-energy parts of an interface — soft backgrounds, card surfaces, informational banners, disabled controls and pastel accents. They are what makes a UI feel airy instead of heavy.

The HSL math

In the HSL model, a tint is generated by holding H and S and raising L. A typical ramp from L=50% walks to 60%, 70%, 80%, 90%, 95% — the inverse of a shade ramp. Be careful: pushing L above 95% makes the color nearly indistinguishable from pure white, and high saturation at high lightness can look washed-out. Many palettes drop the saturation slightly as L approaches the top of the ramp to keep things readable.

OKLCH for perceptually uniform tints

HSL tints are easy to generate but not perceptually uniform — equal numerical bumps in L don't feel like equal bumps in brightness, especially near the white end. OKLCH (CSS Color Module 4) fixes that: it is uniform like Lab and shipped natively in modern browsers. Tailwind v4, Material 3 and Radix Colors all generate their light steps in OKLCH or Lab so each tint feels equidistant. For evergreen targets, prefer oklch() over hsl().

Where tints belong in a UI

• Subtle backgrounds — page backdrops at L≈95%.
• Card surfaces — elevated panels at L≈92%.
• Info / success / warning banners — soft tint backgrounds at L=85–90% with a darker shade for the text.
• Disabled controls — tints reduce contrast and signal "not interactive" without losing brand identity.
• Hover state in light themes — a faint tint of the row color is the standard table-row hover.
• Pastel and editorial palettes — pastels are, by definition, tints of saturated hues.

Numeric ramps: Tailwind and Material

In Tailwind, everything below 500 in the ramp (50, 100, 200, 300, 400) is a tint of the base. Material Design uses the same convention with steps 50, 100, 200, 300, 400. Five to nine tints is the practical sweet spot — fewer than five and your light UI runs out of subtle surfaces; more than nine and the steps start blurring together near white.

Pitfalls, contrast and print

Tints on the light end can fail WCAG 4.5:1 when paired with anything but very dark text — always test contrast. In data visualization, a sequence of close tints looks unified but is hard to differentiate, so combine tints with a separate hue or pattern. In offset print, tints suffer from dot gain: a 10% tint on screen often prints noticeably darker because the ink dots spread on absorbent paper. And while light backgrounds + dark text comfortably passes accessibility, light text on a light tint never does.

FAQ

What's the difference between tint and shade? A tint is base + white (lighter); a shade is base + black (darker). Both keep the hue constant.

Do dark-mode interfaces use tints? Rarely as backgrounds — dark mode is built mostly on shades. Tints in dark mode show up as accent text or chip backgrounds.

Are pastel colors tints? Yes — classic pastels (powder blue, baby pink, mint) are tints of saturated hues.

How many tints should I generate? Five to nine; enough to cover backgrounds, surfaces, banners and disabled states without invisible steps.