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 cores sugeridas 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.
5 Superpoderes para o seu Fluxo de Design
O ColorScope vai muito além da inspeção básica. Conheça e teste as ferramentas profissionais integradas diretamente abaixo.
Simulador de Daltonismo & Auditoria WCAG
Simule deficiências visuais em tempo real na aba aberta com matrizes SVG de alta fidelidade e verifique conformidade de contraste WCAG 2.1 (AA / AAA).
Extrator & Playground de Gradientes
Detecta gradientes lineares, radiais e cônicos no DOM. Exibe color stops detalhados e gera código pronto para CSS e classes Tailwind.
Extrator de SVGs para React / JSX
Mapeia e higieniza ícones vetoriais da página. Exporte com 1 clique como componentes funcionais React prontos com props e tipagem.
export const IconLayers = (props) => (
<svg viewBox="0 0 24 24" {...props}>...</svg>
);
Gerador de Brand Style Guide (PNG)
Crie instantaneamente uma prancha visual em alta resolução (1200×800) contendo a paleta de cores, hierarquia tipográfica e estilo de botões.
Harmonias Cromáticas & Escala 50–950
Gere relações harmônicas matemáticas (Complementar, Análoga, Tríade, Tétrade) e escalas completas 50–950 com precisão algorítmica.
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 Estrelas