Utilore

Seletor de cor

Percorra o quadrado para escolher uma cor, ou pegue uma que já existe: de uma imagem com o conta-gotas ou, onde o navegador permite, de qualquer ponto da tela. O código aparece na hora nas três notações.

Escolha uma cor

Recentes

Pegar a cor de qualquer ponto da tela é um recurso que só Chrome e Edge têm. No Safari e no Firefox o botão nem aparece: prometer e depois recusar seria pior do que não oferecer. Ali use uma imagem: uma captura de tela funciona igual.

A imagem fica nesta aba: a cor é lida de um canvas aqui mesmo, nada é enviado. As cores recentes são lembradas só neste aparelho.

Por perto: Conversor de cores · Gerador de paleta de cores · Gerador de gradiente CSS · HEX para RGB

Como usar

  1. Arraste pelo quadrado para escolher o tom; o controle abaixo troca a família de cor.
  2. Ajuste a opacidade se precisar de uma cor semitransparente: ela aparece como rgba ou como dois caracteres a mais no HEX.
  3. Para pegar uma cor existente, aperte «Pegar de uma imagem» e clique na foto. No Chrome e no Edge dá para pegar direto da tela.
  4. Aperte «Copiar» ao lado da notação que você quer. A cor vai para a faixa de recentes, para você voltar a ela.

Bom saber

Por que o quadrado usa HSV

Em HSV o quadrado de saturação contra brilho fica cheio de ponta a ponta: cada ponto é uma cor própria. Monte o mesmo quadrado em HSL e ele degenera — a linha de cima fica toda branca e a de baixo toda preta, e metade da área não escolhe nada. Essa é toda a razão da escolha, e é exatamente o que o teste guarda.

Três entradas, porque as pessoas chegam com perguntas diferentes

Escolher uma cor e encontrar uma cor são tarefas distintas. O quadrado é para escolher. O conta-gotas sobre uma imagem é para uma cor que já existe em algum lugar: uma captura, um logotipo, uma fotografia. Pegar da tela é a mesma coisa sem sair da janela, e só Chrome e Edge sabem fazer isso.

Onde a transparência aparece

A opacidade só é escrita quando não é total: «rgb(31, 95, 214)» em vez de «rgba(31, 95, 214, 1)», porque o segundo acaba sendo limpo na mão. No HEX a transparência vira dois caracteres a mais no fim: os navegadores atuais entendem, ferramentas antigas não — por isso, com opacidade total, o rabo não é escrito.

Perguntas frequentes

Por que não há botão «pegar da tela» no meu navegador?

Porque Safari e Firefox não sabem fazer isso. O recurso é do navegador, não nosso, e só Chrome e Edge o têm. Mostrar o botão e depois recusar seria pior do que não oferecer — então ele simplesmente não aparece. Tire uma captura de tela e trabalhe com a imagem: o resultado é igual.

Como pego a cor de um pixel de uma foto?

Aperte «Pegar de uma imagem», escolha o arquivo e mova o ponteiro pela foto — a cor segue o ponteiro. Clique para guardar. A imagem não é enviada a lugar nenhum: é desenhada num canvas nesta aba e lida de lá.

Dá para digitar a cor em vez de escolher?

Dá. Digite em qualquer um dos três campos, em qualquer forma comum — #1f5fd6, 1f5fd6, rgb(31, 95, 214) — e os outros dois se preenchem sozinhos junto com o quadrado. Se você só precisa converter entre notações, o conversor de cor ao lado é o caminho mais curto.

O controle de matiz pula quando eu levo o brilho a zero.

Não deveria, e não pula: preto e branco não têm matiz nenhum, então o controle mantém o anterior em vez de saltar para o vermelho. É de propósito — senão cada descida ao fundo do quadrado perderia a família de cor em que você estava trabalhando.

Onde ficam as cores recentes?

Neste aparelho, no navegador. Elas não vão a lugar nenhum e não identificam você: limpe os dados do site e a faixa fica vazia de novo.

Ferramentas relacionadas