Escolha cores de uma imagem
Seletor de cores de imagem
O Seletor de cores de imagem retorna o código de cor exato de qualquer pixel que você clicar em uma imagem. Uma lupa mostra os pixels sob o ponteiro, e cada cor escolhida vem com valores HEX, RGB, HSL, HSB, OKLCH, Lab e CMYK.
- Grátis, sem cadastro
- As imagens não saem do seu dispositivo
- Cores exatas de pixel
Solte uma imagem para escolher cores
ou cole com Ctrl+V. JPG, PNG, WebP, GIF, AVIF, SVG. Até 20 imagens.
Como escolher uma cor de uma imagem?
Você escolhe uma cor de uma imagem abrindo a imagem no seletor e clicando no pixel desejado.
Abra uma imagem
Solte, cole ou escolha um arquivo JPG, PNG, WebP, GIF, AVIF ou SVG. A imagem fica no seu dispositivo.
Mire com a lupa
Mova o ponteiro sobre a imagem. A lupa amplia os 11 por 11 pixels ao redor dele e contorna o pixel sob o ponteiro.
Clique para escolher
Clique ou toque para adicionar a cor do pixel às cores escolhidas. Arraste um marcador para movê-lo ou ajuste a posição com as setas do teclado.
Copie o código
Copie qualquer código com um clique ou exporte todas as cores escolhidas para CSS, Tailwind, Adobe, Procreate e outros.
Qual é a exatidão da cor escolhida?
Cada escolha retorna o valor de um pixel real. O seletor lê a imagem com até 2.048 pixels no lado maior, sem suavização, então nenhuma média altera o valor.
Pixels vizinhos em uma foto costumam ser diferentes, porque iluminação, textura e compressão JPEG adicionam pequenas variações. Para a cor de uma área inteira, use o Extrator de paleta de cores com a opção Média.
Quais códigos de cor o seletor mostra?
O seletor mostra sete códigos para cada cor escolhida, cada um com um botão de copiar.
- HEX
- Código de seis dígitos para CSS e apps de design
- RGB
- Canais vermelho, verde e azul de 0 a 255
- HSL
- Matiz, saturação e luminosidade para CSS
- HSB
- Matiz, saturação e brilho para seletores de cor de apps
- OKLCH
- Luminosidade perceptual, croma e matiz para CSS moderno
- CIE Lab
- Luminosidade e dois eixos de cor, como
lab()no CSS - CMYK
- Estimativa de impressão sem perfil de impressora
- Contraste
- Razão WCAG 2 com o branco e o preto
Quando usar o seletor em vez do extrator de paleta de cores?
| Tarefa | Ferramenta |
|---|---|
| Encontrar o código de um ponto específico, como um botão ou um detalhe | Seletor de cores de imagem |
| Obter as cores principais de uma imagem inteira | Extrator de paleta de cores |
| Obter as cores exatas de um logotipo sem as misturas das bordas | Extrator de cores de logotipo |
| Obter as cores de um site a partir do código | Extrator de cores de sites |
Para que as pessoas usam um seletor de cores de imagem?
Correspondência de cores
Encontre a cor de uma tinta, tecido ou produto em uma foto para um layout impresso ou web.
Web design
Copie a cor exata de um botão ou fundo a partir de uma captura de tela de design.
Trabalho de marca
Pegue uma cor de marca de uma foto de embalagem ou sinalização como ponto de partida.
Verificações de acessibilidade
Leia o contraste de uma cor de texto escolhida com o branco e o preto na aba Códigos de cor.
Perguntas frequentes sobre o seletor de cores de imagem
Como obtenho o código HEX de uma cor em uma foto?
Abra a foto no Seletor de cores de imagem e clique na cor. O código HEX aparece na hora, com um botão de copiar ao lado.
Posso escolher cores no celular?
Sim. Toque na imagem para escolher um pixel e arraste o marcador dele para ajustar a posição.
Por que o mesmo objeto mostra códigos HEX diferentes?
Iluminação, sombras e compressão dão valores diferentes a pixels vizinhos. Escolha a área mais uniforme do objeto ou calcule a média da área com o extrator de paleta de cores.
Posso escolher cores de uma captura de tela?
Sim. Faça uma captura de tela e cole na página com Ctrl+V ou Command+V.
Existe limite de escolhas?
Não. Escolha quantas cores precisar. As exportações para Procreate guardam as 30 primeiras cores, e os formatos de código guardam todas.