Reproduzir um layout no código
Capture a cor de um botão em um print de design e cole o HEX direto no CSS.
Guide
O Seletor de cor de imagem extrai uma cor exata de uma foto: conforme o mouse se move, uma lupa circular de 120 px acompanha o cursor e amplia os 15×15 pixels ao redor com a célula central destacada, para um clique em um gradiente ou numa borda não cair no lugar errado. Ao clicar, o valor vai para “Cor atual” e o HEX é copiado automaticamente, com as formas rgb() e hsl() listadas ao lado. Quando a imagem carrega, ela também é reduzida para 128 px de largura e agrupada por cor, gerando oito cores dominantes desenhadas como uma faixa cuja largura segue a participação de cada uma. O processamento é local no navegador.
Atualizado em 2026-09-093 min read
O Seletor de cor de imagem extrai uma cor exata de uma foto: conforme o mouse se move, uma lupa circular de 120 px acompanha o cursor e amplia os 15×15 pixels ao redor com a célula central destacada, para um clique em um gradiente ou numa borda não cair no lugar errado. Ao clicar, o valor vai para “Cor atual” e o HEX é copiado automaticamente, com as formas rgb() e hsl() listadas ao lado. Quando a imagem carrega, ela também é reduzida para 128 px de largura e agrupada por cor, gerando oito cores dominantes desenhadas como uma faixa cuja largura segue a participação de cada uma. O processamento é local no navegador.
Diferente do “Conversor de cores”, as cores aqui vêm dos pixels da imagem; diferente do “Histograma de imagem”, o que importa são valores concretos, não a distribuição de claro e escuro.
O HEX vai direto para a área de transferência
As oito dominantes vêm de uma miniatura de 128 px
Pixels minúsculos são agrupados, então a cor capturada é uma média leve
Clicar no céu da imagemHEX `#4A90D9`, `rgb(74, 144, 217)`, `hsl(211, 65%, 57%)`Carregar um pôster de marcaO trecho mais largo da faixa é a cor principal do pôster, e o resto segue por áreaUma imagem grande com 6000 px no lado maiorA tela de captura é reduzida para 2048 pxCapture a cor de um botão em um print de design e cole o HEX direto no CSS.
Carregue o pôster de um concorrente e veja como as oito dominantes se dividem para entender a proporção de cada cor.
Tire a cor principal e a secundária do logo da empresa e aplique no tema dos slides.
Amplie até um único pixel para confirmar se um ponto é preto puro #000000 ou cinza-escuro.
A compressão JPEG, os perfis de cor e qualquer redimensionamento deslocam os valores de pixel em 1–3, então um PNG original e uma área de cor sólida dão a leitura mais precisa.
Não, só o RGB é lido; em um PNG com fundo transparente você recebe a cor que a tela compõe naquele ponto.
A paleta é agrupada por contagem de pixels, então um detalhe pequeno acaba absorvido; clique nele direto com a lupa.
A imagem é desenhada em um canvas local do navegador para a captura e não é enviada a nenhum servidor; a área de transferência só é tocada quando você clica.
Atualizado em 2026-09-09
Coleta precisa com lupa (HEX/RGB/HSL) e extração automática da paleta dominante
Esta ferramenta ainda não está totalmente traduzida; parte do conteúdo usa o idioma de origem ou um idioma de reserva.