Tools

Color palette from any website

Enter a website address and get its palette: every color with its role, as hex codes, CSS variables, a Tailwind theme or JSON.

Trystripe.com linear.app airbnb.com

airbnb.com

Measured 4 days ago.

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff

1#ffffff  background
2#dddddd  surface
3#f2f2f2  surface-2
4#222222  foreground
5#6c6c6c  muted-foreground
6#da1249  primary
7#ffffff  on-primary
8#ffffff  border

Open the full answer page Open the design pack

How it works

Stylepack opens the site in a real browser, measures what renders (not what the stylesheet says) at four widths and in both themes, and stores the result as a design pack. A site already measured answers at once; a new one takes under a minute. Every value on this page comes from that pack.

Questions

How is the palette measured?

The site is rendered in a real browser and the colors of backgrounds, text, buttons, links and borders are read from the page, clustered and named by role (background, foreground, primary, border and so on). The accent is the color of its primary buttons and links.

Does it include dark mode colors?

When the site has a dark theme, it is measured too and the CSS carries a dark block with the matching values.

Can I get the palette in Tailwind or Figma?

The result offers hex codes, CSS variables, a Tailwind v4 theme and JSON. The design pack adds tokens.json in the W3C design tokens format, which Style Dictionary and Figma plugins read.