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 Novos Superpoderes para o seu Fluxo de Design
A versão 1.3.0 expande o ColorScope além da inspeção básica. Conheça e teste as novas ferramentas profissionais 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 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.