01
Entenda o que você vê.
Veja o CSS, as dimensões e as fontes de cada elemento.
1 mês de Pro grátisInspecione o design web.
A extensão Chrome para designers e desenvolvedores
Inspecione o design web.
Direto no Chrome.
Examine CSS, cores, fontes e espaçamento. Verifique layouts, analise páginas e faça capturas com uma única extensão Chrome.
Depois, US$ 0,99/mês. Cancele antes do fim do teste.
Sua próxima ideia, de pertoExperimente a demo
CSS InspectorColor PickerTypographySpacingScreenshotsPage QA
FEITO PARA OS DETALHES
O bom design está nos detalhes.
Quatro ferramentas sempre grátis. Experimente todas as ferramentas Pro por um mês.
02
Encontre suas cores.
Extraia paletas, descubra fontes e verifique o contraste.
03
Cada pixel no seu lugar.
Meça espaços, confira a grade e capture o resultado.
01
Hoverify Inspetor
GrátisPasse o mouse sobre qualquer elemento para visualizar em tempo real Box Model, 6 propriedades Typography (font-family, size, weight, line-height, letter-spacing, color), Layout, Background e acessibilidade.
02
Extração de Paleta de Cores
ProColeta automaticamente todas as cores da página web e as classifica por categorias usando algoritmo de clusterização.
03
Inspetor de Fontes
ProVerifique instantaneamente 6 propriedades de elementos de texto: font-family, size, weight, line-height, letter-spacing e color.
04
Verificação de Contraste WCAG
ProCalcula em tempo real a taxa de contraste usando a fórmula WCAG 2.1. Determina os níveis AA (4.5:1) e AAA (7:1).
05
Medição de Espaçamento
ProExibe a distância horizontal, vertical e diagonal entre dois elementos em pixels (px) com linhas tracejadas vermelhas no estilo Figma.
06
Copiar CSS
ProCopie o CSS Computed de um elemento para a área de transferência com um único clique. É possível selecionar o escopo.
07
Grid Overlay
GrátisSobreponha um CSS Grid de 12 colunas para verificar visualmente o alinhamento do layout.
08
Style Strip
ProRemove o CSS progressivamente em 4 etapas para analisar a estrutura HTML.
09
QA da página
ProRevise transbordamentos, descrições, nomes e títulos. Localize elementos e exporte o relatório.
10
Paleta para CSS
ProTransforme cores extraídas em variáveis CSS reutilizáveis. Copie ou baixe com um clique.
É possível experimentar o PixelKit sem instalar?
Sim — conheça as principais funcionalidades do PixelKit aqui mesmo, sem precisar instalar a extensão.
Boas ferramentas. Preço pequeno.
O essencial grátis. Todo o Pro grátis por um mês.
Free
$0Permanente
Instalar grátis
- Hoverify Inspetor
- Color Picker (histórico de 5)
- Grid Overlay
- Screenshot (somente visível)
Pro Monthly
1 mês de Pro grátis$0no primeiro mês
Depois, US$ 0,99/mês. Cancele antes do fim do teste.
Experimentar grátis- Todas as funcionalidades Free incluídas
- Palette Extractor
- Font Inspector
- Spacing Measure
- WCAG Contrast Checker
- CSS Copy / Style Strip
- Visual Editor / Layout Editor
- Quick Theme / Presets
- Todas as ferramentas da API
- QA da página, títulos e relatórios JSON
Pro Lifetime
$19.99Pagamento único
Comprar Pro
- Todas as funcionalidades Pro incluídas
- Atualizações vitalícias
- Suporte prioritário
O teste grátis de um mês é válido para Pro mensal. São necessários dados de pagamento. Sem cancelamento antes do fim do teste, a assinatura renova por US$ 0,99/mês. A licença vitalícia é uma compra separada de US$ 19,99.
1
Inicie o teste do Pro mensal no Polar.
2
Encontre sua chave no Polar ou no e-mail.
3
Insira a chave no PixelKit para ativar o Pro.
Perguntas frequentes
O que é o PixelKit?+
O PixelKit é uma extensão Chrome para analisar e editar o design visual de páginas web. Oferece 8 ferramentas incluindo inspeção CSS, extração de cores, análise tipográfica, medição de espaçamento e verificação de contraste WCAG.
Como instalar o PixelKit?+
Pesquise 'PixelKit' na Chrome Web Store ou clique no botão de instalação na página inicial. Pronto para usar imediatamente após a instalação.
O PixelKit é gratuito?+
Quatro ferramentas são grátis para sempre. Pro mensal inclui um mês grátis e depois custa US$ 0,99/mês. A licença vitalícia custa US$ 19,99.
Como funciona o teste grátis?+
Escolha Pro mensal no Polar e ative sua chave na extensão. São necessários dados de pagamento. Após um mês, a assinatura renova por US$ 0,99/mês, salvo cancelamento no Polar antes do fim do teste. A licença vitalícia custa US$ 19,99 separadamente.
Como inspecionar CSS e fontes de um site?+
Instale o PixelKit pela Chrome Web Store e abra um site. Ative o inspetor e passe o cursor sobre um elemento para ver CSS e tipografia. O Pro adiciona inspeção de fontes e cópia de CSS.
Posso verificar o design antes de publicar?+
O Page QA do Pro verifica transbordamentos, descrições de imagem ausentes, falhas de carregamento, campos, botões e links sem nome e níveis de título omitidos. Localize elementos e exporte JSON. Exclui iframes e Shadow DOM e não substitui uma auditoria completa de acessibilidade.
Quais funcionalidades adicionais o plano Pro inclui?+
O plano Pro adiciona 9 ferramentas: Palette Extractor, Font Inspector, Spacing Measure, WCAG Contrast Checker, CSS Copy, Style Strip, Visual/Layout Editor, Quick Theme e Presets.
Como funciona a verificação de contraste WCAG?+
Calcula em tempo real a taxa de contraste entre a cor do texto e do fundo com base na fórmula WCAG 2.1. Determina automaticamente o nível AA (4.5:1 ou superior) e AAA (7:1 ou superior).
O PixelKit funciona em outros navegadores além do Chrome?+
Sim, o PixelKit pode ser instalado e usado em navegadores baseados em Chromium como Edge, Brave e Arc através da Chrome Web Store.
1 mês de Pro grátis
Sua próxima grande ideia começa aqui.
Experimente todas as ferramentas Pro grátis por um mês.
Experimentar grátisDepois, US$ 0,99/mês. Cancele antes do fim do teste.