This tool takes any base colour and generates a full palette from it: tints (progressively lighter), shades (progressively darker), and a 50–900 tonal scale like the ramps in Tailwind CSS or Material Design. It is built for designers and developers who have one brand colour and need a consistent set of lighter and darker variants for backgrounds, borders, hover states and text.
How it works
The base hex is parsed into RGB, then three families are produced:
- Tints linearly interpolate each RGB channel toward white (255) by an increasing factor, so the colour gets lighter step by step.
- Shades interpolate each channel toward black (0), getting darker.
- Tonal scale (50–900) converts the colour to HSL and sweeps the lightness from about 95% down to about 10% while keeping the hue and saturation fixed — which is exactly how design-system colour ramps are built.
All conversions use standard sRGB and HSL maths, so the output is deterministic.
Example
From a base of #3b82f6 (a blue), the generator yields a 50 step near-white blue (around #eff6ff), the base sitting near the 500 step, and a 900 step that is a deep navy (around #1e3a8a) — the same shape as a Tailwind blue ramp. The tints column gives softer pastel blues and the shades column gives muted dark blues.
Click any swatch to copy its hex code. All shades are computed locally in your browser using standard sRGB and HSL maths — nothing is uploaded.
Tints vs shades vs tonal scale — which should I use?
The three families serve different purposes in real projects:
Tints are useful for backgrounds and disabled states where you want the brand colour to feel present but recede. Because they approach white, tints pass WCAG contrast checks for dark text more easily than the saturated base.
Shades give you hover and active states. A button at the base colour that darkens to the first or second shade on hover follows the visual convention users expect: pressed things get slightly darker.
The tonal scale is what most design systems actually ship. Tailwind, Material Design, and Radix all publish swatches at steps like 100, 200, 300 through 900. The 50-900 output from this generator mirrors that structure, so you can drop it directly into a Tailwind theme extension or a CSS custom-property set. The 500 step is usually closest to your original input colour.
Practical guidance
- Text contrast: use 900-level shades on white backgrounds or 50-level tints as text on very dark backgrounds. Run the pair through a WCAG contrast checker for AA or AAA compliance.
- Borders: a step or two darker than the background tint reads as a subtle border without introducing a new hue. Try 100 as a card background and 200 as its border.
- Semantic tokens: some teams map the raw steps to semantic names —
--color-brand-subtle= 50,--color-brand-default= 500,--color-brand-emphasis= 700. This abstraction lets you retheme by swapping the base colour alone. - Dark mode: mirror the scale. Light-mode foreground at 900 becomes dark-mode foreground at 50; light-mode background at 50 becomes dark-mode background at 950. The same tonal generator covers both themes from one input.