Ver cor de um elemento: ache o código hex em qualquer site
Veja as cores de um site em qualquer página aberta. Aponte para o elemento e a seção Colors mostra as cores do texto, do fundo e da borda. Um clique copia o código hex.
Atualizado em
Ag
- Ink
- Amber
- Paper
Você quer ver as cores de um site: a cor exata do texto ou do fundo de um botão ou título em um site publicado. Não precisa adivinhar a partir de um print. O SuperchargeInspect é um inspetor de cores de sites feito para isso. Aponte para o elemento e a seção Cores mostra as cores de texto, fundo e borda. Um clique copia o código hex para a sua área de transferência.
O que a seção Cores mostra
A seção Cores lista os blocos de cor do elemento para o qual você aponta.
Texto. A cor do texto do elemento, o valor color que o navegador usou para desenhá-lo.
Fundo. A cor de fundo do elemento, o valor background-color.
Borda. A cor da borda, exibida apenas quando o elemento realmente tem uma borda.
Cada bloco copia apenas aquele valor quando você clica nele, então você pode copiar valores de cor CSS um de cada vez e colá-los na sua própria folha de estilo. Essas são as cores calculadas daquele único elemento, não as cores da página inteira.
Ver cores de um site: hex, RGBA e transparente
O formato de uma cor copiada depende do quanto ela é transparente. Cores opacas saem em hex, a forma compacta #rrggbb que você cola direto no CSS. A tabela mostra o que cada lugar oferece nos três casos.
| Cor | Ao clicar no painel | Copiar texto de referência | Rodapé do PNG de referência |
|---|---|---|---|
| Opaca | #rrggbb hex | valor rgb() bruto | hex |
| Parcialmente transparente | valor rgba() bruto | valor rgba() bruto | hex de 8 dígitos |
| Totalmente transparente | transparent | rgba() com alfa zero | transparent |
O texto de referência copiado lista os valores brutos que o navegador retornou, para você ver exatamente o que foi calculado. O rodapé do PNG mostra esses valores em hex, como uma referência limpa e curta. O SuperchargeInspect não usa HSL.
O que ele lê e o que não lê
Ele funciona apenas com valores de cor CSS. Uma cor dentro de uma foto, ou um gradiente ou imagem de fundo, não é um valor de cor CSS, então não aparece como bloco.
Um detalhe importante: se a cor de fundo aparece como transparent, a cor que você realmente vê vem de um elemento atrás dele. Vá para o elemento pai com Ctrl+Up (Option+Up no macOS) e leia a cor lá.
Navegação pelo teclado
Você pode fazer todo o processo pelo teclado. Pressione Alt+Shift+E para começar a inspecionar. As setas levam ao elemento anterior ou ao próximo. Segure Ctrl e pressione Up ou Down para ir ao elemento pai ou a um filho. No macOS, use Option em vez de Ctrl.
Pressione Enter para travar o elemento em que você está. Pressione Esc para voltar à seleção ou fechar o painel.
Tudo fica no seu dispositivo
O SuperchargeInspect roda localmente no seu dispositivo e não faz chamadas de rede. Não há conta nem análises em segundo plano.
Veja também fontes e espaçamentos com o inspetor de elemento CSS.
Perguntas frequentes
Como descobrir a cor hex de um elemento em um site?
Ele consegue descobrir a cor de fundo de um elemento?
O que acontece com cores transparentes ou semitransparentes?
Dá para pegar a cor de uma imagem?
Ele envia dados da página para algum lugar?
Recursos relacionados
Mostre à sua ferramenta de programação com IA o elemento exato a ser alterado
Aponte para o elemento, adicione uma nota e copie uma referência com um print anotado e os estilos observados. Depois cole na ferramenta de programação com IA que você usa hoje.
Inspecionar elemento CSS: veja e copie os valores CSS de qualquer elemento
Um inspetor de CSS que permite ver o CSS de qualquer elemento em um site. Veja a fonte, as cores, o espaçamento e o box model, e copie os valores de CSS para a área de transferência.
Fonte de um site: veja a pilha de fontes declarada
O SuperchargeInspect identifica a fonte de um site a partir do texto. Ele mostra a pilha de font-family declarada, o tamanho, o peso e a altura da linha, e copia tudo com um clique.