Como usar o seletor de cores do Google Chrome?

O Google Chrome vem com o Chrome DevTools, que é uma coleção de ferramentas para desenvolvedores da web. Entre todas as ferramentas acessíveis, o seletor de cores disponível no Chrome é útil.

Mas, como acessá-lo? como você usa isso? Quais são os recursos oferecidos junto com a ferramenta?

Neste artigo, vamos explorar essa ferramenta e seus recursos.

Como iniciar o seletor de cores do Chrome?

Você pode acessar a ferramenta cromada do seletor de cores usando um atalho de teclado ou GUI (Graphical User Interface).

Pressione Ctrl + Shift + I ao usar o teclado para obter o DevTools e, em seguida, vá para o seletor de cores. Se você estiver usando um mac, você precisa pressionar Command + Option + I.

Com o mouse, você precisa clicar com o botão direito do mouse e depois clicar em “Inspecionar” para navegar pelo DevTools.

Você também pode configurar o Chrome DevTools para abrir automaticamente a cada nova guia. Assim, você pode acessar rapidamente o seletor de cores para cada guia do seu navegador.

Para conseguir isso, você precisa iniciar uma nova instância do Chrome usando a linha de comando enquanto passa o seguinte sinalizador:

--auto-open-devtools-for-tabs

Esta é a aparência ao iniciar o Chrome com o DevTools aberto automaticamente por meio do terminal no Linux:

google-chrome-stable --auto-open-devtools-for-tabs

Como usar o seletor de cores no Chrome?

Depois de iniciar o DevTools, você terá que navegar para acessar as ferramentas necessárias para identificar a cor em uma página da web ou um design no qual deseja trabalhar.

  Como visualizar guias no modo de tela cheia no Chrome

Por padrão, você deve conseguir ver a seção “Estilo” ativa na parte inferior do DevTools, conforme mostrado na captura de tela.

Se você tiver algo mais selecionado, clique em “Estilo” para acessar o código CSS da página da web.

Aqui, você precisa percorrer o código CSS disponível e procurar uma caixa de cores rotulada como plano de fundo ou cor na seção do corpo. Este é o seletor de cores que você estava procurando.

Basta clicar na caixa de cores; deve fornecer mais opções, conforme mostrado na captura de tela abaixo.

É isso! Voilà, você tem o seletor de cores em seu navegador pronto para ajudá-lo.

Aqui, você deve encontrar o código hexadecimal ou o valor RGB da cor e obter a capacidade de selecionar outros elementos CSS para explorar e inspecionar o design na página da web.

Recursos no Color Picker no Chrome

O seletor de cores embutido do Chrome fornece uma variedade de informações, além do código hexadecimal para identificar a cor.

Aqui está o que você pode esperar dele. Alguns recursos principais incluem:

Paletas de cores: em vez de percorrer vários tons de cores, você obtém algumas paletas de cores predefinidas para aplicar algumas seleções rapidamente.

  12 maneiras de estabelecer uma conexão segura no Chrome

Formato de cores: você pode alternar de código hexadecimal para valores RGBA e valores de cores HSLA também.

Conta-gotas: Ao acessar o seletor de cores, você pode navegar na página da web e selecionar qualquer elemento para obter o código hexadecimal dessa cor. Você pode clicar no seletor de cores para ativá-lo/desabilitá-lo.

Você obtém mais opções para ajustar as cores e obter a cor exata de sua escolha. Aqui estão eles:

  • Copiar para a área de transferência: Você pode copiar o código da cor identificada rapidamente para a área de transferência.
  • Gradiente de cores: você pode ajustar o tom da cor e percorrer as possibilidades de uma combinação de cores de sua preferência.
  • Controle de opacidade: você pode ajustar o nível de transparência para torná-lo sólido ou mínimo.
  • Seletor de cores de fundo: para escolher uma cor de fundo adequada para o contraste perfeito.
  • Taxa de contraste: Ajuste o contraste ou corrija-o para tornar o texto/elemento visível.

Observação: a ferramenta seletora de cores não se limita ao Google Chrome, mas pode ser usada em qualquer navegador baseado no Chrome, como o Brave.

Como usar o seletor de cores do Chrome com o Google Slides?

Você pode navegar para acessar a ferramenta seletora de cores se clicar com o botão direito do mouse na seção de cabeçalho da página da Web do Google Slides. Mesmo que o Google Slides não ofereça uma ferramenta de seleção de cores embutida, isso deve ser suficiente.

  Chrome Continue de onde você parou O recurso não funciona

Se você não se sentir confortável usando o DevTools com Google Slides, também pode tentar algumas extensões do Chrome para o trabalho.

Extensões do Chrome como alternativa ao seletor de cores

Embora as extensões possam ser úteis, deve-se observar que elas não são atualizadas ou mantidas ativamente. Considerando que eles exigem acesso aos dados do seu navegador, você deve ser cauteloso ao instalar qualquer extensão, mesmo as recomendadas aqui.

No entanto, existem duas extensões populares que você pode estar interessado em experimentar:

#1. ColorZilla

ColorZilla A extensão oferece todas as funções essenciais que você obtém com o seletor de cores integrado do Chrome. Como bônus, você também pode verificar o histórico da última cor escolhida.

Portanto, isso deve ser útil para todos os casos de uso, não apenas para o Google Slides.

#2. Conta-gotas ColorPick

Se você enfrentar problemas com a ferramenta conta-gotas usando o DevTools, tente Conta-gotas ColorPick para obter um conta-gotas sem acessar as ferramentas da web.

Ao selecionar uma cor, será exibido o valor RGB e a opção de gerar paletas de cores. Semelhante à extensão acima, você também pode verificar o histórico das cores escolhidas.

Palavras Finais 🎨

Chrome DevTools Color Picker é uma ferramenta útil. Você não precisa de uma ferramenta profissional para ajudá-lo a identificar as cores e os códigos ou valores associados. A ferramenta integrada do Chrome facilita isso sem a necessidade de uma extensão de terceiros.

Desde designers gráficos até desenvolvedores da Web que criam um modelo de site, todos devem achá-lo útil.

Obviamente, você também pode optar por usar extensões de terceiros disponíveis. Mas, a menos que você precise, sugerimos que você explore todos os recursos com o DevTools.