Como descobrir cor hexadecimal ou rgb direto no navegador

Descubra o código de qualquer cor com um clique: instale a extensão Colorzilla.
0
1225

Digamos que você está passeando por um site qualquer, quando vê uma foto, arte ou logotipo com uma paleta de cores sensacional. Ou seu chefe / cliente pediu para ser tipo "aquelas cores da rede social, tem como?".

O que você faz normalmente?

Copia a imagem (ou manda logo um PrintScreen na tela), joga no Photoshop e bota a Ferramenta Conta-Gotas pra funcionar? Serve, mas é meio trabalhoso só pra saber uma coisinha, né?

Sai perguntando por aí até alguém ter a dignidade de responder? Isso pode ser logo ou só amanhã / semana que vem / nunca.

Abre o inspetor de código, seleciona o elemento e acha a cor? Serve, mas só para divs, spans, fonts e afins. Se quiser a cor dentro de uma foto, não tem como.

? E como faço isso de um jeito mais fácil?

Para usuários de Chrome e Firefox, a extensão Colorzilla resolve o problema em segundos — mostrei antes como usar o serviço online deles para gerar degradês CSS (muito bom, por sinal). Ela atende à qualquer tarefa de identificação de cores na internet; eu diria que é quase obrigatória nos navegadores de designers, ilustradores e artistas em geral.

Como funciona?

Depois de instalar a versão Chrome ou a versão Firefox, você terá o ícone do Colorzilla. Clique nele e passe o mouse pela tela...

colorzilla-chrome

O código da cor do ponto exato em que o cursor em cruz está é indicado na barra, em rgb e hex. Se clicar ali, a cor é copiada para a área de transferência. O "85x85" é a medida do objeto (no caso, uma tag "a" de HTML), cuja classe é mostrada logo em seguida: cz-current-elem.

Ou seja, o Colorzilla serve não só para descobrir as cores, como informações do objeto, seja uma imagem, div ou qualquer outra marcação da página.

No menu do ícone estão outras funções interessantes, por exemplo:

Color Picker: uma janela comum de cor se abre, e você pode conferir a paleta conforme coleta cores de algum lugar. É só ir pegando com o conta-gotas que elas automaticamente vão para a paleta personalizada.

colorzilla-color-picker

Webpage Color Analyzer: com um clique, a ferramenta monta automaticamente a paleta da página que estiver aberta.

colorzilla-auto-paleta
Pra quem ficou curioso, o post do print está aqui.

Nas opções, você pode ainda ajustar um atalho de teclado para ativar o conta-gotas. Como disse, é uma ferramenta bem completa. Instale djá e nunca mais tenha dúvida sobre a cor daquele logo famoso, ou do céu numa fotografia bonita.

Agora se a preguiça bateu, ou seu navegador não gosta de extensões, tem a quarta opção que não citei antes: procurar uma daquelas tabelas de cor, tipo a nossa. Não resolve sempre, mas ajuda.

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui