Color palette generator

How each palette is built

Every set starts from your base colour converted to hue, saturation and lightness, so the results stay recognisably “yours” instead of drifting to unrelated colours.

• Shades & tints keep the hue and saturation and step the lightness from 92% down to 12%. Use the light end for backgrounds and the dark end for text that still feels on-brand.
• Complementary rotates the hue 180°. It gives the strongest contrast — good for one call-to-action, tiring if used everywhere.
• Analogous takes neighbours 30° and 60° either side. These sit calmly together, which suits gradients and multi-screen backgrounds.
• Triadic spaces three hues 120° apart for a livelier, more playful set.
• UI-ready set desaturates the base heavily for the background and surface, darkens it for body text, and adds a contrasting accent — a starting point for an actual interface rather than a mood board.

Using a palette on store screenshots

Screenshots are seen as small thumbnails first, so contrast matters more than variety. Keep headline text on a light tint or a dark shade of your base rather than on the saturated base itself, and check it at thumbnail size. Use one accent at most per screenshot; a set where every screen introduces a new colour reads as unrelated images instead of one product.

Your colour never leaves the page — the palette is calculated in your browser.