Color Shades Generator
Generate shades and tints of any color. Click to copy the HEX, RGB or HSL code. Perfect for design systems and UI development.
Click any swatch to copy the HEX code
Shades
Tints
How to use?
Pick a base color from the picker or type a HEX code straight in. From it you get 10 darker shades plus 10 lighter tints. To copy the HEX code of any of them, just click on its square.
Related Tools
CNAB File Reader
Read Brazilian CNAB 240 and CNAB 400 banking files and display records decomposed by type.
GEDCOM Reader
Read GEDCOM (genealogy) files and list individuals (INDI) with name, birth and death dates.
PDF Merge
Merge several PDFs into a single file in the given order. Everything in your browser via pdf-lib.
Shades and tints of any colour
A single colour rarely gets the job done. Buttons, states, backgrounds and borders all want that same colour in lighter and darker versions, and that's what holds a design system together. Pick a starting colour and the generator builds the whole scale of shades (darker) and tints (lighter) on its own.
Every variation arrives with its code ready to go. One click copies the value in HEX, RGB or HSL, whichever format your project calls for. No more darkening and lightening the colour by eye and hoping the set stays harmonious: you get a coherent scale in one go, a solid base for your design system.
If you're a designer or developer who needs chromatic consistency, this clears up an annoying problem. The generation runs entirely in the browser, starting from the colour you set.