Extrair as cores de qualquer site, com a função de cada uma

Conseguir a lista de todos os códigos hex de uma página é fácil, mas ajuda pouco. O que você geralmente quer é a paleta: qual é a cor da marca, qual é a do texto, em cima de que cor ficam os cards. O Stylasso descobre isso pelo lugar onde cada cor é pintada.

Uma paleta de exemplo

O Stylasso rodou no Northwind Roasters, uma cafeteria fictícia que criamos para demonstrações. Estas são as funções que ele atribuiu (a extensão usa os nomes em inglês), com o contraste de cada cor sobre o fundo da página:

primary#c2410cbotões principais e links, 4,99:1 sobre o fundo
accent#4d7c5asegunda cor de ação, 4,65:1 sobre o fundo
background#fffaf3fundo da página
surface#f6eadbcards e painéis, 1,14:1 sobre o fundo
text#2b1d14texto principal, 15,69:1 sobre o fundo
muted#7a6656texto secundário, 5,24:1 sobre o fundo
border#ead8c3divisórias e contornos, 1,34:1 sobre o fundo

Outras duas cores dessa página (um âmbar de destaque e um laranja escuro de hover) ficaram como extras sem função, então nada do que a página pinta se perde.

Como as funções são escolhidas

Primary vem dos botões preenchidos e dos links da primeira tela, com peso extra para a cor do logo.
Background, surface e border vêm das áreas de página, cards e divisórias, ponderadas pelo quanto ocupam da tela.
Text e muted vêm do texto principal e das legendas; o Stylasso escolhe uma cor de texto que passe no WCAG AA sobre o fundo quando a página tem uma.
Degradês, sombras e preenchimentos de SVG também entram na leitura, e cores quase iguais são unidas.

Leve para onde você trabalha

A mesma paleta como variáveis CSS (grátis):

: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 */
}

As outras exportações também trazem a paleta: um @theme do Tailwind v4, um DESIGN.md para ferramentas de programação com IA, JSON, uma imagem de moodboard de 1200 × 630 e, no Pro, design tokens W3C que você importa no Figma e um tema shadcn/ui.

Sem extensão

O Chrome DevTools tem um painel CSS Overview (no menu Mais ferramentas) que lista todas as cores de uma página e aponta contraste baixo. É um bom jeito gratuito de ver a lista crua. Ele não diz qual papel cada cor cumpre e não exporta nada que você possa colar. Se você só precisa de uma cor, o conta-gotas de qualquer seletor de cor do DevTools resolve.

Perguntas

É um seletor de cor?

Não. O Stylasso lê a página inteira de uma vez. Para um único pixel, use um conta-gotas.

Funciona em sites escuros?

Sim. Páginas escuras são detectadas, as funções são lidas do mesmo jeito e a exportação shadcn/ui escreve o tema começando pelo modo escuro.

Alguma coisa é enviada para um servidor?

Não. A página é lida no seu navegador quando você clica no ícone, e só naquela aba. Nada sai do seu navegador, a não ser que você publique um link de compartilhamento.