How to use

1. Upload your brand logo using the drop zone or file picker — or click a preset to try a sample palette.
2. The tool extracts up to 7 dominant colors using k-means clustering and assigns each one a brand role (Primary, Accent, Hero, Background, etc.).
3. Watch the storefront preview on the right update instantly with your brand's colors applied across every UI element.
4. Click any color swatch or edit the hex field directly to fine-tune a role — contrast ratio updates in real time.
5. Hit ✏ on any role to open the theory panel and explore harmonies: complement, triadic, split-complementary, analogous, and shade variants.
6. Copy any hex value by clicking the swatch. Use the hex codes directly in your CSS variables, Figma tokens, or design system.

Frequently Asked Questions

Did you know?

• The human eye can distinguish around 10 million different colors, but most brand palettes use only 2–5. Constraining your palette actually makes a brand more recognisable, not less.
• Color accounts for up to 85% of the reason people choose one product over another, and increases brand recognition by up to 80% — making your palette one of the highest-leverage brand decisions.
• The WCAG contrast standard of 4.5:1 was derived from research on people with moderately low vision. Hitting it benefits anyone reading in bright sunlight or on a low-quality screen.

Related tools