Tints and Shades Generator

How to use the tints and shades generator

1. Choose a Base color with the swatch, or type a value in Color code: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) or a CSS name such as teal.
2. Pick a Step: 5 %, 10 %, 20 % or 25 %. With 10 %, you get tints at 10 %, 20 % … 100 % and the same number of shades.
3. Choose how to Mix in: OKLCH (perceptual) or sRGB (classic). The two rows update at once: Tints (mixed with white) and Shades (mixed with black), each starting from the base.
4. Click Copy under any swatch to copy its HEX code.
5. Under Export as, choose CSS variables, Tailwind config (v3), Tailwind @theme (v4), SCSS variables or JSON, set a Name such as primary or brand, then Copy or Download the code.

Tints, shades and tones

In color theory, a tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with grey. The percentage says how much white or black is added: a 30 % tint is 70 % base color and 30 % white. At 100 % you reach pure white or pure black, which is why the last swatch of each row is always #FFFFFF or #000000; it marks the end of the scale.

Tints and shades are the quickest way to build a consistent scale from a single brand color: light backgrounds and hover states from the tints, borders, pressed states and dark text from the shades.

OKLCH or sRGB mixing?

sRGB (classic) mixes the red, green and blue values directly. It is what most older generators do and matches CSS color-mix(in srgb, …). The formula for a tint is simply channel + (255 − channel) × p, and for a shade channel × (1 − p). It is predictable, but the steps are not perceptually even: blues tend to drift toward purple as they lighten, and dark shades often look muddy.

OKLCH (perceptual) mixes in the OKLCH color space designed by Björn Ottosson in 2020, like CSS color-mix(in oklch, …). Lightness, chroma and hue are interpolated separately. White and black have no hue, so the base hue is kept all the way, and each step changes lightness by a visually similar amount. Colors that would fall outside the sRGB gamut are brought back by reducing chroma, not by clipping channels, so the hue stays stable. For design systems, this usually gives cleaner and more even scales.

Using the export

• CSS variables produce a :root block such as --primary-tint-20 and --primary-shade-40, ready to paste into a stylesheet.
• Tailwind config (v3) gives a colors object for theme.extend.colors; you then write classes like bg-primary-tint-20 or text-primary-shade-60. DEFAULT holds the base, so bg-primary works too.
• Tailwind @theme (v4) gives --color-… variables for the CSS-first configuration of Tailwind 4.
• SCSS variables and JSON suit other build tools and design tokens.

Names are lowercased and spaces become hyphens, so “Brand Blue” becomes brand-blue.