Extraia cores exatas pixel a pixel de qualquer imagem com lupa de alta precisão e veja a paleta dominante.
Arraste e solte uma imagem aqui ou clique para selecionar
Supports PNG, JPG, WEBPExtraia cores exatas pixel a pixel de qualquer imagem com lupa de alta precisão e veja a paleta dominante. Use no trabalho, desenvolvimento, estudo ou em verificações rápidas.
Esta ferramenta funciona no navegador. Antes de usar dados sensíveis, confirme que o dispositivo e o navegador são confiáveis.
Ao criar um site, uma apresentação ou um card para redes sociais, muitas vezes você precisa da cor exata de um logotipo, de uma foto de produto ou de uma imagem de referência. Chutar o código no olho costuma falhar, e colar um print num programa de design dá trabalho. Com esta ferramenta você envia a imagem, clica onde quiser e recebe na hora os valores HEX, RGB e HSL daquele pixel, prontos para copiar no CSS, Figma ou Canva.
Ao passar o cursor sobre a imagem, surge uma lupa redonda que amplia os 9×9 pixels em volta do ponteiro e marca em vermelho o pixel selecionado. Em fotos, bordas e degradês fazem pixels vizinhos variarem bastante, então a lupa ajuda a evitar cores sujas causadas por suavização ou ruído e a acertar o tom desejado. Cada cor capturada vai para o histórico, para você comparar e montar uma paleta.
Com as cores em mãos, o verificador de contraste WCAG 2.1 permite definir uma cor de primeiro plano (texto) e de fundo, calcula a razão de contraste e mostra se passa. Texto normal precisa de 4,5:1 para AA e 7:1 para AAA; texto grande (18 pt ou mais, ou 14 pt em negrito) cai para 3:1 e 4,5:1. Conferir o contraste ao derivar cores de botões e títulos a partir da cor da marca evita problemas para idosos, pessoas com baixa visão e quem lê sob sol forte.
Lembre que o valor capturado é o que está gravado no arquivo. Fotos sofrem influência de iluminação, balanço de branco e compressão, então o mesmo produto pode ter códigos diferentes em cada foto; para cores oficiais de marca, use o manual da marca. A imagem é lida com Canvas dentro do navegador e nunca é enviada.
Ao clicar em um pixel, HEX, RGB e HSL aparecem ao mesmo tempo, e cada um pode ser copiado com um clique.
Ruído, degradês e bordas suavizadas fazem pixels vizinhos variarem. Use a lupa para mirar uma área de cor uniforme.
Texto normal: 4,5:1 para AA e 7:1 para AAA. Texto grande (18 pt ou mais, ou 14 pt em negrito): 3:1 para AA e 4,5:1 para AAA.
Não. Os pixels são lidos só no navegador e a imagem nunca vai para um servidor.
Ver esta categoria: Design e cores
Configure e visualize layouts CSS Flexbox e Grid de forma visual, veja animações e copie o código CSS gerado.
Gere combinações harmônicas de cores a partir de uma cor base com exportação em códigos HEX e RGB.
Otimize e comprima código SVG localmente removendo metadados e tags redundantes com pré-visualização.
Crie e visualize gradientes lineares e radiais, explore paletas predefinidas e copie o código CSS.
