Turn one color into complete tint, shade and tone scales and export them as CSS variables, in your browser.
A design system rarely needs one color: it needs a family. Tints, shades and tones are the three classic ways to build that family from a single hue. A tint is the color mixed with white, giving lighter, softer versions used for backgrounds, hover surfaces and disabled states. A shade is the color mixed with black, giving darker versions used for text on light backgrounds, borders and pressed states. A tone is the color mixed with gray, which lowers saturation without changing lightness as sharply — the least known of the three and the one that produces the muted, editorial look that pure tints and shades cannot.
The math here is deliberately simple and predictable: each step is a linear interpolation of the RGB channels between your base color and the target (white #ffffff, black #000000 or mid gray #808080), in 10% increments, so the tenth step lands exactly on the target. That is the same convention used by the classic tint-and-shade generators, and it makes every value reproducible — you can recompute any swatch by hand. It is worth knowing the trade-off: because the interpolation happens in sRGB rather than in a perceptual space such as OKLCH, the perceived lightness steps are not perfectly even, especially for very saturated yellows and cyans. For UI scales that is usually fine and often preferred, since the results stay close to the original hue.
The export is where this becomes practical. One click copies the palette as CSS custom properties, ready to paste into a :root block, or as a bare list of hex codes for a design tool. Turning on Tailwind-style naming remaps the palette to the familiar 50–900 scale — 50 to 400 lightening, 500 as your base color, 600 to 900 darkening — which drops straight into a Tailwind theme or any token file that follows the same convention. You can also download the palette as a .css file. Every calculation and the file itself are produced 100% in your browser; the color you choose is never sent to a server.
A tint is your color mixed with white, a shade is your color mixed with black, and a tone is your color mixed with gray. Tints and shades change lightness; tones mainly reduce saturation, giving a muted result at a similar lightness.
Each step is a straight linear mix of the RGB channels between your base color and white, black or 50% gray, in 10% increments — so the tenth tint is pure white and the tenth shade is pure black. The values are fully reproducible.
Yes. Enable Tailwind-style names and the export uses the 50–900 scale, with 500 as your base color, ready to paste into your theme configuration or a CSS variables file.
Not automatically. The scale is mathematically even, not perceptually even, so you still need to check text and background pairs against the WCAG contrast thresholds — as a rule of thumb, pair the lightest tints with the darkest shades.
No. The palette, the CSS export and the downloaded file are all generated locally in JavaScript on your device — nothing is transmitted or stored on any server.
Vai.la turns any URL into a short link with click statistics, QR Code and your own biolink.
Vai.la is not responsible for how the tools are used or for decisions made based on their results.