Seletor de cor da imagem

Posso colocar texto sobre esta cor?

Quase sempre é essa a pergunta de verdade, então ela é respondida diretamente: cada cor escolhida é avaliada pelo contraste com texto branco e preto usando a fórmula WCAG, e ao lado da relação aparece se ela passa ou não.

• 4,5:1 é o mínimo para texto normal (WCAG AA).
• 3:1 é o mínimo para texto grande: uns 24 px, ou 19 px em negrito.
• 7:1 é o nível AAA, mais rigoroso.

A fórmula não é uma simples comparação de brilho. Ela usa a luminância relativa, que dá ao verde muito mais peso que ao vermelho e ao azul e aplica uma curva gama. É por isso que um azul saturado que parece «médio» é bem mais escuro do que aparenta, e um amarelo que parece intenso é quase tão claro quanto o branco.

Calcular isso no olho de forma confiável não é possível, e por isso vale mostrar o número.

Por que a cor que você recebe pode não bater com o original

Duas ressalvas sinceras:

• A compressão JPEG altera um pouco as cores. A informação de cor é guardada em resolução menor que o brilho, então o valor exato de um pequeno detalhe colorido pode ter se deslocado em relação ao que a câmera registrou. Amostrar uma área lisa grande deixa você mais perto.
• Os perfis de cor não são aplicados. Uma imagem marcada como Adobe RGB ou Display P3 é lida como números puros, então uma cor saturada pode ser lida diferente de como um aplicativo com gerenciamento de cores a exibe. Para imagens sRGB, que são quase tudo na web, não há diferença nenhuma.

Para que as pessoas usam

• Igualar uma cor de marca a partir de um logotipo quando ninguém acha o manual da marca.
• Criar uma paleta a partir de uma fotografia: um jeito comum e realmente bom de escolher cores para um site ou uma apresentação.
• Inspecionar uma captura de tela para achar a cor exata que um design usa.
• Obter valores CSS de um layout que chegou como imagem.
• Verificar a legibilidade antes de colocar texto sobre uma fotografia ou um bloco de cor.

Nada é enviado

A imagem é decodificada e lida no seu navegador. Não teria como funcionar de outro jeito nesta velocidade, porque toda a interação consiste em responder «o que há sob o meu cursor» tão rápido quanto você o move, e isso significa que o arquivo nunca sai do seu dispositivo.

Vale dizer isso porque as imagens que as pessoas amostram muitas vezes não são delas para compartilhar: um design não publicado, os materiais de marca de um cliente, a captura de tela de um concorrente.

Escolher de uma fotografia, não de um gráfico chapado

Um aviso prático. Fotografias não têm cores chapadas. O que parece um suéter vermelho liso são centenas de vermelhos que variam com a luz e a sombra, e o pixel em que você clica é uma amostra dessa gama, não «a» cor.

Numa fotografia, a paleta extraída costuma ser mais útil que qualquer escolha individual, porque cada item é a média de um grupo inteiro e não um pixel arbitrário. Num logotipo, numa captura de tela ou num gráfico chapado, uma única escolha é exatamente o certo: esses têm mesmo um único valor.

Obter uma versão mais escura ou mais clara

Use HSL. Mantenha o matiz e a saturação, e mude só a luminosidade: de hsl(199, 55%, 50%) para hsl(199, 55%, 35%) é sem dúvida a mesma cor, mais escura. Tentar o mesmo em HEX obriga a ajustar três valores ao mesmo tempo e adivinhar, que é como as paletas acabam com um «azul-escuro» que foi virando roxo sem ninguém perceber.

Relacionado

Se você está amostrando uma imagem para reproduzir o estilo dela, o visualizador de metadados diz com que câmera e ajustes ela foi feita. Se vai criar algo com as cores que encontrar, a ferramenta de marca d’água aceita diretamente um valor hexadecimal.