Design & Layout

Color Palette

Extract every colour used on a page into one palette. Perfect for reverse-engineering a design system or matching an existing brand.

When you'd use it

• Reverse-engineer the palette of a site you are rebuilding
• Audit whether a design system is actually being followed, or has sprouted twelve greys
• Match a new landing page to an existing brand you have no style guide for
• Collect a reference palette while researching competitors

How to use Color Palette

1. Run Color Palette on any page.
2. Review the swatches, ordered by how often each colour appears.
3. Click any swatch to copy its value.
4. Export the palette to reuse it in your design tool.

Color Palette FAQ

Does it include colours from images?

It extracts colours applied through CSS — text, backgrounds, borders. That is what you need to rebuild a design system; image colours are usually photographic rather than brand colours.

Why does it show so many near-identical colours?

That is usually a real finding. Sites without design tokens accumulate slightly different greys and blues over time, and seeing them side by side is the first step to consolidating them.

Works well with