Seletor de cores: obtenha códigos de cor exatos de qualquer imagem ou da tela

Como usar o seletor de cores

1. Carregue uma imagem. Solte um arquivo, escolha um ou cole uma captura de tela da área de transferência. PNG, JPEG, WebP, GIF, AVIF, BMP e SVG de até 40 MB funcionam em qualquer lugar; HEIC só onde o seu navegador consegue abri-lo, e um arquivo que ele não abre recebe uma mensagem clara em vez de uma tela em branco. A ferramenta amostra o bitmap em resolução total, não a cópia reduzida que você vê na tela. Só imagens acima de 16,7 megapixels são lidas a partir de uma cópia reduzida, e a ferramenta avisa quando isso acontece. Ela também lista as cores dominantes da imagem com a participação de cada uma.
2. Mire com a lupa. A lupa mostra a grade de pixels ao redor do ponteiro do mouse ou do seu dedo, para você ver se está sobre uma área lisa ou sobre uma borda suavizada. Pelo teclado, as setas movem o ponto de escolha um pixel (Shift: dez) e Enter o escolhe.
3. Escolha o tamanho da amostra. 1 pixel dá o valor bruto; uma média 3×3 ou 5×5 suaviza o ruído do JPEG e o grão das fotos. Eu uso 1 pixel para logotipos e interfaces, e uma média para fotos.
4. Ou escolha pela tela. Nos navegadores Chromium em computador (Chrome, Edge, Opera), o botão do conta-gotas deixa você clicar em qualquer pixel do monitor, até fora da janela do navegador. O Firefox e o Safari não têm esse recurso; a ferramenta avisa e indica o caminho pela imagem.
5. Ou digite um código. Cole #1d4ed8 (3, 4, 6 ou 8 dígitos), rgb(29 78 216), hsl(224 76% 48%), um valor hsv(), oklch() ou cmyk(), ou um nome de cor CSS, e todos os outros formatos se atualizam. Uma chave alterna a saída entre o CSS moderno, com espaços, e o formato antigo, com vírgulas.
6. Reúna e exporte. Adicione as cores escolhidas à paleta, que fica salva no seu navegador, e copie ou baixe-a como propriedades personalizadas de CSS, SCSS, JSON ou uma lista simples de HEX.

HEX, RGB, HSL, HSV e OKLCH: qual código usar

O OKLCH vem do CSS Color Module Level 4 e é a forma cilíndrica do espaço Oklab. Seu eixo L é construído para acompanhar o quão clara uma cor parece, justamente o que a luminosidade do HSL erra. O amarelo puro e o azul puro têm ambos L 50% no HSL, mas um parece quase branco e o outro é escuro:

Por isso eu monto toda escala de tons em OKLCH: passos iguais em L parecem passos iguais, em qualquer matiz, e o contraste do texto fica muito mais previsível.

Exemplo resolvido: convertendo #1D4ED8

De HEX para RGB. Separe em pares e leia cada um na base 16:

De RGB para HSL. Converta para a escala de 0 a 1: R = 0,1137; G = 0,3059; B = 0,8471. Máximo = 0,8471 (azul), mínimo = 0,1137, diferença d = 0,7333.

De RGB para HSV. V = máximo = 84,7%; S = d / máximo = 0,7333 / 0,8471 = 86,6%; o matiz é o mesmo, 224,3°, então hsv(224.3 86.6% 84.7%).

De RGB para CMYK. K = 1 − max(R, G, B) = 1 − 0,8471 = 15,3%; depois C = (1 − R − K) / (1 − K) = 86,6%; M = 63,9%; Y = 0%, exibido como cmyk(87% 64% 0% 15%). É aritmética simples, não um perfil de tinta.

De RGB para OKLCH. Cada canal é linearizado (desfazendo a gama do sRGB), convertido para Oklab por duas matrizes fixas com uma raiz cúbica no meio, e então a e b viram croma e matiz. O resultado é oklch(48.82% 0.2172 264.38), que o CSS também aceita como oklch(0.4882 0.2172 264.38). O matiz do OKLCH (264°) difere do matiz do HSL (224°) porque as rodas de matiz são organizadas de formas diferentes.

Por que uma cor escolhida pode diferir em alguns valores

Duas pessoas que escolhem a mesma cor de marca podem obter #1D4ED8 e #1E4FD6 sem que nenhuma ferramenta esteja errada:

• A compressão JPEG guarda a cor em resolução reduzida e em blocos de 8×8, então pixels vizinhos em uma área lisa variam algumas unidades. Se nove valores de vermelho forem 27, 29, 31, 28, 30, 29, 26, 32, 29, a média é 261 ÷ 9 = 29, que é o valor que o designer provavelmente usou.
• Capturas de tela redimensionadas misturam pixels. Uma captura Retina reduzida à metade mistura cada bloco de 2×2, então texto fino e bordas viram cores intermediárias.
• O antisserrilhado em bordas e letras cria pixels de transição que não pertencem a nenhuma das duas cores. Escolha no meio de um preenchimento liso, nunca na borda.
• O conta-gotas de tela devolve o que está sendo exibido, depois do gerenciamento de cores e de recursos como Night Shift ou True Tone, e informa um HEX em sRGB. O valor do arquivo pode ser diferente; para valores exatos, escolha na própria imagem.

