ColorScope — Inspetor de Design Visual

Inspecione a linguagem visual da web. Extraia cores, tipografia, componentes, sombras e design tokens de qualquer site.

🎨 ColorScope — Inspecione a linguagem visual da web. O ColorScope é um inspetor de design visual profissional e completo para designers, desenvolvedores front-end e criadores de produtos. Transforme qualquer website aberto no seu navegador em um Design System estruturado e exportável com apenas um clique. Ao contrário de um simples conta-gotas de cores, o ColorScope analisa profundamente o DOM da página para extrair a paleta cromática predominante, hierarquia tipográfica, estilos de componentes, sombras, espaçamentos e design tokens prontos para produção. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ PRINCIPAIS RECURSOS DO COLORSCOPE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. 🎨 ANÁLISE CROMÁTICA & PALETA ESSENCIAL (MEDIAN CUT) • Extração automática das cores dominantes agrupadas por volume e dominância visual. • Identificação semântica inteligente: Primária, Fundo, Texto, Bordas e Acentos. • Conversão instantânea de formatos com 1 clique (HEX e RGB). 2. ⚡ GERADOR DE ESCALA HARMÔNICA (50 A 900) • Clique em qualquer cor detectada para calcular uma escala tonal completa (50, 100, 200, 300, 400, 500, 600, 700, 800, 900). • Geração dinâmica de 7 cores semânticas de apoio em tempo real. • Ideal para criação de temas Tailwind CSS, Material UI e Radix. 3. Aa TIPOGRAFIA & TYPE SCALE • Mapeamento de todas as famílias de fontes utilizadas no site. • Hierarquia tipográfica completa com tamanhos (px/rem), pesos (font-weight) e alturas de linha (line-height). • Preview interativo dos tipos renderizados em tempo real. 4. 🔘 BOTÕES & COMPONENTES VISUAIS • Detecção de botões, cards e contêineres principais. • Extração de propriedades reais: border-radius, background, cor do texto, padding e box-shadow. • Botão "Copiar CSS" instantâneo para reaproveitar componentes. 5. 📋 EXPORTAÇÃO DE DESIGN TOKENS • Variáveis CSS nativas (:root com tokens padronizados). • Configuração Tailwind CSS (tailwind.config.js pronta para colar). • Tokens W3C / Design Tokens em JSON compatível com Figma Tokens e Style Dictionary. 6. 🖥️ COLORSCOPE STUDIO EM TELA CHEIA (FULLSCREEN) • Abra o relatório completo em uma interface ampla estilo macOS Sequoia com HUD dinâmico de inspeção e abas segmentadas. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACIDADE & SEGURANÇA TOTAL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • 100% Local: As análises são processadas exclusivamente na sua máquina pelo motor do Chrome. • Sem Servidores Externos: Nenhum dado, cookie, imagem ou código navegado é transmitido para a internet. • Criptografia Local: Seu histórico recente é salvo criptografado no chrome.storage.local da sua máquina. • Sem Rastreadores ou Telemetria. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 COMO USAR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Abra qualquer website público no seu navegador. 2. Clique no ícone do ColorScope na barra de ferramentas do Chrome. 3. Clique em "Inspecionar Aba" para visualizar o resumo ou em "Ver Completo" para abrir o Studio macOS. 4. Clique nas cores e componentes para copiar os códigos ou baixar seus tokens em CSS, Tailwind ou JSON!