Extract the colors from any website, with roles

A list of every hex code on a page is easy to get and hard to use. What you usually want is the palette: which color is the brand, which one is the text, what the cards sit on. Stylasso reads that from where each color is painted.

An example palette

Stylasso ran on Northwind Roasters, a fictional coffee shop we built for demos. These are the roles it assigned, with each color's contrast against the page background:

primary#c2410cmain buttons and links, 4.99:1 on the background
accent#4d7c5asecond action color, 4.65:1 on the background
background#fffaf3page background
surface#f6eadbcards and panels, 1.14:1 on the background
text#2b1d14body text, 15.69:1 on the background
muted#7a6656secondary text, 5.24:1 on the background
border#ead8c3dividers and outlines, 1.34:1 on the background

Two more colors on that page (an amber highlight and a dark orange hover state) were kept as extras without a role, so nothing the page paints is lost.

How the roles are picked

Primary comes from the filled buttons and links on the first screen, with a bonus for the logo's color.
Background, surface and border come from the page, card and divider areas, weighted by how much of the screen they cover.
Text and muted come from the body copy and captions; Stylasso picks a text color that passes WCAG AA on the background when the page has one.
Gradients, shadows and SVG fills are sampled too, and near-duplicates are merged.

Take it where you work

The same palette as CSS variables (free):

:root {
  --color-primary: #c2410c;
  --color-accent: #4d7c5a;
  --color-background: #fffaf3;
  --color-surface: #f6eadb;
  --color-text: #2b1d14;
  --color-muted: #7a6656;
  --color-border: #ead8c3;
  --color-amber-400: #f59e0b;
  --color-orange-600: #9a3412;
  /* ...fonts, type scale, spacing, radii, shadows */
}

The other exports carry it too: a Tailwind v4 @theme, a DESIGN.md for AI coding tools, JSON, a 1200 × 630 moodboard image, and in Pro, W3C design tokens you can import into Figma and a shadcn/ui theme.

Without an extension

Chrome DevTools has a CSS Overview panel (in the More tools menu) that lists every color a page uses and flags low contrast. It is a good, free way to see the raw list. It does not tell you which color plays which part, and it does not export anything you can paste. If you only need one color, the DevTools eyedropper in any color picker is enough.

Questions

Is it a color picker?

No. Stylasso reads the whole page at once. For a single pixel, use an eyedropper.

Does it work on dark sites?

Yes. Dark pages are detected, the roles are read the same way, and the shadcn/ui export writes the theme dark-first.

Is anything sent to a server?

No. The page is read in your browser when you click the icon, and only in that tab. Nothing leaves your browser unless you publish a share link.