ColorScope — Inspetor de Design Visual

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

ColorScope é o inspetor visual definitivo para designers, desenvolvedores frontend e profissionais de produto. Inspecione e extraia todo o ecossistema de design de qualquer página web instantaneamente, com um clique. Chega de perder tempo abrindo o DevTools para descobrir cores hexadecimais, tamanhos de fonte ou estilos de componentes. O ColorScope analisa a página inteira e entrega um raio-x visual completo, organizado e pronto para exportação. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ PRINCIPAIS RECURSOS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 PALETAS DE CORES & HARMONIAS CROMÁTICAS • Extração inteligente de cores primárias, secundárias e neutras da página. • Cálculo automático de 5 harmonias cromáticas: Complementar, Análoga, Triádica, Tetrádica e Monocromática. • Copie valores com um clique em HEX, RGB, HSL, RGBA e Variáveis CSS. ⚡ GERADOR DE ESCALAS TAILWIND CSS (50 a 950) • Crie escalas completas de 11 tonalidades para qualquer cor detectada. • Formato pronto para importar diretamente no seu arquivo de configuração Tailwind. • Ajuste fino de iluminação e saturação em tempo real. 📄 EXPORTAÇÃO DE BRAND STYLE GUIDE EM 1080p • Exporte um guia de estilo visual completo em imagem de alta definição (PNG 1080p). • Exporte também em JSON, Design Tokens CSS, Configuração Tailwind e ASE (Adobe Swatch Exchange). • Perfeito para documentação, apresentações para clientes e handoff para times de desenvolvimento. 🔤 ANÁLISE TIPOGRÁFICA & HIERARQUIA H1–H6 • Descubra todas as fontes e tipografias utilizadas no site. • Visualize tamanhos (px/rem), pesos (font-weight), altura de linha (line-height) e espaçamento entre letras. • Identificação clara da hierarquia de títulos (H1 a H6) e corpo de texto. 👁️ ACESSIBILIDADE WCAG 2.1 & SIMULADOR DE DALTONISMO • Teste de contraste de texto e fundo em tempo real com validação de conformidade AA e AAA. • Simulador de visão com filtros para Protanopia, Deuteranopia e Tritanopia. • Garanta que suas interfaces sejam inclusivas e acessíveis para todos os usuários. 🧱 COMPONENTES, SOMBRAS & DESIGN TOKENS • Inspeção de botões, inputs, cards e componentes visuais. • Extração de valores de sombras (box-shadow) e raios de borda (border-radius). • Modo Inspetor com Mira (Hover & Click) para analisar qualquer elemento individual da tela. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACIDADE & PERFORMANCE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • 100% Local: Toda a análise do código e dos estilos acontece diretamente no seu navegador. • Sem rastreamento de navegação, sem coleta de dados privados e sem envio de informações para servidores externos. • Leve, rápido e sem impacto no desempenho das páginas. Eleve seu fluxo de trabalho de design e desenvolvimento com o ColorScope!