How to use the palette generator
Choose a starting colour with the picker, or type a HEX value such as #4F46E5 into the box. The moment you change it, the swatches below update with a full set of related colours. Hover any swatch and hit Copy to put its HEX on your clipboard, ready to paste into CSS, a design tool or your code. You can also upload a photo instead to automatically extract its most common colours.
What each group means
- Tints are your base colour mixed toward white. They are great for backgrounds, hover states and subtle surfaces where you want the same hue but less intensity.
- Shades are your base colour mixed toward black. Use them for text, borders, pressed buttons and depth.
- Complementary is the colour directly opposite on the colour wheel (hue + 180°). It gives you maximum contrast for accents and calls to action.
- Analogous are the two neighbours of your colour on the wheel (hue ± 30°). They sit comfortably next to the base and are perfect for harmonious, low-tension designs.
The colour maths, briefly
Every calculation runs through the HSL colour model, hue, saturation and lightness. Your HEX colour is converted to HSL, and from there the tool adjusts only what it needs to. For tints and shades it keeps the hue and saturation fixed and walks the lightness up toward 95% or down toward 8% in even steps. For the complementary and analogous colours it rotates the hue while leaving saturation and lightness alone, then converts everything back to HEX. Working in HSL is why the results feel like a coherent family rather than random colours.
Tips for building a usable palette
A solid scheme rarely needs more than a base, one accent and a spread of neutrals. Pick your brand colour as the base, borrow the complementary as a single accent for buttons and links, and use the tints and shades to build a gentle scale for surfaces and text. If a pairing feels too loud, try an analogous colour instead of the complementary, it lowers the contrast while staying in the same mood.
Frequently asked questions
Can I enter a 3-digit HEX like #abc?
Yes. Short HEX codes are expanded automatically, so #abc becomes #AABBCC before the palette is built.
How many colours do I get?
Thirteen in total: 5 tints, 5 shades, 1 complementary and 2 analogous, plus your base colour shown above.
How is the palette generated?
Your base colour is converted to HSL, then the tool keeps the hue and saturation while raising the lightness for tints and lowering it for shades. The complementary colour shifts the hue by 180 degrees and the analogous colours shift it by plus and minus 30 degrees.