Como identificar cores específicas em um aplicativo ou site
Miscelânea / / October 04, 2023
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.
![How_to_Identify_Specific_Color_on_an_App_or_Website](/f/6e1a5c1f201aa0007b51936c5fcc23a4.jpg)
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.
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 um À base de cromo, com compatibilidade profunda com a web, ou Safari padrão da Apple, este método é aplicável.
Além disso, quer você esteja usando um Mac, laptop Windows, iPhone, iPad ou dispositivo 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 acesse ImageColorPicker.com
ImageColorPicker
Passo 2: Clique/toque em Usar sua imagem para fornecer o URL do site/imagem ou fazer upload da imagem.
![Encontre o código de cores HEX em sites usando ImageColorPicker 1](/f/91311f8f159377d9762b8662c5f7c10f.png)
etapa 3: Agora você também pode,
- Copie o endereço do site
- Copie a imagem ou seu URL
- Faça uma captura de tela da página
![Encontre o código de cores HEX em sites usando ImageColorPicker 2](/f/653ee71f44db35dc788e7b0aef2ab173.png)
Passo 4: depois que a imagem for processada, você poderá 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.
![Encontre o código de cores HEX em sites usando ImageColorPicker 3](/f/aba29317f8eca5c9996d34baf0ef43c5.png)
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 Visão rápida do Mac, e 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 isso 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. Canva como um 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.
![Carregar imagem para selecionar a cor](/f/8bddceefc80c205cb1c1502037284f0b.png)
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’.
![Selecione a ferramenta de cores](/f/b091d99b241e241bf437690f46a0f010.png)
Etapa 6: Role até a cor e clique/toque para selecionar a cor desejada.
![Use conta-gotas para escolher a cor](/f/eaf3ca5aa43ba4a71bfd7a22b3fa9cb6.png)
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.
![Selecione Mais ferramentas e depois Conta-gotas](/f/649ac9ecc69dcf2805f5edaa7ef94178.png)
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ê.
![Escolha a cor usando as ferramentas do Firefox](/f/1c0653d4f7fbf77b3c51c9cbc418db3c.png)
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.
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.
![Selecione Mais ferramentas e depois Ferramentas do desenvolvedor](/f/4391b30c5b390e280fc887410d882d86.png)
Observação: Sua tela será visualmente dividida 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 cor do plano de fundo, do texto ou do elemento.
![Selecione o elemento para encontrar a cor](/f/f3d4f7aae5a7ab4dd6919e01c718e688.png)
5. Use extensões de navegador para encontrar o código hexadecimal de uma cor em sites
Extensões de navegador pode 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.
![Use extensões de navegador para encontrar o código hexadecimal de uma cor em sites](/f/b1dbabc33d22f70a2a4d0519acf93793.png)
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. Assim, cobrimos vários métodos e ferramentas para ajudá-lo a encontrar aquele código de cor 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.