Como escolher uma cor exata de uma imagem: HEX, RGB e HSL

Para obter a cor exata de uma imagem, leia o valor de um pixel em vez de estimar a cor a olho. Abra a imagem em o conta-gotas de cores, passe o cursor sobre o ponto, clique e copie o código HEX. A leitura é o valor armazenado desse pixel, então ela permanece a mesma sempre que você escolher o mesmo ponto no mesmo arquivo.

Seletor de cor de imagemPreciso do código exato da corUse de graça

O que um pixel armazena

Cada pixel é um quadradinho de cor. Em uma tela ou em um arquivo de imagem, ele é guardado como três números, para vermelho, verde e azul, cada um de 0 a 255. O vermelho puro é 255, 0, 0. Esses três números carregam a mesma informação em todos os formatos, por isso uma mesma cor pode ser escrita de várias maneiras.

HEX, RGB e HSL

• HEX escreve cada número em hexadecimal, com dois caracteres por canal. #FF0000 é o vermelho puro. Páginas da web, CSS e a maioria das ferramentas de design usam esse formato.
• RGB escreve os mesmos números em decimal, como rgb(255, 0, 0). É a mesma cor do código HEX.
• HSL descreve a cor do jeito como as pessoas costumam falar dela. Matiz é o ângulo na roda de cores, saturação é a intensidade da cor, e luminosidade é o quão clara ou escura ela está. hsl(0, 100%, 50%) é o vermelho puro.

Use HEX ao colar uma cor em código, RGB quando uma ferramenta pedir esse formato, e HSL quando quiser uma versão mais clara ou mais escura do mesmo matiz. Alterar apenas a luminosidade no HSL mantém o matiz, o que é mais difícil de fazer à mão com HEX. Para verificar o contraste entre duas cores, veja HEX, RGB, HSL, CMYK e contraste.

Veja uma cor usada em uma folha de estilo:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Por que o código pode não bater com a tela

• A imagem está comprimida. O JPEG economiza espaço suavizando detalhes finos, então pixels perto de uma borda podem diferir um pouco da cor que você vê no meio de uma área.
• As bordas se misturam. Onde duas cores se encontram, os pixels intermediários são misturas. Eles não são uma cor por si só.
• Perfis de cor diferentes. O conta-gotas lê os valores que o navegador decodifica, que estão em sRGB. Uma foto salva com um perfil de gama ampla pode parecer diferente em outros programas.
• O redimensionamento mistura pixels. Uma captura de tela feita com a tela em escala reduzida pode ter pixels mesclados. Faça a captura em tamanho real sempre que possível.
• Imagens muito grandes são lidas a partir de uma cópia. Imagens com mais de 6000 pixels no lado mais longo são lidas a partir de uma cópia de 6000 pixels, então um único pixel pode diferir um pouco do arquivo em tamanho original.

Escolha no meio de uma área lisa

Encontre uma região de uma só cor e depois vá para o centro dela. A lupa mostra os 11 por 11 pixels ao redor do cursor, assim você vê se o ponto está misturado ou se é uma área uniforme. Com o teclado, mova a mira um pixel por vez com as setas, ou dez por vez com Shift, e pressione Enter para escolher. Confira a leitura antes de copiá-la.

Use a paleta para montar um esquema

Uma foto raramente tem apenas uma cor que importa. A paleta lista até seis das cores principais dela. Ela funciona arredondando cada pixel para 16 níveis por canal, contando os grupos e mantendo os grupos mais comuns que são diferentes entre si. Cada amostra mostra a média do seu grupo. Toque em uma amostra para copiar o código HEX dela. Trate a paleta como ponto de partida, porque ela é uma média e não uma cor de marca medida.

Convertendo entre formatos

Se uma ferramenta de design pedir outro formato, cole o código HEX em um conversor de cores. Ele converte entre HEX, RGB e HSL sem alterar a cor, então o resultado corresponde ao código que você escolheu.

Escolhas recentes e privacidade

A ferramenta mantém suas últimas escolhas na página para que você possa compará-las. Elas ficam apenas na memória desta aba e somem quando você a fecha. A própria imagem é lida dentro do seu navegador e nunca é enviada a um servidor.

Como fazer com o fixmint

1. Abra o seletor de cor de imagem e arraste a foto para dentro dele.
2. Passe o cursor sobre o ponto. Ou clique na imagem e use as setas para mover a mira um pixel por vez, mantendo Shift para andar dez pixels.
3. Clique, ou pressione Enter, para escolher a cor. Confira a leitura antes de copiá-la.
4. Use o botão Copiar ao lado de HEX, RGB ou HSL para copiar o valor de que você precisa.
5. Se uma ferramenta de design pedir outro formato, cole o valor no conversor de cores.

Respostas rápidas

Por que a cor parece diferente na minha tela? Sua tela mostra uma versão do arquivo com gerenciamento de cor e em escala. Escolha no meio de uma área lisa e compare o código HEX com uma amostra conhecida.

Qual formato devo copiar? HEX para páginas da web e para a maioria das ferramentas de design. Use RGB ou HSL quando uma ferramenta pedir esses formatos.

A ferramenta envia minha imagem para algum lugar? Não. A imagem é decodificada e lida dentro do seu navegador.