Loona Colour Shades & Tints Generator — Full 50–950 Scale
Design systems never use one lonely colour: buttons need a hover state, backgrounds need a whisper of the hue, text needs its deep version. This generator produces the whole family from a single brand colour, in the same step pattern popularised by Tailwind CSS.
A full 50–950 tonal scale (Tailwind-style) plus five tints (toward white) and five shades (toward black). Click any swatch to copy its HEX.
Tonal scale 50–950
Tints (toward white)
Shades (toward black)
How to use the Colour Shades Generator
- Pick your base (brand) colour.
- Read the scale: 50 is the faintest wash, 500 is closest to your base, 950 is near-black with your hue inside.
- Click any swatch to copy its HEX, or copy the ready-made CSS variables block for your whole scale.
How it works
The scale keeps your colour’s hue and saturation and walks lightness through fixed steps (97% down to 9%), which is exactly how professional tonal scales are built. Tints mix the colour toward white and shades toward black in even fifths.
Worked example
A developer rebrands a dashboard: one teal becomes eleven variables, and buttons, hovers, borders and dark text all match by construction.
Frequently Asked Questions
What do the numbers 50–950 mean?
They are lightness steps, not percentages: 50 ≈ background wash, 100–200 borders and subtle fills, 400–600 main UI, 700–950 text and deep accents.
Is this the same as the Color Palette Generator?
No — that tool (in Loona Image Tools) suggests colour combinations. This one expands a SINGLE colour into its full tonal family for design systems.
Can I copy the whole scale at once?
Yes — the output box contains ready CSS variables for all eleven steps.
Are the colours exact?
Yes — computed from your base colour in HSL space with fixed lightness steps, identically every time.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).