Seletor de cores
Escolha qualquer cor de uma imagem e obtenha de imediato os códigos HEX, RGB, HSL, HSV e CMYK.
Carregue uma imagem para escolher uma cor
Arraste e largue, cole ou procure — PNG, JPG, WEBP ou GIF
Sugestão: 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 guardadas
Ainda não há cores guardadas — escolha uma e toque em “Guardar cor”.
Um seletor de cores é uma ferramenta que lhe permite identificar e capturar a cor exata de qualquer ponto de uma imagem e traduzi-la para os códigos que os computadores e os profissionais utilizam. Basta apontar o conta-gotas para um pixel e obtém, de imediato, os valores nos vários modelos de cor — HEX, RGB, HSL, HSV e CMYK — prontos a copiar e a reutilizar no seu trabalho.
É uma ajuda indispensável no design web, no desenvolvimento, na impressão e na acessibilidade: sirva-se dela para reproduzir a cor exata de uma fotografia, para definir variáveis de CSS, para preparar ficheiros de impressão em CMYK ou para garantir que o texto tem contraste suficiente. Esta ferramenta é gratuita e funciona inteiramente no seu navegador — as suas imagens nunca saem do dispositivo, o que assegura total privacidade. Além de ler os valores HEX, RGB, HSL, HSV e CMYK, permite extrair a paleta de uma imagem, gerar harmonias de cores e verificar o contraste segundo as diretrizes WCAG.
Como escolher uma cor de uma imagem
- 1
Carregue ou arraste uma imagem
Arraste e largue um ficheiro na área indicada, cole uma imagem com Ctrl/Cmd + V ou procure-a no seu dispositivo. Aceita PNG, JPG, WEBP e GIF, e tudo é processado localmente no navegador.
- 2
Clique com o conta-gotas num pixel
Passe o rato sobre a imagem para ampliar a zona pretendida e clique no ponto exato que quer amostrar. A ferramenta captura a cor desse pixel de forma precisa.
- 3
Leia e copie os códigos de cor
Veja os valores HEX, RGB, HSL, HSV e CMYK da cor selecionada e copie qualquer um deles para a área de transferência com um clique, pronto a colar no seu editor ou folha de estilos.
- 4
Extraia uma paleta da imagem
Peça à ferramenta que analise a imagem e apresente as cores mais representativas. Fica com uma paleta coerente sem ter de amostrar manualmente cada tom.
- 5
Gere harmonias de cores
A partir da cor escolhida, obtenha combinações complementares, análogas, em tríade, em tétrade, complementares divididas ou monocromáticas para construir esquemas equilibrados.
- 6
Verifique o contraste WCAG e exporte a paleta
Confirme se a combinação de texto e fundo cumpre os níveis de contraste WCAG (AA e AAA) e, quando estiver satisfeito, guarde e exporte a paleta em CSS, JSON ou PNG.
HEX, RGB, HSL, HSV e CMYK explicados
Cada modelo de cor descreve a mesma cor de uma forma diferente, consoante o contexto em que vai ser usada. Uns são ideais para o ecrã, outros para a impressão e outros para ajustar a cor de maneira intuitiva. A tabela seguinte resume cada modelo, apresenta um exemplo da mesma cor e indica quando faz mais sentido utilizá-lo.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web e CSS — o formato mais comum em folhas de estilo e ferramentas de design. |
| RGB | rgb(59, 130, 246) | Ecrãs — descreve a cor pela mistura de luz vermelha, verde e azul. |
| HSL | hsl(217, 91%, 60%) | Ajuste intuitivo — permite alterar matiz, saturação e luminosidade de forma natural. |
| HSV | hsv(217, 76%, 96%) | Ferramentas de design — muito usado em seletores de cor de aplicações gráficas. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Impressão — descreve a cor pelas tintas ciano, magenta, amarelo e preto. |
Design web e de UI
Reproduza com exatidão as cores de uma referência visual, de um logótipo ou de uma fotografia e construa paletas coerentes para os seus ecrãs. Ao extrair cores diretamente de uma imagem, garante que a interface fica alinhada com a identidade pretendida e evita a incerteza de escolher tons "a olho".
Desenvolvimento front-end
Copie o valor HEX ou RGB e utilize-o de imediato nas suas variáveis de CSS, em custom properties ou em tokens de design. Poder alternar entre modelos poupa conversões manuais e mantém o código consistente entre componentes e temas.
Impressão e identidade de marca
Quando prepara materiais para impressão, os valores CMYK são essenciais para que as cores saiam como espera no papel. Amostre a cor de um logótipo ou de uma imagem e obtenha a conversão para CMYK, ajudando a manter a coerência da marca entre o ecrã e o suporte impresso.
Acessibilidade
Verifique se as combinações de texto e fundo cumprem os rácios de contraste WCAG (AA e AAA) antes de publicar. Um bom contraste torna o conteúdo legível para todas as pessoas, incluindo quem tem baixa visão, e ajuda o seu site a cumprir os requisitos de acessibilidade.
Comparação
Existem vários seletores de cores online, mas nem todos oferecem o mesmo conjunto de funcionalidades. Veja como esta ferramenta se compara ao imagecolorpicker.com nos aspetos que mais importam a quem trabalha com cor.
| Modelos de cor | HEX, RGB, HSL, HSV e CMYK, todos visíveis em simultâneo. | Sobretudo HEX, RGB e HSL, com menos ênfase em HSV. |
| CMYK para impressão | Conversão para CMYK incluída, útil para trabalhos de impressão. | Suporte de CMYK limitado ou inexistente. |
| Verificador de contraste WCAG | Verificador de contraste integrado com níveis AA e AAA. | Não dispõe de verificação de contraste WCAG. |
| Harmonias de cores | Gera harmonias complementares, análogas, em tríade e mais. | Geração de harmonias reduzida ou ausente. |
| Publicidade | Interface limpa, sem anúncios a interromper o trabalho. | Apresenta publicidade na página. |
Perguntas frequentes
Como escolho uma cor de uma imagem?
Carregue ou arraste a imagem para a ferramenta e clique com o conta-gotas no ponto pretendido. A cor desse pixel é capturada de imediato e apresentada nos formatos HEX, RGB, HSL, HSV e CMYK, prontos a copiar.
O que é um código de cor HEX?
Um código HEX é uma representação hexadecimal de uma cor, como #3B82F6. Os dois primeiros dígitos indicam a quantidade de vermelho, os dois seguintes a de verde e os últimos a de azul. É o formato mais utilizado em CSS e em ferramentas de design.
Como converto RGB para HEX?
Cada componente RGB (de 0 a 255) é convertido para dois dígitos hexadecimais e depois concatenado. Por exemplo, rgb(59, 130, 246) corresponde a #3B82F6. Esta ferramenta faz a conversão automaticamente, bastando escolher a cor para ver ambos os valores.
Como crio uma paleta a partir de uma foto?
Depois de carregar a fotografia, utilize a opção de extrair paleta. A ferramenta analisa a imagem e apresenta as cores mais representativas, que pode ajustar, guardar e exportar em CSS, JSON ou PNG.
Como verifico o contraste de cores para acessibilidade?
Escolha uma cor para o texto e outra para o fundo e o verificador calcula o rácio de contraste, indicando se cumpre os níveis WCAG AA e AAA. Assim garante que o seu conteúdo é legível para todas as pessoas antes de o publicar.
A ferramenta é gratuita e as minhas imagens ficam privadas?
Sim. A ferramenta é totalmente gratuita e funciona inteiramente no seu navegador. As imagens são processadas de forma local e nunca são enviadas para nenhum servidor, pelo que a sua privacidade fica assegurada.
