Como usar: Extrair cor de imagem (conta-gotas)
- Arraste para a página a imagem cuja cor você quer descobrir ou clique para selecioná-la. Uma captura de tela também pode ser colada diretamente com
Ctrl+V. - Ao mover o mouse sobre a imagem, a cor sob o cursor aparece em tempo real. Clique no ponto desejado para fixar a cor e adicioná-la ao histórico.
- Clique nos botões HEX, RGB ou HSL para copiar o código da cor no formato correspondente.
- Mais abaixo, em cores principais, confira as cores predominantes da imagem e a proporção que cada uma ocupa.
Como descobrir o código de uma cor em uma foto
Uma imagem digital é formada por pontinhos (pixels), e cada pixel guarda a intensidade de três luzes — vermelho (R), verde (G) e azul (B) — como números de 0 a 255. Esta ferramenta lê exatamente o valor RGB do pixel clicado e o mostra nos seguintes formatos:
| Formato | Exemplo | Onde é mais usado |
|---|---|---|
| HEX | #2563EB | Web (CSS), campo de cor do Figma, Photoshop e Canva |
| RGB | rgb(37, 99, 235) | CSS, programação, edição de vídeo |
| HSL | hsl(221, 83%, 53%) | Ajustar matiz, saturação e luminosidade |
Em fotos, o mesmo objeto pode ter cores ligeiramente diferentes de um pixel para outro por causa da iluminação e da compressão. Se você precisa da cor exata, como a de um logotipo, escolha a área mais ampla e uniforme. Para converter para outros formatos (como CMYK), use o conversor de códigos de cor.
Como funciona a extração das cores principais (paleta)
As cores principais são calculadas com o método de agrupamento k-means (k-médias): milhares de pixels amostrados de forma uniforme em toda a imagem são agrupados por semelhança de cor. Para cada grupo, calcula-se a cor média, e os grupos são exibidos do maior para o menor, de acordo com a proporção que ocupam na imagem. As áreas transparentes ficam de fora do cálculo.
As cores principais são um ótimo ponto de partida para definir a combinação de cores de um site, de uma apresentação ou de posts para redes sociais. Use a cor com maior proporção como fundo e a segunda ou terceira como cor de destaque para criar um design que combine com a foto. Ao aumentar o número de cores, tons mais sutis passam a aparecer separadamente.
Descobrir as cores de sites e apps com uma captura de tela
- Na tela cuja cor você quer descobrir, capture a área com
Win + Shift + Sno Windows ouCmd + Shift + 4no Mac. - Volte para esta página e pressione
Ctrl + V(Cmd + Vno Mac): a captura abre na hora. - Clique sobre o botão, texto ou elemento desejado e copie o código da cor.
Dependendo das configurações de cor do monitor, do modo escuro ou do zoom do navegador, a cor capturada pode diferir um pouco do valor original do design. Se você precisa de um valor exato, como a cor oficial de uma marca, confira o arquivo de design original ou o manual de identidade visual da marca.
Dicas para escolher a cor com mais precisão
- Prefira PNG: imagens JPG passam por compressão com perdas, o que cria pequenas variações de cor, principalmente perto de bordas e textos.
- Clique no centro da área: nas bordas de letras e formas, os pixels misturam a cor do objeto com a do fundo (antisserrilhamento).
- Amplie antes de capturar: para elementos pequenos, dê zoom na tela antes de fazer a captura; assim fica mais fácil acertar o pixel.
- Compare vários pontos: clique em alguns pontos da mesma área e compare os códigos no histórico para escolher o mais representativo.