Browse reference colors for top brands and turn any of them into a full accessible design system. Search by sector, copy hex values, or use a brand color as the generator's primary seed.
Browse the anchor colors behind well-known brands and turn any of them into a full, accessible design system in one click. Each entry lists the most widely cited color for a mark, with the hex value ready to copy.
Choose "Use as seed" and the design system generator derives a perceptual scale, semantic tokens, light and dark themes and production CSS from that single brand color.
These are widely published reference values, not official brand guidelines. Always confirm the current colour with the brand's own materials before shipping anything in their identity. Open the design system generator to build an accessible palette and full theme from any seed.
Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
Search or filter by sector to find a brand whose colour fits the project.
Copy the HEX value with one click, or open it in the full design system generator as the primary seed.
Generate the scale, palette, tokens and themes, then export CSS, JSON, Tailwind or shadcn.
Frequently asked questions
Are these official brand colors?
They are widely published reference values, not official brand guidelines. Confirm the current color with the brand's own materials before shipping anything in their identity.
How do I turn a brand color into a design system?
Click 'Use as seed' on any card. It opens the design system generator with that color pre-filled as the primary, so everything — scale, palette, tokens, themes and exports — derives from it.
Why is only one color listed per brand?
Most marks have a single anchor color. For brands with multi-color or gradient identities we list the most commonly cited anchor, which is the best single seed for palette generation.