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.comlinear.appairbnb.com
stripe.com
Medido há 4 dias.
#ffffff background
#e5edf5 surface
#ffe0ef surface-2
#ffe0d1 surface-3
#061b31 foreground
#64748d muted-foreground
#533afd primary
#ffffff on-primary
#0f4d29 secondary
#e5edf5 borderComo 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.