Tint and Shades Generator

Tint and Shade Generator

Build a complete palette from a single brand color. Enter any color – HEX, RGB, HSL, HSV, CMYK, or a CSS color name – and the generator produces three rows: tints that fade to white, shades that fade to black, and tones that fade to gray. Pick 5, 10, or 20 steps, click a swatch to copy its code, or export the whole palette as CSS variables.

Tints, shades, and tones explained

Painters have used these terms for centuries, and they map cleanly onto digital color:

• Tint – base color + white. Useful for backgrounds, hover states, and subtle highlights.
• Shade – base color + black. Useful for pressed buttons, borders, and text on light backgrounds.
• Tone – base color + gray. Useful for muted UI states and disabled elements.

The generator mixes in the RGB color space in equal increments. With 10 steps you get 10%, 20%, … 100% mixes, where 100% is pure white, black, or gray, so you can see exactly how far a color can be pushed.

Building a design system scale

Frameworks such as Tailwind CSS and Material Design use 50–900 color scales. A quick way to create one is to take four or five tints for the light end, the base color in the middle, and four shades for the dark end. Copy them as CSS custom properties:

:root {
  --tint-20: #DA3737;
  --shade-20: #A70404;
}

Accessibility tip

Check contrast whenever you place text on a tint or shade. Light tints need dark text and deep shades need white text – each swatch label already switches between black and white using the WCAG luminance formula.

To lower saturation instead of lightness, use the Color Desaturation tool; to convert individual swatches, try HEX to RGB.