🎨 Utilitários

Seletor de Cor

Escolha uma cor e obtenha os valores em HEX, RGB e HSL com um clique para copiar.

HEX #3b82f6

RGB rgb(59, 130, 246)

HSL hsl(217, 91%, 60%)

Como usar?

Abra o seletor de cor e escolha o tom que você quer. Assim que você seleciona, os valores em HEX, RGB e HSL já aparecem atualizados. Para levar qualquer um deles, é só apertar Copiar no formato que precisar.

Escolha uma cor e copie o código

Montando um layout, ajustando um CSS ou definindo a paleta de uma marca, você precisa do código exato da cor, e raramente basta o nome dela. Este seletor abre uma paleta visual onde você escolhe o tom desejado e recebe os valores prontos para usar.

A mesma cor aparece em HEX, RGB e HSL ao mesmo tempo, cada um com botão de copiar, porque cada contexto pede um formato. HEX vai bem no CSS, RGB numa imagem, e o HSL ajuda quando você quer mexer em matiz e saturação sem dor de cabeça. Dá para padronizar cores entre design e código sem escorregar.

A seleção acontece no navegador, sem instalação, e o código vai direto para a área de transferência. Bom para quem trabalha com web, design ou só quer descobrir aquele tom específico.

Perguntas frequentes

O seletor entrega cor com transparência, como RGBA ou HEX de oito dígitos?

Não. O campo usa o seletor de cor nativo do navegador, que trabalha apenas com sRGB opaco em seis dígitos hexadecimais. Os três valores na tela descrevem a mesma cor sólida, sem canal alfa. Se precisar de transparência, copie o RGB daqui e acrescente o quarto número à mão, escrevendo rgba com um valor entre 0 e 1 no final.

Por que os números do HSL aparecem arredondados e os do HEX não?

O HSL sai em números inteiros: matiz em graus de 0 a 360, saturação e luminosidade em porcentagem cheia. Esse arredondamento faz com que colar o HSL em outro conversor possa devolver um HEX um ou dois pontos diferente do original. Quando o valor precisa sobreviver à ida e à volta sem alteração, leve o HEX ou o RGB.

Posso colar um código HEX que já tenho para ver o RGB e o HSL dele?

Não existe campo de texto na página para isso, mas o seletor nativo quase sempre tem um: clique no quadrado colorido e procure a caixa hexadecimal dentro do painel que o sistema operacional abre. Ao confirmar, os três formatos se atualizam juntos, o que transforma a página também em um conversor de HEX para RGB e HSL.

Ferramentas Relacionadas

🖼️

Cores da Imagem

Carregue uma imagem e descubra a cor de qualquer pixel em tempo real. Passe o mouse para ver HEX, RGB e HSL com lupa. Extrai automaticamente a paleta de cores dominantes.

🎨

Ajustar Cor

Clareie, escureça, inverta, desature ou ajuste a saturação de uma cor HEX, RGB ou HSL. Veja o resultado em tempo real com o código da cor resultante.

🎨

Gerador de Tons de Cor

Gere tons (shades) e matizes (tints) de qualquer cor. Clique para copiar o código HEX, RGB ou HSL. Ideal para sistemas de design.

🎨

Misturar Cores

Misture duas cores e obtenha a cor resultante. Controle o peso percentual de cada cor. Resultado em HEX, RGB e HSL.

🎨

Eyedropper (Conta-gotas) da Tela

Explica como usar a API EyeDropper do navegador para coletar uma cor de qualquer ponto da tela.

🎨

Gerador de Paleta de Cores

Gere paletas de cores harmoniosas a partir de uma cor base. Esquemas: monocromático, análogo, complementar, tríade, tetrádico e split-complementar.