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:

Como identificar uma cor específica em um aplicativo ou 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.

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

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

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

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

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.

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

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.

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

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.

Como identificar uma cor específica em um 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

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

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.

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

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.



Leave a Comment

Corrigir erro do Facebook ao executar consulta

Corrigir erro do Facebook ao executar consulta

Resolva o erro ao executar consulta no Facebook com estas soluções eficazes e aprenda como otimizar sua experiência com a rede social.

Qual é o significado de DTB?

Qual é o significado de DTB?

Descubra o significado de DTB, uma gíria popular nas mensagens de texto. Aprenda a interpretar esse anagrama e seu uso em contextos diferentes.

Não consegue fazer login no YouTube? Use estas dicas para corrigir o problema

Não consegue fazer login no YouTube? Use estas dicas para corrigir o problema

Se você não consegue fazer login no YouTube, verifique se o seu navegador é o culpado por esse problema. Para consertar, limpe o cache e desative suas extensões.

Como Excluir Tweets Antigos em Massa

Como Excluir Tweets Antigos em Massa

Aprenda a excluir tweets antigos em massa de forma eficaz para manter sua imagem no Twitter. Descubra ferramentas úteis e dicas práticas!

Twitch.tv: Como desativar o modo de baixa latência

Twitch.tv: Como desativar o modo de baixa latência

Descubra como desativar o modo de baixa latência no Twitch e melhorar a experiência dos seus espectadores.

LinkedIn: Como bloquear / desbloquear pessoas

LinkedIn: Como bloquear / desbloquear pessoas

Aprenda a bloquear e desbloquear pessoas no LinkedIn de forma simples e prática, garantindo uma experiência profissional positiva.

Como alterar o fuso horário do Gmail

Como alterar o fuso horário do Gmail

Aprenda a alterar o fuso horário do Gmail de forma eficaz. Siga nosso guia prático para ajustes manuais.

Google Docs: Como criar um sumário

Google Docs: Como criar um sumário

Aprenda a criar um índice automatizado no Google Docs, facilitando a navegação em documentos extensos.

Corrigir que o LinkedIn não carrega imagens

Corrigir que o LinkedIn não carrega imagens

Descubra soluções para o problema do LinkedIn não carregar imagens. Aprenda como corrigir com este guia completo e otimizado.

Como inspecionar elementos no Mac, Windows, iPhone e iPad

Como inspecionar elementos no Mac, Windows, iPhone e iPad

Aprenda como inspecionar elementos no Mac, Windows e iOS com este guia completo, beneficiando-se de truques práticos para edição rápida.