Seletor de cores
Escolha qualquer cor de uma imagem e obtenha na hora os códigos HEX, RGB, HSL, HSV e CMYK.
Envie uma imagem para escolher uma cor
Arraste e solte, cole ou procure — PNG, JPG, WEBP ou GIF
Dica: você também pode colar uma imagem com Ctrl/Cmd + V
Códigos de cor
Nome de cor mais próximo: Royal Blue
Harmonias de cor
Verificador de contraste (WCAG)
Texto de exemplo
Cores salvas
Ainda não há cores salvas — escolha uma e toque em “Salvar cor”.
Um seletor de cores é uma ferramenta que permite identificar a cor exata de qualquer ponto de uma imagem e obter os códigos usados para reproduzi-la em telas e na impressão. Em vez de tentar adivinhar o tom certo, você aponta o conta-gotas para um pixel e recebe na hora os valores em HEX, RGB, HSL, HSV e CMYK. Isso é essencial no design web, no desenvolvimento front-end, no design gráfico e na preparação de arquivos para impressão, além de ajudar a garantir a acessibilidade de textos e interfaces.
Nossa ferramenta é totalmente gratuita e funciona inteiramente no seu navegador: as imagens não são enviadas para nenhum servidor, então seu conteúdo permanece privado. Com ela você obtém os códigos em HEX, RGB, HSL, HSV e CMYK, extrai uma paleta completa a partir de qualquer foto, gera harmonias de cores (complementar, análoga, tríade e mais) e verifica o contraste segundo as diretrizes de acessibilidade WCAG — tudo em um só lugar e sem instalar nada.
Como escolher uma cor de uma imagem
- 1
Envie ou arraste uma imagem
Arraste e solte uma imagem na área indicada, clique para procurar um arquivo no seu dispositivo ou cole uma imagem com Ctrl/Cmd + V. Também é possível carregar a partir da URL de uma imagem.
- 2
Clique com o conta-gotas em um pixel
Use o conta-gotas para clicar em qualquer ponto da imagem. Aproxime o zoom para amostrar exatamente o pixel desejado e obter a cor precisa daquele detalhe.
- 3
Leia e copie os códigos de cor
Veja os valores da cor selecionada em HEX, RGB, HSL, HSV e CMYK. Basta clicar em qualquer código para copiá-lo e colá-lo no seu CSS, editor de design ou documento.
- 4
Extraia uma paleta da imagem
Gere automaticamente uma paleta com as cores dominantes da foto. É a forma mais rápida de criar um esquema de cores coerente a partir de uma referência visual.
- 5
Gere harmonias de cores
A partir da cor escolhida, crie combinações harmônicas — complementar, análoga, tríade, tétrade, complementar dividida e monocromática — para montar paletas equilibradas.
- 6
Verifique o contraste e exporte
Confira se a combinação de texto e fundo atende ao contraste exigido pela WCAG (níveis AA e AAA) e, quando estiver satisfeito, salve e exporte sua paleta em CSS, JSON ou PNG.
HEX, RGB, HSL, HSV e CMYK explicados
Cada modelo de cor descreve o mesmo tom de uma maneira diferente, pensada para um contexto específico. HEX e RGB dominam nas telas, HSL e HSV facilitam ajustes intuitivos, e CMYK é o padrão da impressão. Conhecer quando usar cada um ajuda a manter as cores consistentes do design à produção final.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web e CSS — formato mais comum em HTML e folhas de estilo |
| RGB | rgb(59,130,246) | Telas — luz vermelha, verde e azul em monitores e dispositivos |
| HSL | hsl(217,91%,60%) | Ajuste intuitivo — matiz, saturação e luminosidade fáceis de controlar |
| HSV | hsv(217,76%,96%) | Ferramentas de design — usado nos seletores de cor de editores gráficos |
| CMYK | cmyk(76%,47%,0%,4%) | Impressão — tintas ciano, magenta, amarelo e preto em gráficas |
Design web e de UI
Capture as cores exatas de mockups, capturas de tela ou imagens de referência para construir paletas de interface consistentes. Com os valores em HEX e HSL em mãos, é simples definir cores de marca, estados de botões e temas de forma coerente em todo o produto.
Desenvolvimento front-end
Copie os códigos HEX ou RGB diretamente para o seu código e reutilize-os como variáveis CSS (por exemplo, --cor-primaria: #3B82F6). Isso mantém a paleta centralizada, facilita a manutenção e evita valores de cor espalhados e duplicados pelo projeto.
Impressão e identidade de marca
Para materiais impressos — cartões, embalagens, folhetos — as cores precisam ser especificadas em CMYK. Nossa ferramenta converte qualquer cor escolhida em valores CMYK, ajudando a alinhar o que aparece na tela com o resultado final da gráfica e a manter a identidade da marca.
Acessibilidade
Textos com contraste insuficiente prejudicam a leitura, sobretudo para pessoas com baixa visão. Use o verificador de contraste WCAG para conferir se a combinação de texto e fundo atinge os índices AA e AAA, garantindo interfaces mais legíveis e inclusivas.
Comparativo
Ferramentas como o imagecolorpicker.com resolvem o básico de amostrar uma cor de uma imagem, mas param por aí. Veja como nosso seletor de cores vai além para atender designers, desenvolvedores e gráficas.
| Modelos de cor | HEX, RGB, HSL, HSV e CMYK, todos exibidos juntos | Geralmente apenas HEX e RGB |
| CMYK para impressão | Sim, com valores CMYK prontos para gráficas | Normalmente não disponível |
| Verificador de contraste WCAG | Integrado, com verificação dos níveis AA e AAA | Não oferece |
| Harmonias de cores | Complementar, análoga, tríade, tétrade e mais | Recurso ausente ou limitado |
| Anúncios | Interface limpa, sem anúncios e com processamento local | Costuma exibir anúncios |
Perguntas frequentes
Como escolho uma cor de uma imagem?
Envie ou arraste uma imagem para a ferramenta, clique com o conta-gotas no ponto desejado e a cor daquele pixel aparece na hora com os códigos em HEX, RGB, HSL, HSV e CMYK. Use o zoom para amostrar detalhes pequenos com precisão.
O que é um código de cor HEX?
Um código HEX é uma forma de representar uma cor em seis dígitos hexadecimais precedidos por #, como #3B82F6. Cada par de dígitos indica a intensidade de vermelho, verde e azul (RGB). É o formato de cor mais usado em HTML e CSS.
Como converter RGB para HEX?
Cada componente RGB (0 a 255) é convertido para dois dígitos hexadecimais e os três valores são concatenados. Por exemplo, rgb(59,130,246) vira #3B82F6. Nossa ferramenta faz essa conversão automaticamente: escolha uma cor e copie o valor no formato que precisar.
Como criar uma paleta a partir de uma foto?
Depois de carregar a imagem, use a opção de extrair paleta: a ferramenta analisa a foto e identifica as cores dominantes, gerando um conjunto harmônico automaticamente. Você pode ajustar as amostras, salvá-las e exportar a paleta em CSS, JSON ou PNG.
Como verificar o contraste de cores para acessibilidade?
Selecione uma cor para o texto e outra para o fundo no verificador de contraste. A ferramenta calcula a taxa de contraste e indica se ela atende aos critérios AA e AAA da WCAG, tanto para texto normal quanto para texto grande, ajudando a garantir a legibilidade.
A ferramenta é gratuita e privada?
Sim. O seletor de cores é totalmente gratuito e funciona inteiramente no seu navegador. As imagens são processadas localmente e não são enviadas a nenhum servidor, então seu conteúdo permanece privado e sob seu controle.
