Como identificar uma cor específica em um aplicativo ou site

Imagine que você está percorrendo as imagens e encontra a cor perfeita - o tom exato de que precisa para seu próximo projeto de design. Existem algumas ferramentas incríveis na Internet para ajudá-lo a identificar cores específicas em qualquer aplicativo ou site. Vamos dar uma olhada em algumas das melhores opções deles.

1. Usando as ferramentas do desenvolvedor no navegador Chrome

Uma opção que você pode tentar é a ferramenta Chrome Developer. O Chrome vem com muitos recursos úteis para desenvolvedores, tornando as tarefas muito mais fáceis de realizar. Você pode usar as etapas a seguir para identificar cores específicas em qualquer aplicativo ou site.

• Abra o site no qual deseja identificar uma cor no navegador Chrome
• Clique no ícone de três pontos no canto superior direito do Chrome. Um pop-up com várias opções aparecerá.
• Clique em 'Mais ferramentas' e selecione 'Ferramentas de desenvolvedor' no pop-up resultante.
• Use Ctrl + Shift + I se quiser pular as etapas acima
• Agora, a janela se divide em duas telas - o site à esquerda e o código do site à direita
• Digite Ctrl + Shift + C no teclado. Isso mostra todos os detalhes de um elemento específico no site quando passamos o cursor do mouse sobre os elementos.
• Você pode encontrar o código de cores do elemento junto com outras informações úteis.

Exemplo

Digamos que você esteja interessado nos códigos de cores específicos para alguns elementos no seguinte site:

Você pode escolher as ferramentas do desenvolvedor clicando nos três pontos no canto da tela. No menu suspenso, selecione Mais ferramentas e Ferramentas do desenvolvedor.

A tela será visualmente dividida em duas páginas. Você verá o site à esquerda e o código do site à direita.

Digite o comando e atalho “Ctrl + Shift + C” e passe o cursor do mouse sobre os elementos do site. Isso mostrará a cor desse elemento, junto com outras informações úteis. Abaixo estão dois exemplos onde encontramos a cor da barra de navegação e um painel abaixo da ferramenta de pesquisa.

Aqui, podemos encontrar o código de cores no pop-up da barra de navegação. O código da cor é # 333333.

A cor do painel pode ser encontrada junto com outros detalhes úteis. Cor: # 333333, Cor de fundo: # 5D4A8E. Embora possa parecer um pouco intimidante no início, o programa se torna muito mais fácil de usar com um pouco de prática.

2. Extensão do Chrome para conta-gotas

O conta-gotas é uma extensão do Chrome popular e amplamente usada para ajudá-lo a encontrar certas cores em qualquer site ou aplicativo.

Siga as etapas abaixo para identificar cores específicas em um site ou aplicativo usando a ferramenta de extensão de conta-gotas.

• Abra qualquer site ou aplicativo no navegador da Web Chrome
• Clique no ícone da extensão Eye Dropper
• Selecione 'Escolher cor na página da web' e passe o cursor do mouse sobre os diferentes elementos do aplicativo ou site.

Você pode encontrar o código de cores dos elementos listados no canto inferior direito da página da web.

Exemplo

Ok, vamos usar a ferramenta de extensão de conta-gotas em um exemplo da vida real. Começaremos abrindo um site e clicando no ícone da extensão Eye Dropper

Quando você passa o cursor sobre vários elementos do site, pode ver os códigos de cores exibidos em uma seção na parte inferior direita da tela.

Quando passo o cursor sobre o ícone em forma de V, posso ver seu código de cores na janela inferior, conforme mencionado. A vantagem dessa ferramenta é que você também pode encontrar o código RGB junto com o código de cor hexadecimal do elemento. O método é flexível para quem deseja uma maneira simples e rápida de pegar os códigos de suas cores favoritas.