Transparência. Em #1D4ED880, o último par é o alfa: 80 em hexadecimal = 128, e 128 ÷ 255 = 0,502, ou seja, cerca de 50% de opacidade. No CSS o alfa vem por último; o ARGB do Android o põe primeiro, uma confusão comum. O que você vê depende do fundo: sobre branco, cada canal vira 0,502 × cor + 0,498 × 255, o que dá aproximadamente #8EA6EB. A ferramenta mantém o alfa de PNG, WebP e outros formatos que o têm e avisa quando o pixel escolhido não é totalmente opaco. Um pixel totalmente transparente é informado como transparente, em vez de ser lido por engano como preto, e as médias são ponderadas pelo alfa, para que pixels translúcidos não puxem o resultado para o preto.

Tons claros, tons escuros e paletas

Classicamente, um tom claro (tint) é uma cor misturada com branco, um tom escuro (shade) é misturada com preto e um tom acinzentado (tone) com cinza. Misturar em RGB dá passos irregulares, então a escala daqui mantém o matiz e o croma no OKLCH e move a luminosidade em dez passos iguais, de L 96% até 24%, reduzindo o croma só onde a cor sairia da gama do sRGB; o passo mais próximo da sua cor aparece marcado. As linhas de tons claros, escuros e acinzentados são misturas simples em sRGB com branco, preto e cinza médio em passos de 10%, úteis para estados rápidos de hover e desabilitado. Você pode copiar a escala como variáveis CSS ou continuar no próprio CSS com a sintaxe de cor relativa, como oklch(from var(--brand) calc(l + 0.15) c h).

Para cada cor, a ferramenta também informa o nome mais próximo entre os 148 nomes de cor do CSS, todos em sRGB, medindo a distância em OKLab, e diz se a correspondência é exata (#663399 é exatamente rebeccapurple, #808080 é gray, também escrito grey) ou apenas a mais próxima (#1D4ED8 fica mais perto de royalblue).

Seis harmonias de cores são construídas girando o matiz: complementar, análoga, tríade, complementar dividida, tetrádica e quadrada. Aqui a tetrádica é o retângulo (+60°, +180°, +240°), que não é o quadrado (+90°, +180°, +270°). Para #1D4ED8, o complemento é #D8A71D, a segunda cor tetrádica é #A71DD8 e a segunda cor do quadrado é #D81DAC. Cada conjunto pode ser copiado como variáveis CSS.

Conferindo o contraste pela WCAG

A razão de contraste da WCAG é (L1 + 0,05) / (L2 + 0,05), em que L1 é a luminância relativa da cor mais clara e L2 a da mais escura. A luminância é 0,2126 R + 0,7152 G + 0,0722 B sobre canais sRGB linearizados, e por isso o verde pesa dez vezes mais que o azul.

• AA: 4,5:1 para texto normal, 3:1 para texto grande (pelo menos 18 pt, ou 14 pt em negrito).
• AAA: 7:1 para texto normal, 4,5:1 para texto grande.
• Contraste de elementos que não são texto, como ícones, bordas de campos e anéis de foco: 3:1.

A WCAG diz que a razão calculada não pode ser arredondada, então 4,499:1 não passa em 4,5:1. O caso clássico são dois cinzas vizinhos sobre branco. Para #767676: 76 em hexadecimal = 118, 118 ÷ 255 = 0,4627, linearizado ((0,4627 + 0,055) / 1,055)^2,4 = 0,1812, razão 1,05 / 0,2312 = 4,54:1. Para #777777: valor linear 0,1845, razão 1,05 / 0,2345 = 4,48:1.

O verificador da ferramenta usa exatamente essa fórmula. Ele mostra a razão, cinco selos de passa ou não passa (AA e AAA para texto normal e grande, mais 3:1 para elementos de interface e ícones), um medidor e uma prévia ao vivo. A razão tem duas casas decimais, mas, quando o arredondamento cruzaria um limite, mostra três; assim #007BC8 sobre branco aparece como 4,499:1 e não passa, em vez de exibir um enganoso 4,50. Texto semitransparente é misturado ao fundo antes da medição. Quando um par não passa no AA, a ferramenta sugere a cor mais próxima que passa: ela mantém o matiz e o croma do OKLCH e move só a luminosidade, de modo que #777777 sobre branco vira #767676.

Nosso azul de exemplo #1D4ED8 sobre branco dá 6,70:1: bom para texto corrido no AA, mas abaixo do AAA. No meu trabalho, busco 4,5:1 em todo texto, até em títulos grandes, porque a margem cobre telas baratas e ambientes muito claros.

Como o seletor de cores funciona e como é verificado

As imagens são decodificadas em um canvas no seu dispositivo e lidas pixel a pixel; nada é enviado a um servidor, e a paleta (até 48 cores) fica só no seu navegador. O conta-gotas de tela usa a EyeDropper API, que exige uma página segura (HTTPS) e um clique para começar, e funciona apenas em navegadores baseados em Chromium; no Firefox e no Safari, use o caminho pela imagem. As conversões seguem as fórmulas do CSS Color 4 para sRGB, HSL, HSV e OKLCH. Os valores são arredondados só para exibição (HSL e HSV com uma casa decimal; luminosidade do OKLCH em porcentagem com duas casas, croma com quatro e matiz com duas); a aprovação ou reprovação no contraste é decidida pela razão sem arredondar. O CMYK usa a fórmula simples K = 1 − max(R, G, B), sem perfil ICC, então trate-o como aproximado.

Vá mais fundo

• Como escolher uma cor em uma imagem
• HEX, RGB, HSL e OKLCH explicados
• Contraste de cores para acessibilidade