Seletor de cor de imagem

Como o seletor funciona

Envie uma foto, um print de tela ou um logo e clique em qualquer ponto. A ferramenta lê aquele pixel exato e mostra a cor em HEX (por exemplo #1e88e5) e RGB (rgb(30, 136, 229)). O botão Copiar coloca o código HEX na área de transferência. Ao carregar a imagem, o pixel central já é lido, para você ver um valor de cara.

Cada cor que você clica entra numa fileira de amostras recentes (até oito), então dá para testar vários pontos — um botão, um fundo, um título — e comparar antes de escolher. A imagem é lida num canvas no seu navegador e nunca é enviada.

HEX, RGB e HSL em linguagem simples

Os três descrevem a mesma cor na tela; só escrevem de jeitos diferentes.

• HEX — #RRGGBB, três pares de dígitos hexadecimais para vermelho, verde e azul, de 00 a ff. É o que CSS, Figma, Canva, temas de WordPress e a maioria dos campos de "cor da marca" pedem.
• RGB — os mesmos três canais em números decimais de 0 a 255. #1e88e5 e rgb(30, 136, 229) são idênticos. Útil em código, no Office e em programas com controles deslizantes.
• HSL — matiz (0–360° no círculo cromático), saturação e luminosidade em porcentagem. O seletor não mostra HSL, mas qualquer ferramenta de design ou o próprio CSS converte o HEX na hora. HSL ajuda quando você quer uma versão mais clara ou mais escura da cor escolhida: mantém a matiz e muda só a luminosidade.

Pegar cores de prints de tela

Para copiar uma cor de um app, de um site ou de um frame de vídeo, tire um print (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; celular: botão liga + volume para baixo, ou botão lateral + volume para cima no iPhone) e solte aqui.

Dicas para acertar:

• Clique em áreas lisas. Mire no meio de um botão, não na borda — bordas se misturam (antialiasing) com o fundo e dão uma cor intermediária.
• Fotos têm ruído. Pixels vizinhos numa foto variam um pouco; teste alguns pontos e fique com o mais representativo.
• Prints podem alterar a cor. Modo noturno, Night Shift, HDR ou tela com gerenciamento de cor podem tingir a captura. Desative antes do print se a cor exata da marca importa.
• JPG muito comprimido desvia. Um JPG salvo várias vezes fica manchado perto das bordas. Use o PNG ou SVG original do logo, se tiver.
• Áreas transparentes não têm cor de verdade; clicar nelas dá preto (#000000). Clique na parte visível do logo.

Confira o contraste antes de usar a cor

Uma cor bonita pode ficar ilegível como texto. As diretrizes de acessibilidade (WCAG) pedem contraste mínimo de 4,5:1 entre texto normal e fundo, e 3:1 para texto grande e ícones. Cinza claro no branco e azul médio no azul escuro costumam reprovar.

Depois de pegar as cores do texto e do fundo, cole os dois HEX em qualquer verificador de contraste. Se a relação estiver baixa, escureça o texto ou clareie o fundo — ajustar a luminosidade em HSL é o caminho mais rápido para corrigir sem fugir da marca.

Usos comuns

• Descobrir a cor da marca de um logo que mandaram como imagem.
• Recriar a cor de um botão ou fundo de um site no seu próprio layout.
• Montar uma paleta a partir de uma foto para slides, posts ou moodboard de decoração.
• Escolher o fundo do ícone Apple touch no gerador de favicon.

Ferramentas relacionadas

• Recorte o objeto primeiro e pegue a cor sem o fundo: Remover fundo.
• Isole uma área pequena para clicar com mais precisão: Recortar imagem.
• Precisa da imagem como código para CSS? Imagem para Base64.