Inspecione a Linguagem Visual de qualquer website.
Extraia cores dominantes, paletas algorítmicas com escala Tailwind 50-900, famílias tipográficas e gere Design Tokens prontos para copiar instantaneamente.
Playground Cromático Interativo
Escolha ou digite qualquer cor hexadecimal ou teste paletas de marcas famosas e veja o algoritmo do ColorScope gerar a escala Tailwind 50–900 e os tokens CSS em tempo real.
Inspecionar Padrão vs ColorScope
Veja quanto tempo e retrabalho você economiza ao inspecionar o design de qualquer aplicação.
| Recurso / Tarefa | Inspecionar do Navegador (F12) | ColorScope Extensão |
|---|---|---|
| Extrair Cores Usadas na Página | ❌ Caçar manualmente em centenas de regras CSS | ✅ 1 Clique: Mapeia todas ordenadas por frequência |
| Criação de Escala 50 a 900 (Tailwind) | ❌ Calcular saturação/luz na mão em sites externos | ✅ Automático: Algoritmo Median Cut integrado |
| Auditoria de Tipografia e Hierarquia | ❌ Clicar em cada tag H1, H2, H3 para ver font-size | ✅ Raio-X: Todas as fontes e tamanhos estruturados |
| Exportação para Código (Tokens / Tailwind) | ❌ Digitar manualmente cada variável no editor | ✅ Exportador Pronto: CSS (:root), Tailwind e JSON |
| Privacidade & Sem Cadastro | ⚠️ Plugins de terceiros que exigem login e rastreiam | ✅ 100% Local-First: Sem login, sem servidores |
Substitua 4 ferramentas separadas pelo ColorScope
Mantenha seu navegador leve e veloz com uma suíte visual moderna e completa.
Conta-gotas básico de 1 pixel por clique, sem gerar escalas completas nem paletas.
Identifica fontes de forma isolada, sem mapear pesos, tamanhos e hierarquia H1–H6.
Exigem abrir páginas externas lentas e cheias de anúncios para calcular tons Tailwind.
Cores DOM, paletas 50–900, fontes, componentes e exportação de tokens em 1 só lugar.
Pronto para usar em 3 segundos
Sem necessidade de criar conta, sem formulários e sem configurações complexas.
Adicione a extensão gratuitamente direto pela Chrome Web Store oficial.
Acesse sua página favorita e clique no ícone do ColorScope na barra superior.
Obtenha paletas 50–900, fontes, DOM e tokens CSS prontos para colar.
Tudo o que Designers e Desenvolvedores precisam.
Esqueça o Inspecionar Elemento tradicional. O ColorScope analisa e organiza todo o ecossistema visual da página instantaneamente.
Gerador & Escala 50-900
Extração algorítmica Median Cut que calcula a cor primária, secundária e a escala Tailwind 50-900 completa.
Auditoria de Cores do DOM
Mapeamento de todas as cores de fundo, textos e bordas com contagem exata de ocorrências na tela.
Hierarquia Tipográfica
Identificação de famílias tipográficas, pesos (font-weight), tamanhos (px/rem) e line-heights utilizados.
Exportação de Design Tokens
Exporte todo o design system detectado diretamente para variáveis CSS (:root), JSON estruturado ou configuração de cores do Tailwind CSS.
Componentes & Micro-Design
Inspecione botões, campos de entrada, raio de borda (border-radius) e sombras (box-shadow) sem poluição visual.
Explore a Interface Pop-Up
Clique nas abas abaixo para ver como cada ferramenta se comporta dentro do pop-up da extensão.
Pronto para acelerar seu fluxo de design?
Instale agora a extensão gratuita para Google Chrome e comece a inspecionar.
Adicionar ao Chrome — É GrátisGostou do ColorScope? Avalie na Chrome Web Store!
Por ser um projeto 100% gratuito e independente, sua avaliação de 5 estrelas e feedback na loja nos ajudam imensamente a manter o projeto ativo e trazer novas atualizações para a comunidade.
Deixar uma Avaliação de 5 EstrelasPerguntas Frequentes
Tudo o que você precisa saber sobre a segurança, funcionamento e licença do ColorScope.
O ColorScope é realmente 100% gratuito?
Sim, o ColorScope é totalmente gratuito. Não possui assinaturas, não exige cadastro nem bloqueia recursos por paywall.
Ele funciona em qualquer website?
Sim! Você pode abrir qualquer site público na web (como YouTube, Apple, Stripe, Landing Pages) e clicar no ícone do ColorScope para mapear o design na hora.
Meus dados de navegação ou senhas são coletados?
Não. A extensão opera com arquitetura Local-First. Nenhum dado sai do seu computador, não há servidores de rastreamento e o código roda estritamente na memória temporária do seu navegador.
Como faço para exportar para o Tailwind CSS?
Ao abrir o ColorScope, clique na aba Tokens, selecione a opção Tailwind no topo e clique no botão Copiar Código. O bloco theme.extend.colors já sai formatado pronto para o seu arquivo tailwind.config.js.
Sempre em evolução: novas funções a caminho
O ColorScope é mantido ativamente pela comunidade de desenvolvedores. Receba atualizações automáticas no seu navegador com novas integrações e ferramentas avançadas de design.
Copie e cole variáveis direto no canvas do Figma.
Teste a acessibilidade cromática em tempo real.
Extraia e baixe ícones vetoriais da página.