Explorando o Seletor de Cores do Google Chrome
O Google Chrome incorpora o Chrome DevTools, um conjunto de ferramentas essenciais para desenvolvedores web. Dentre a vasta gama de funcionalidades, o seletor de cores é um recurso particularmente prático.
Mas, como podemos acessá-lo? E como utilizá-lo de forma eficaz? Quais são as funcionalidades extras que essa ferramenta oferece?
Neste artigo, vamos mergulhar no mundo deste seletor de cores e explorar tudo o que ele tem para oferecer.
Acessando o Seletor de Cores do Chrome
Existem duas maneiras principais de iniciar o seletor de cores do Chrome: através de um atalho de teclado ou pela interface gráfica (GUI).
Para usar o teclado, pressione as teclas Ctrl + Shift + I. Isso abrirá o DevTools. Usuários de Mac devem usar Command + Option + I.
Para acessar via interface, clique com o botão direito do mouse em qualquer lugar da página e selecione “Inspecionar”. Isso também o direcionará ao DevTools.
É possível também configurar o Chrome DevTools para que ele abra automaticamente em cada nova aba. Assim, você terá acesso rápido ao seletor de cores em qualquer página.
Para habilitar essa funcionalidade, execute o Chrome através da linha de comando com o seguinte parâmetro:
--auto-open-devtools-for-tabs
Exemplo de como iniciar o Chrome com o DevTools aberto automaticamente através do terminal no Linux:
google-chrome-stable --auto-open-devtools-for-tabs
Usando o Seletor de Cores no Chrome
Após abrir o DevTools, você precisará navegar para encontrar as ferramentas necessárias para identificar a cor em uma página da web ou em um design específico.
Geralmente, a aba “Estilo” estará ativa na parte inferior do DevTools.
Caso outra aba esteja selecionada, clique em “Estilo” para acessar o código CSS da página.
Navegue pelo código CSS até encontrar uma caixa de cores, geralmente associada a propriedades como “background” ou “color”. Este é o seletor de cores que você procura.
Ao clicar na caixa de cores, mais opções serão exibidas, conforme mostrado na imagem abaixo.
Pronto! O seletor de cores está pronto para ser usado.
Nesta ferramenta, você poderá visualizar o código hexadecimal ou o valor RGB da cor, além de explorar outros elementos CSS e analisar o design da página.
Funcionalidades do Seletor de Cores do Chrome
O seletor de cores integrado do Chrome oferece diversas funcionalidades além do código hexadecimal.
Entre os principais recursos, podemos destacar:
Paletas de Cores: Em vez de selecionar cores aleatoriamente, você pode usar paletas pré-definidas.
Formatos de Cores: Alterne facilmente entre códigos hexadecimais, valores RGBA e valores de cores HSLA.
Conta-gotas: Ao habilitar o conta-gotas, você pode passar o cursor sobre qualquer elemento na página e obter o código hexadecimal da cor.
Você também tem à disposição opções para refinar as cores, como:
- Copiar para a Área de Transferência: Copie rapidamente o código da cor para a área de transferência.
- Gradiente de Cores: Ajuste o tom da cor e experimente diferentes combinações.
- Controle de Opacidade: Ajuste o nível de transparência das cores.
- Seletor de Cores de Fundo: Escolha a cor de fundo perfeita para o contraste ideal.
- Taxa de Contraste: Ajuste ou corrija o contraste para garantir a visibilidade do texto ou de outros elementos.
É importante notar que o seletor de cores não é exclusivo do Google Chrome, estando disponível em outros navegadores baseados no Chromium, como o Brave.
Utilizando o Seletor de Cores do Chrome no Google Slides
É possível acessar o seletor de cores através do DevTools clicando com o botão direito do mouse na área do cabeçalho do Google Slides. Apesar do Google Slides não ter um seletor de cores nativo, essa é uma solução prática.
Se preferir não usar o DevTools no Google Slides, você pode optar por extensões do Chrome.
Alternativas: Extensões do Chrome
Embora as extensões sejam úteis, é preciso ter cautela ao instalá-las, pois podem não ser mantidas ativamente e exigem acesso aos dados do seu navegador.
A seguir, apresentamos duas extensões populares que podem ser úteis:
#1. ColorZilla
ColorZilla oferece as funcionalidades básicas do seletor de cores integrado do Chrome. Além disso, ela armazena o histórico das últimas cores escolhidas.
Essa extensão pode ser usada em diversas situações, e não apenas no Google Slides.
#2. Conta-gotas ColorPick
Se você estiver com dificuldades para usar o conta-gotas do DevTools, Conta-gotas ColorPick pode ser uma boa alternativa. Essa extensão oferece a funcionalidade de conta-gotas sem a necessidade de acessar as ferramentas de desenvolvedor.
Ao selecionar uma cor, serão exibidos o valor RGB e a opção de gerar paletas de cores. Assim como a extensão anterior, também é possível verificar o histórico das cores selecionadas.
Considerações Finais 🎨
O seletor de cores do Chrome DevTools é uma ferramenta extremamente útil e acessível. Ele elimina a necessidade de softwares profissionais para identificar cores e seus códigos correspondentes.
Desde designers gráficos até desenvolvedores web, todos podem se beneficiar dessa funcionalidade.
As extensões de terceiros são válidas, mas antes de optar por elas, explore todas as funcionalidades que o DevTools oferece.