Colors

Extract the color palette of any website

Design Snap is a free Chrome extension that extracts the full color palette of any website — every color as a swatch with its hex value, ranked by how often it actually appears on the page. Copy a single hex, or export the whole palette to Tailwind, CSS variables, JSON or Figma in one click.

Add to Chrome — it's free See PRO plans

Free plan · No account · 100% local analysis

How to get a website's color palette

Getting the color palette of a website takes three steps: install Design Snap, press Extract on the page, and open the Colors tab. Every color is captured from the page's computed styles — not from a screenshot — so the hex values are exact, not approximated from pixels.

  1. Install

    Add Design Snap to Chrome from the Chrome Web Store. Free plan, no account.

  2. Extract

    Open the website and press Extract. The Colors tab shows the palette ranked by real usage, with hex values.

  3. Copy or export

    Copy any hex individually, or export the whole palette as Tailwind config, CSS variables, JSON or Figma tokens.

Exact values, meaningful order

Eyedropper tools sample pixels — antialiasing and gradients skew the result. Design Snap reads the page's computed styles, so every hex is the exact value the site's own CSS uses.

  • Colors ranked by real frequency of use on the page
  • Exact hex values from computed styles, not pixel sampling
  • Swatch grid with one-click copy per color
  • Hover any element with the inspector to see its specific colors
  • 100% local — the pages you visit are never sent anywhere
stripe.com
Design Snap Colors tab on stripe.com: color palette extracted as swatches with hex values, ranked by usage, with a Show all option

Color palette — FAQ

Install the Design Snap Chrome extension, open the website and press Extract. The Colors tab shows every color used on the page as a swatch with its hex value, ranked by how often it actually appears — so the brand's primary color surfaces first, not a random footer gray.

A page can contain dozens of colors, but only a handful define its identity. Ranking by real frequency of use puts the primary, background and text colors at the top and pushes one-off decorative colors down — which is what you need to reuse a palette meaningfully.

Yes. The extracted palette exports as Style Dictionary JSON, CSS variables, a tailwind.config.js colors object, or Figma tokens (Tokens Studio JSON) — all free. PRO adds shadcn/ui semantic mapping and a Tailwind v4 @theme block. See all export formats.

Tailwind theme generator

Get a ready-to-paste tailwind.config.js or Tailwind v4 @theme from any site.

shadcn/ui theme generator

Map any site's palette to shadcn/ui semantic roles, ready for globals.css.

Extract CSS variables

List every CSS custom property declared on :root of any website.

vs DevTools & CSS Peeper

How Design Snap compares to Chrome DevTools and CSS Peeper.