Color Picker: seletor de cores

Como usar o seletor de cores

Arraste o círculo no quadrado grande para escolher o tom. Na horizontal, a esquerda é mais cinza e a direita é mais viva. Na vertical, o topo é mais claro e a base é mais escura. A barra colorida logo abaixo troca o matiz, que é a cor de base: vermelho, amarelo, verde, azul e de volta ao vermelho. A cada movimento, os cinco códigos ao lado se atualizam.

Se você já tem o código, digite no campo HEX, com 3, 4, 6 ou 8 dígitos e com ou sem #. O círculo vai para a posição daquela cor. Para copiar, clique no ícone ao lado do formato que você precisa. No teclado, as setas movem o círculo de 1 em 1 e, com Shift, de 10 em 10.

Pegar a cor de uma imagem

Clique em Pegar de uma imagem, escolha um arquivo (PNG, JPEG, WebP, GIF ou qualquer formato que o seu navegador abra) e clique ou arraste sobre a imagem. A cor do pixel sob o cursor vira a cor atual, com todos os códigos. Serve para descobrir o HEX do azul de um logotipo, de um print do Figma ou de uma foto de referência.

Dois detalhes mudam o resultado. Em JPEG, a compressão mistura pixels vizinhos, então a cor pode sair um ou dois pontos diferente da original, e vale usar PNG quando existir. E numa foto cada pixel é um ponto isolado: a cor de uma parede varia de um pixel para o outro por causa da luz e do ruído. Clique em alguns pontos da mesma área e fique com o valor do meio. Imagens com mais de 1.600 pixels no lado maior são reduzidas antes de aparecer, o que também suaviza detalhes finos.

Conta-gotas para a cor de qualquer ponto da tela

O botão Conta-gotas usa a API EyeDropper: a página abre a lupa do navegador e recebe o HEX do pixel que você clicar, mesmo fora da aba, em outro site, num app de design ou na área de trabalho. Segundo o MDN (dados conferidos em 5 de novembro de 2026), ela funciona no Chrome 95, no Edge 95 e no Opera 81 no desktop, e não existe no Firefox, no Safari nem nos navegadores de celular. Esc cancela.

Onde a API não existe, o botão nem aparece, e ficam as outras duas formas: o quadrado de cor e a imagem. Um atalho que funciona em qualquer navegador é tirar um print do que você quer medir e abrir o arquivo em Pegar de uma imagem.

Os cinco formatos de cor

Todos descrevem a mesma cor. O que muda é o que cada um deixa fácil de ajustar.

HSL e HSV parecem irmãos, mas se comportam de outro jeito. No HSV, brilho 100% é a cor mais viva e 0% é preto. No HSL, luminosidade 50% é a cor pura, 100% é branco e 0% é preto. Por isso o mesmo azul aparece como hsl(229 100% 66%) e como hsv(229, 68%, 100%).

O CMYK daqui é a conversão matemática direta a partir do RGB. Gráfica de verdade trabalha com perfil de cor (como FOGRA39 ou SWOP), e o resultado muda conforme o papel e a tinta. Use o valor como ponto de partida e confirme com a gráfica.

Usar um seletor de cor no seu código

Se você precisa de um seletor dentro de uma página sua, o HTML já traz um. O input type=color abre o seletor do sistema e devolve o valor em HEX minúsculo, no formato #rrggbb e sem transparência. O evento input dispara a cada movimento, e o change só quando a pessoa fecha o seletor.

<input type="color" id="cor" value="#5271ff" />

<script>
  const input = document.getElementById("cor");
  input.addEventListener("input", () => {
    document.body.style.backgroundColor = input.value; // "#5271ff"
  });
</script>

Para pegar uma cor de fora da página, o EyeDropper cabe em poucas linhas. O open() precisa ser chamado a partir de um clique e rejeita a promessa quando a pessoa aperta Esc, por isso o try/catch:

if ("EyeDropper" in window) {
  button.addEventListener("click", async () => {
    try {
      const { sRGBHex } = await new EyeDropper().open();
      console.log(sRGBHex); // "#5271ff"
    } catch {
      // a pessoa apertou Esc
    }
  });
}

A sintaxe de todos esses formatos no CSS está na especificação CSS Color 4, do W3C.

Para converter e ir além

Precisa do valor em outra sintaxe, com transparência ou com a conta explicada? Use o conversor de HEX para RGB ou o conversor de RGB para HEX. Os dois abrem com a cor que você escolheu aqui.