Como identificar cores específicas em um aplicativo ou site

Seja no design da web e de aplicativos, na transmissão de emoções, na promoção da marca ou na melhoria das experiências do usuário, as cores certamente desempenham um papel vital. No entanto, encontrar a cor ou combinação de cores certa é mais fácil de falar do que fazer. Felizmente, existem algumas ferramentas à nossa disposição para identificar cores específicas em um aplicativo ou site, para que possamos escolher e salvar as cores que nos chamaram a atenção.

Como identificar cores específicas em um aplicativo ou site

Imagine navegar por um site e encontrar a cor perfeita, o tom exato que você precisa para o seu próximo projeto. Bem, então deixe-nos ajudá-lo a encontrar a cor exata dos planos de fundo ou de quaisquer outros elementos em um site ou aplicativo.

1. Encontre o código de cores HEX em sites usando ferramentas da Web ou sites

Uma das maneiras mais fáceis de obter o código de cores de um site é usar ferramentas da web dedicadas e sites de seleção de cores. Não importa qual navegador você usa, seja baseado em Chromium , com compatibilidade deep web ou o Safari padrão da Apple, este método é aplicável.

Além disso, quer você esteja usando um dispositivo Mac, laptop Windows, iPhone, iPad ou Android, essas ferramentas da web de identificação de cores serão uma adição útil ao seu arsenal. Testamos algumas opções e aqui está a que melhor nos convém.

Passo 1 : Abra seu navegador e vá para ImageColorPicker.com

ImageColorPicker

Etapa 2 : Clique/toque em Usar sua imagem para fornecer o URL do site/imagem ou fazer upload da imagem.

Como identificar cores específicas em um aplicativo ou site

Etapa 3 : agora você pode,

  • Copie o endereço do site
  • Copie a imagem ou seu URL
  • Faça uma captura de tela da página

Como identificar cores específicas em um aplicativo ou site

Passo 4 : Depois que a imagem for processada, você pode mover o cursor para escolher a cor.

Etapa 5 : Da mesma forma, você verá o código HEX ou RGB, copie/cole e use-os conforme necessário.

Como identificar cores específicas em um aplicativo ou site

Se você não gosta do ImageColorPicker.com ou deseja mais opções, pode tentar os seguintes sites.

Seletor de cores RedKetchup

Códigos de cores HTML

Ferramentas de pinho

No entanto, ao contrário do ImageColorPicker, esses sites não oferecem suporte a URLs de sites ou imagens. Eles confiam em você para fazer upload de imagens. Então, você terá que fazer capturas de tela, carregá-las e encontrar a cor.

2. Escolha a cor de um site por meio de software de edição de fotos

Se você usa uma ferramenta de edição de fotos, não precisa procurar mais. Seja um software avançado de edição de fotos como o Photoshop ou ferramentas online como o Canva, a maioria dos softwares de edição de fotos está equipada com uma ferramenta útil de seletor de cores/conta-gotas, incluindo o Quick Look do Mac e o editor de captura de tela do iPhone .

No entanto, nem todos podem ajudá-lo a obter o código de cores de um site ou aplicativo. Eles permitirão que você escolha e use a cor em sua janela. Se for legal para você, vá em frente e use uma ferramenta de edição de fotos de sua preferência para identificar cores específicas, tomamos o Canva como exemplo.

Passo 1 : Faça uma captura de tela do site ou aplicativo.

Passo 2 : Abra o Canva em um navegador (ou aplicativo no seu dispositivo móvel).

Etapa 3 : Selecione uma tela e carregue a imagem.

Como identificar cores específicas em um aplicativo ou site

Passo 4 : Em seguida, abra qualquer ferramenta relacionada a cores, texto, desenho, elementos, etc.

Etapa 5 : Selecione a caixa de cores e clique no ícone ‘+ Adicionar uma nova cor’.

Como identificar cores específicas em um aplicativo ou site

Etapa 6 : Vá até a cor e clique/toque para selecionar a cor desejada.

Como identificar cores específicas em um aplicativo ou site

3. Use o seletor de cores no Firefox para encontrar cores em qualquer site

Além do software de edição de fotos, o navegador Firefox também possui uma ferramenta conta-gotas integrada. Embora esteja um pouco oculto, vamos descobrir o hack.

Passo 1 : Inicie o Firefox e abra o site do qual deseja escolher uma cor.

Passo 2 : Toque no ícone de três linhas no canto superior direito

Etapa 3 : Selecione Mais ferramentas e depois Conta-gotas.

Como identificar cores específicas em um aplicativo ou site

Passo 4 : Agora, basta mover o cursor até a cor que deseja identificar, o Firefox encontrará instantaneamente o código hexadecimal da cor e o apresentará a você.

Como identificar cores específicas em um aplicativo ou site

Etapa 5 : Notavelmente, o conta-gotas continuará inspecionando e entregando códigos de cores até você sair. Para fechar a ferramenta, basta clicar em qualquer lugar da tela.

Assim como o Firefox, até o Chrome possui algumas ferramentas de desenvolvedor que podem ajudá-lo a identificar cores específicas em um site. No entanto, há um problema; vamos descobrir.

