Paleta de cores a partir de imagem

Sobre montar uma paleta a partir de uma foto

Todo designer já passou por isso: uma fotografia tem exatamente o clima de que o projeto precisa, e o trabalho é tirar esse clima da imagem e colocá-lo numa folha de estilo.

Chutar não funciona. Uma cor que na tela parece um «cinza quente» raramente é o cinza que você teria digitado. O único jeito de acertar é pegar o pixel de verdade.

Solte a foto, passe por cima com a lupa e clique nos tons que quiser. Cada um entra na sua paleta abaixo, com os valores HEX, RGB e HSL prontos para copiar.

Como usar

• Clique em Clique para enviar, solte uma foto na página, ou cole o endereço de uma imagem
• Mova o ponteiro sobre a imagem — a lupa mostra o pixel que está embaixo
• Clique para adicionar essa cor à sua paleta
• Pegue quantas precisar — cinco ou seis costumam formar uma paleta
• Clique em qualquer amostra da sua paleta para trazê-la de volta: a amostra grande e os valores HEX, RGB e HSL mudam para ela, e o hex é copiado
• Use Copiar HEX / RGB / HSL para levar o formato que precisar

Por que você escolhe as cores

Algumas ferramentas adivinham uma paleta sozinhas, agrupando as cores mais frequentes. Parece melhor do que é. A cor mais *frequente* numa fotografia costuma ser uma área grande e sem graça — céu, parede, sombra — enquanto o tom que realmente dá caráter à imagem muitas vezes é pequeno: a ferrugem numa porta, o verde de uma folha, um brilho numa xícara.

Você enxerga qual é qual. A lupa deixa você pegar exatamente aquele pixel, na ampliação máxima, para que a paleta seja a que você quis e não a que uma média produziu.

A paleta é um lugar para onde voltar

As amostras não são só o registro do que você clicou. Clique numa e ela vira a cor atual — a amostra grande e os três valores mudam para ela, e a que você está olhando fica contornada para você saber qual é.

É isso que torna prático comparar dois tons: pegue os dois da foto e depois vá clicando de um para o outro lendo os valores, em vez de caçar na imagem o pixel que você tinha um minuto atrás.

Três formatos, porque cada lugar quer um

Cada cor escolhida aparece nos três ao mesmo tempo:

• HEX — #3f7a5e. CSS, programas de design, quase em todo lugar
• RGB — rgb(63, 122, 94). Útil quando você precisa dos canais separados
• HSL — hsl(154, 32%, 36%). O que usar para montar uma escala: mantenha o matiz, mexa na luminosidade, e você tem um claro e um escuro que combinam

Para que as pessoas usam

• Tirar uma cor de marca de um logotipo quando ninguém acha o manual
• Montar uma paleta de site ou de slides a partir de uma foto principal
• Combinar tinta, tecido ou linha com uma foto do objeto real
• Obter o HEX exato de uma cor numa captura de tela
• Achar as cores de uma pintura ou foto que você quer usar como base
• Conferir o que uma cor realmente é, em vez do que ela parece ao lado de outra

Bom saber

• Nada é enviado. A imagem é lida na página e nunca sai do seu aparelho
• Funciona com PNG, JPG, GIF e WebP
• Você pode colar o endereço de uma imagem em vez de enviar um arquivo — mas alguns servidores impedem que outros sites leiam seus pixels (CORS). Se isso acontecer, baixe a imagem e envie o arquivo
• As cores são lidas dos pixels reais em tamanho original, não da prévia reduzida, então o valor é exato
• Funciona em celular e tablet tão bem quanto no computador
• É o mesmo seletor do Seletor de cor de imagem — use aquela página quando quiser uma cor só

Ferramentas relacionadas

• Seletor de cor de imagem — a mesma ferramenta, voltada para uma cor única
• Seletor de cor — escolher numa roda de cores em vez de numa foto
• Verificador de contraste — conferir se sua paleta é legível antes de publicar
• Gerador de gradiente CSS — misturar duas das suas novas cores
• Gerador de nuvem de palavras — outro lugar para pôr uma paleta em uso