Generate light and dark variants of any colour. Click any swatch to copy.
Tints (white → base)
Shades (base → black)
Quickly generate the full tint (lighter) and shade (darker) range of any colour. Tints linearly mix your colour with white; shades mix with black. Click any swatch to copy the hex code. Use the Steps slider to control granularity. Export the full range as CSS custom properties or JSON.
Tints linearly mix your colour with white (RGB interpolation). Shades linearly mix with black. The step slider controls how many intermediate values are generated.
Click any swatch or its hex label below it. A brief "copied" animation confirms the copy.
Yes — use the Copy CSS or Copy JSON buttons to export all tints and shades as CSS custom properties or a JSON object.
Related: Colour Palette Generator · WCAG Contrast Checker
Keywords: tints shades generator, colour lighter darker, hex tint generator, colour mixing tool