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
airbnb.com
Medido há 4 dias.
#ffffff background
#dddddd surface
#f2f2f2 surface-2
#222222 foreground
#6c6c6c muted-foreground
#da1249 primary
#ffffff on-primary
#ffffff 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.