Uma alternativa ao ColorZilla para a paleta de um site inteiro
O ColorZilla é o conta-gotas que quase todo designer instala primeiro, e com razão: você aponta para qualquer pixel e a cor já está na área de transferência. Mas quando você precisa de todas as cores de um site, para que serve cada uma e de algo que dê para colar no código, ir pixel por pixel fica lento. É isso que o Stylasso faz.
Comparação
Os dados do ColorZilla vêm da página na Chrome Web Store e de colorzilla.com/chrome em 10 de novembro de 2026 (versão 4.1, cerca de 4.000.000 de usuários, nota 4,7).
| ColorZilla | Stylasso | |
|---|---|---|
| Cor de um pixel | Sim, com amostras de até 25×25 e estados de hover | Sem conta-gotas |
| Todas as cores de uma página | O Webpage Color Analyzer lista a paleta de uma página | Sim, agrupadas e ordenadas por quanto da tela cada uma ocupa |
| Para que serve cada cor | Não consta | Funções: primary, accent, background, surface, text, muted, border |
| Contraste | Não consta | Razão de cada cor sobre o fundo da página |
| Fontes, escala tipográfica, espaçamento, raios, sombras | Não consta (só cores) | Sim |
| Editor de gradientes CSS | Sim | Não |
| Exportação | Copiar as cores capturadas; CSS para gradientes. Não consta exportação de paleta | Variáveis CSS, Tailwind v4, DESIGN.md, JSON e moodboard PNG grátis; tema de shadcn/ui e tokens do Figma no Pro |
| Preço | A página não mostra preço nem plano pago | Grátis; o Pro custa US$ 9,99 em pagamento único |
“Não consta” quer dizer que não encontramos nessas duas páginas, não que testamos cada canto do ColorZilla.
Como é ler uma página inteira
O Stylasso analisou o Afterhours, uma ferramenta fictícia para desenvolvedores, em modo escuro, que criamos para as demos. Com um clique, ele atribuiu estas funções (a extensão usa os nomes em inglês):
- primary
#8b5cf6botões e links, 4,64:1 sobre o fundo - accent
#34d399segunda cor de ação, 10,22:1 sobre o fundo - background
#0c0a14fundo da página - surface
#17141fcards e painéis, 1,08:1 sobre o fundo - text
#ece9f5texto principal, 16,41:1 sobre o fundo - muted
#9a94adtexto secundário, 6,75:1 sobre o fundo - border
#2a2536divisores e contornos, 1,32:1 sobre o fundo
Ele também encontrou as fontes (Space Grotesk para títulos e texto, JetBrains Mono para código pequeno), quatro tamanhos de texto com altura de linha e peso, os passos de espaçamento, dois raios e duas sombras, uma delas um brilho violeta.
O que você cola
O começo da exportação gratuita de variáveis CSS dessa página, sem edição:
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
/* Keep the @import line above every other rule, including @import "tailwindcss". */
/* Afterhours style kit, extracted 2026-11-07 from https://afterhours.test/ with Stylasso (stylasso.pixlasso.com) */
:root {
--color-primary: #8b5cf6;
--color-accent: #34d399;
--color-background: #0c0a14;
--color-surface: #17141f;
--color-text: #ece9f5;
--color-muted: #9a94ad;
--color-border: #2a2536;
--color-white: #ffffff;
--font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
/* ...type scale, spacing, radii and shadows (28 more lines) */
}
Escolha Tailwind e o mesmo kit sai como um bloco @theme da v4; veja Transforme qualquer site em um tema do Tailwind v4.
Quando usar cada um
Fique com o ColorZilla (ou com o conta-gotas do DevTools) para pegar uma cor avulsa enquanto trabalha, tirar amostras de uma imagem ou montar um gradiente. Use o Stylasso quando quiser o sistema por trás de um site: a paleta com as funções, a tipografia e o espaçamento, prontos para uma folha de estilos, um projeto com Tailwind ou um prompt para o Cursor ou o Claude Code. Muita gente usa os dois.
Perguntas
O Stylasso consegue pegar uma cor só?
Não. Ele lê a página inteira de uma vez. Para um pixel específico, o certo é um conta-gotas.
Ele lê as cores de imagens?
Não. Ele lê o que o CSS da página pinta: fundos, texto, bordas, gradientes, sombras e preenchimentos de SVG inline. Fotos são ignoradas, para que uma imagem de destaque não inunde a paleta.
Algo é enviado para um servidor?
Não. A página é lida no seu navegador quando você clica no ícone, só naquela aba. Nada sai do seu navegador, a não ser que você publique um link de compartilhamento.