CodeKitHubO que é esta ferramenta?
Um seletor de cores transforma uma escolha visual — este tom de azul, aquele pixel exato num logótipo — em códigos numéricos que o software compreende. A mesma cor tem várias notações equivalentes: o HEX (#3b82f6) domina o CSS e as entregas de projetos de design, o RGB (59, 130, 246) corresponde à forma como as telas e o código representam a cor, e o HSL (217°, 91%, 60%) descreve o matiz, a saturação e a luminosidade de uma forma que os seres humanos conseguem compreender.
A segunda parte da ferramenta é um conta-gotas de imagem. Carregue uma captura de tela, um logótipo ou uma fotografia e clique em qualquer ponto para obter a amostra da cor sob o cursor — a forma habitual de responder à pergunta «que cor é esta, exatamente?». Nos navegadores que suportam a API EyeDropper, é utilizada a lupa nativa com ampliação; nos outros navegadores, a ferramenta lê o valor do pixel a partir de uma cópia da imagem num canvas. Em ambos os casos, o processamento é local: a imagem nunca é carregada.
Por que usar?
- Três formatos ao mesmo tempo: cada cor selecionada é apresentada simultaneamente nos formatos HEX, RGB e HSL, cada um com um botão para copiar com um único clique — sem necessidade de uma etapa de conversão separada.
- Escolha a partir de uma imagem: carregue qualquer fotografia e clique para obter a amostra da cor exata do pixel — ideal para extrair as cores da marca a partir de um logótipo ou para corresponder a uma cor vista numa captura de tela.
- Utiliza o EyeDropper nativo do navegador com lupa, quando disponível, e, nos restantes casos, recorre à leitura precisa dos píxeis do canvas.
- Uma amostra de pré-visualização em tempo real mostra a cor atual num relance, para que possa verificar a escolha antes de copiar.
- Gratuito, instantâneo e totalmente local: as cores são calculadas e as imagens são lidas no seu navegador — nada é carregado, armazenado ou registado.
Como usar
- Escolha uma cor utilizando o campo de cor ou cole/edite um valor diretamente.
- Para selecionar uma cor de uma imagem, carregue uma imagem e clique no ponto cuja cor pretende selecionar.
- Leia os valores HEX, RGB e HSL, apresentados juntamente com uma amostra de pré-visualização em tempo real.
- Clique no botão «Copiar» ao lado do formato que precisa — HEX para CSS, RGB ou HSL para código.
Exemplo
Entrada
Clicking the blue area of an uploaded logoResultado
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)As três linhas descrevem a mesma cor. Utilize o formato HEX nas folhas de estilo e nas ferramentas de design, o RGB quando o código exigir valores por canal e o HSL quando pretender obter variantes mais claras ou mais escuras, alterando apenas o último número.
Que formato de cor para cada trabalho
O CSS moderno aceita os três formatos em qualquer contexto em que seja permitida a utilização de cores, pelo que a escolha diz respeito ao fluxo de trabalho e não à compatibilidade. Normalmente, as equipas padronizam o formato HEX nos tokens de design e, em seguida, utilizam o HSL ao explorar variações — alteram a luminosidade em 10 a 15 pontos para obter um estado de hover utilizável sem alterar a matiz.
| Formato | Exemplo | Ideal para |
|---|---|---|
| Hexágono | #3b82f6 | CSS, ferramentas de design, partilha de cores no chat e especificações |
| Vermelho, Verde, Azul | Vermelho, Verde, Azul (59, 130, 246) | Código que manipula canais, desenho em canvas e transparência rgba() |
| HSL | hsl(217, 91%, 60%) | Criar variantes mais claras/mais escuras/ao passar o cursor, criar paletas |
Da cor escolhida ao CSS final
A seleção de uma cor é normalmente o primeiro passo numa tarefa de design. Se precisar da mesma cor noutras representações — CMYK para impressão ou um valor OKLCH para CSS de gama ampla —, o Conversor de Cores dá continuidade ao trabalho a partir do ponto em que este seletor termina.
A cor escolhida traduz-se frequentemente num efeito visual: o «Box Shadow Generator» aceita um valor HEX para criar sombras realistas, e as cartas arredondadas criadas com o «Border Radius Generator» completam o visual.
→ Conversor de cores · Gerador de Box Shadow · Gerador de Border Radius
Perguntas frequentes
Qual é a diferença entre HEX, RGB e HSL?
São três formas de notação para o mesmo modelo de cor. O HEX agrupa os canais de vermelho, verde e azul em seis dígitos hexadecimais (#3b82f6) e é a forma mais comum no CSS e nas ferramentas de design. O RGB apresenta os mesmos três canais como números decimais de 0 a 255. O HSL reexpressa a cor como matiz (0–360°), saturação e luminosidade — o que é muito mais intuitivo quando se pretende «a mesma cor, mas mais clara». A conversão entre elas nunca altera a cor.
Como funciona a seleção de uma cor a partir de uma imagem?
A imagem carregada é desenhada numa tela invisível no seu navegador. Quando clicas, a ferramenta lê os valores de vermelho, verde e azul do pixel nessa posição exata e converte-os para HEX, RGB e HSL. Nos navegadores que suportam a API EyeDropper (Chrome e Edge na versão para computador), abre-se uma lupa nativa para que possas selecionar com precisão ao nível do pixel em qualquer ponto da tela.
A minha imagem foi carregada em algum sítio?
Não. A imagem é aberta diretamente pelo seu navegador e lida localmente a partir de um canvas; nunca são transmitidos nem armazenados arquivos nem dados de cor. Pode carregar a página, ficar sem ligação à Internet e tanto o seletor como o conta-gotas de imagem continuam a funcionar — o que torna esta funcionalidade segura para designs ainda não divulgados e capturas de tela internas.
Porque é que a cor escolhida não corresponde exatamente ao que vejo na tela?
Duas razões comuns. Anti-aliasing: os píxeis nas bordas do texto e das formas são misturados com o fundo, pelo que clicar num pixel afastado resulta numa cor intermédia — em vez disso, recolha uma amostra da parte central sólida de uma área. Gestão de cor: os arquivos JPG/PNG com perfis de cor invulgares podem ser apresentados de forma ligeiramente diferente em telas diferentes; a ferramenta apresenta o valor do pixel tal como está armazenado no arquivo, que é o valor que pretende para o seu trabalho de design.
Que formato devo copiar para o CSS?
HEX é a opção padrão mais segura — todos os navegadores e ferramentas o aceitam. Utilize HSL quando pretender criar variantes para o efeito de passagem do cursor ou para o modo escuro, pois ajustar apenas a componente de luminosidade mantém a tonalidade e a saturação consistentes. O RGB é útil principalmente quando o código constrói cores a partir de canais numéricos ou ao adicionar transparência, caso em que rgba(59, 130, 246, 0,5) é mais fácil de ler do que um código HEX de oito dígitos.