4. Use as ferramentas de desenvolvedor do Chrome para escolher cores

A ferramenta de seleção de cores do Google Chrome é bastante limitada. Esse truque só consegue informar as cores dos elementos codificados no site, ou seja, as cores mencionadas nos códigos. Portanto, você não pode obter nenhuma informação relacionada a cores sobre elementos importados, como logotipos, imagens, etc.

Passo 1 : Inicie o Chrome e abra o site do qual deseja escolher uma cor.

Passo 2 : Em seguida, clique no ícone de três pontos no canto superior direito.

Etapa 3 : selecione Mais ferramentas e depois Ferramentas do desenvolvedor.

Como identificar cores específicas em um aplicativo ou site

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

Passo 4 : Para escolher uma cor no site, digite Ctrl + Shift + C e mova o cursor até a cor que deseja selecionar.

Etapa 5 : agora você pode visualizar o código de fundo, texto ou cor do elemento.

Como identificar cores específicas em um aplicativo ou site

5. Use extensões de navegador para encontrar o código hexadecimal de uma cor em sites

As extensões do navegador podem não apenas aumentar sua produtividade, mas também tornar a identificação de cores ainda mais conveniente. Felizmente, os navegadores mais comuns, incluindo suporte para Chrome e Firefox, têm essas extensões em seu arsenal.

Extensão do Chrome para identificar cores

Seletor de cores hexadecimais

Conta-gotas

Conta-gotas de cores

Extensão do Firefox para identificar cores

ColorZilla

Conta-gotas Colorpick

Depois de adicionar a extensão desejada ao seu navegador, o resto é brincadeira de criança. Abra o site → selecione a extensão na barra de menu → leve o cursor até a cor → obtenha o código da cor.

Escolha sua cor

Quer você seja um designer, desenvolvedor ou alguém curioso sobre uma cor que encontrou, identificar cores específicas em um aplicativo ou site é uma habilidade útil. Portanto, cobrimos vários métodos e ferramentas para ajudá-lo a encontrar aquele código ou nome de cor indescritível.

Espero que possamos ser úteis para você. Se você precisar de mais hacks ou sugestões ou precisar de respostas para algumas perguntas intrigantes relacionadas à tecnologia, a seção de comentários estará sempre aberta.



Leave a Comment

Como alterar o nome de usuário e o nome de exibição do Twitch

Como alterar o nome de usuário e o nome de exibição do Twitch

Quer dar um novo começo ao seu perfil do Twitch? Veja como alterar o nome de usuário e o nome de exibição do Twitch com facilidade.

Como alterar o plano de fundo no Microsoft Teams

Como alterar o plano de fundo no Microsoft Teams

Descubra como alterar o plano de fundo no Microsoft Teams para tornar suas videoconferências mais envolventes e personalizadas.

8 maneiras de corrigir o login do ChatGPT que não funciona

8 maneiras de corrigir o login do ChatGPT que não funciona

Não consigo acessar o ChatGPT devido a problemas de login? Aqui estão todos os motivos pelos quais isso acontece, juntamente com 8 maneiras de consertar o login do ChatGPT que não funciona.

10 maneiras de corrigir problemas de ping alto e atraso no Valorant

10 maneiras de corrigir problemas de ping alto e atraso no Valorant

Você experimenta picos altos de ping e latência no Valorant? Confira nosso guia e descubra como corrigir problemas de ping alto e atraso no Valorant.

Como colocar uma senha no aplicativo do YouTube

Como colocar uma senha no aplicativo do YouTube

Deseja manter seu aplicativo do YouTube bloqueado e evitar olhares curiosos? Leia isto para saber como colocar uma senha no aplicativo do YouTube.

Como bloquear e desbloquear alguém nas equipes da Microsoft e quais são as alternativas

Como bloquear e desbloquear alguém nas equipes da Microsoft e quais são as alternativas

Descubra como bloquear e desbloquear contatos no Microsoft Teams e explore alternativas para um ambiente de trabalho mais limpo.

O que acontece quando você restringe alguém no Facebook Messenger

O que acontece quando você restringe alguém no Facebook Messenger

Você pode facilmente impedir que alguém entre em contato com você no Messenger. Leia nosso guia dedicado para saber mais sobre as implicações de restringir qualquer contato no Facebook.

Como cortar imagens em formas no Canva

Como cortar imagens em formas no Canva

Aprenda como cortar sua imagem em formatos incríveis no Canva, incluindo círculo, coração e muito mais. Veja o passo a passo para mobile e desktop.

Como se livrar do problema de ação bloqueada no Instagram

Como se livrar do problema de ação bloqueada no Instagram

Obtendo o erro “Ação bloqueada no Instagram”? Consulte este guia passo a passo para remover esta ação foi bloqueada no Instagram usando alguns truques simples!

Facebook: Posso ver quem viu meus vídeos?

Facebook: Posso ver quem viu meus vídeos?

Descubra como verificar quem viu seus vídeos no Facebook Live e explore as métricas de desempenho com dicas valiosas e atualizadas.