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

linear.app

Measured 4 days ago.

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111

1#08090a  background
2#101112  surface
3#1c1d1e  surface-2
4#07220a  surface-3
5#f7f8f8  foreground
6#8a8f98  muted-foreground
7#e5e5e6  primary
8#111111  on-primary
9#5e6ad2  secondary
10#1c1d1e  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.