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

Como forçar o Google Chrome a sempre mostrar URLs completos

Como forçar o Google Chrome a sempre mostrar URLs completos

O Chrome, por padrão, não mostra o URL completo. Você pode não se importar muito com esse detalhe, mas se por algum motivo precisar que o URL completo seja exibido, instruções detalhadas sobre como fazer o Google Chrome exibir o URL completo na barra de endereço.

Como recuperar o Reddit antigo

Como recuperar o Reddit antigo

O Reddit mudou seu design mais uma vez em janeiro de 2024. O redesenho pode ser visto por usuários de navegadores de desktop e restringe o feed principal ao mesmo tempo que fornece links

Como copiar conteúdo de livros didáticos com o Google Lens

Como copiar conteúdo de livros didáticos com o Google Lens

Digitar sua frase favorita do seu livro no Facebook é demorado e cheio de erros. Aprenda a usar o Google Lens para copiar texto de livros para seus dispositivos.

Corrigir endereço DNS do servidor não encontrado no Chrome

Corrigir endereço DNS do servidor não encontrado no Chrome

Às vezes, quando você está trabalhando no Chrome, você não consegue acessar determinados sites e recebe um erro “O endereço DNS do servidor de correção não foi encontrado no Chrome”. Veja como você pode resolver o problema.

Guia rápido sobre como criar lembretes no Google Home

Guia rápido sobre como criar lembretes no Google Home

Os lembretes sempre foram o grande destaque do Google Home. Eles certamente tornam nossa vida mais fácil. Vamos fazer um tour rápido sobre como criar lembretes no Google Home para que você nunca deixe de cuidar de tarefas importantes.

Netflix: alterar senha

Netflix: alterar senha

Como alterar sua senha no serviço de streaming de vídeo Netflix usando seu navegador preferido ou aplicativo Android.

Como desativar o prompt de restauração de páginas no Microsoft Edge

Como desativar o prompt de restauração de páginas no Microsoft Edge

Se você quiser se livrar da mensagem Restaurar páginas no Microsoft Edge, simplesmente feche o navegador ou pressione a tecla Escape.

Bitwarden: Como alterar sua dica de senha mestra

Bitwarden: Como alterar sua dica de senha mestra

Se a dica de senha do Bitwarden puder ser melhorada, estas são as etapas para alterá-la em menos de um minuto.

Imagens que não aparecem no Google Doc: por que e como corrigir

Imagens que não aparecem no Google Doc: por que e como corrigir

Se suas imagens não aparecerem em um Documento Google, o problema pode ocorrer por vários motivos. Aqui estão algumas soluções potenciais

Ocultar e exibir linhas e colunas no Planilhas Google

Ocultar e exibir linhas e colunas no Planilhas Google

Domine o aplicativo Planilhas Google aprendendo como ocultar e exibir colunas. Você pode fazer isso em computadores e dispositivos móveis.