Ferramentas

Paleta de cores de qualquer site

Digite o endereço de um site e receba a paleta dele: cada cor com sua função, em códigos hex, variáveis CSS, um tema Tailwind ou JSON.

Experimentestripe.com linear.app airbnb.com

linear.app

Medido há 4 dias.

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

Abrir a página completa da resposta Abrir o pacote de design

Como funciona

O Stylepack abre o site em um navegador de verdade, mede o que é renderizado (não o que a folha de estilos diz) em quatro larguras e nos dois temas, e guarda o resultado como um pacote de design. Um site já medido responde na hora; um novo leva menos de um minuto. Todo valor nesta página vem desse pacote.

Perguntas

Como a paleta é medida?

O site é renderizado em um navegador de verdade e as cores de fundos, textos, botões, links e bordas são lidas da página, agrupadas e nomeadas por função (background, foreground, primary, border e assim por diante). O destaque é a cor dos botões principais e dos links.

Inclui as cores do modo escuro?

Quando o site tem um tema escuro, ele também é medido e o CSS traz um bloco escuro com os valores correspondentes.

Posso ter a paleta em Tailwind ou no Figma?

O resultado oferece códigos hex, variáveis CSS, um tema Tailwind v4 e JSON. O pacote de design adiciona o tokens.json no formato de design tokens do W3C, que o Style Dictionary e os plugins do Figma leem.