Generate tints and shades of any colour — copy each hex with one click
A professional colour palette does not consist of a single colour, but a family of related hues. A brand's primary blue needs lighter tints for backgrounds and hover states, and darker shades for depth and emphasis. Building these tints and shades by hand — tweaking each RGB value or lightness parameter separately — is tedious and often produces inconsistent or clashing results. A shade generator applies colour theory to derive a mathematically balanced set of lighter and darker variants from any base colour. Designers building design systems use this to generate hover, active, and focus states from a single input colour. Developers needing CSS variables for a brand's colour variants can use the generated codes directly. Product teams designing data visualisations often need a palette of colours that feel cohesive but distinct, which shade generation provides automatically. Enter any colour and the tool generates ten tints (mixed with white) and ten shades (mixed with black), each with its hex code shown and clickable to copy. The result is a complete colour family ready to use in your design or codebase, derived from a single choice rather than requiring manual adjustment of ten separate values.
Click any swatch to copy its hex code.
Automatic tints and shades — Generate ten lighter tints and ten darker shades from any base colour with mathematically consistent transitions.
Hex codes ready to copy — Every swatch is clickable to copy its HEX code instantly — build a complete colour palette without manual transcription.
Design system ready — The generated palette works perfectly for building CSS custom properties (--color-50, --color-100, etc.) or Figma design tokens.
Balanced colour families — Uses colour mixing (white/black blending) to produce visually harmonious lighter and darker variants that feel cohesive.