Seletor de cores de imagem: HEX, RGB, HSL e paleta

Cada pixel de uma imagem digital guarda uma cor como três números: vermelho, verde e azul. Um seletor de cores lê esses números no ponto que você escolhe e os mostra nos formatos que designers e desenvolvedores usam. Assim fica fácil reaproveitar um tom exato de uma foto, um logo ou uma captura de tela em vez de adivinhar no olho.

Os olhos se enganam fácil com as cores ao redor e o brilho da tela, então dois tons que parecem idênticos podem ser bem diferentes no código. Pegar a cor do próprio arquivo acaba com o chute.

Três jeitos de escrever uma cor

Na hora de escolher entre HEX, RGB e HSL, lembre que eles descrevem a mesma cor. HEX é um código compacto de seis caracteres usado em web design e na maioria das ferramentas de design. RGB lista os valores de vermelho, verde e azul de 0 a 255. HSL descreve matiz, saturação e luminosidade, o formato mais fácil para deixar uma cor mais clara ou mais escura no CSS mantendo o caráter dela.

Adicione uma imagem arrastando-a para a caixa, procurando ou colando uma captura de tela. Passe o cursor sobre a imagem: a cor embaixo dele aparece ao vivo logo abaixo. Clique para selecioná-la. A cor selecionada aparece com uma amostra grande e seus códigos HEX, RGB e HSL, cada um com o próprio botão de copiar.

Cada cor selecionada entra em um pequeno histórico, então você pode juntar várias cores de uma imagem e copiá-las depois. Clique em qualquer amostra do histórico para ver os códigos de novo.

Como copiar um código

Para pegar o código HEX de uma imagem rapidinho, dê zoom no navegador se a área for pequena, clique no pixel exato e toque em Copiar HEX. O código começa com uma cerquilha e funciona direto no CSS, no Figma, no Canva e na maioria das outras ferramentas.

Assim que você adiciona uma imagem, a ferramenta analisa uma cópia pequena e encontra as cores dominantes com um método de agrupamento. Aparecem até oito cores, ordenadas pela área da imagem que cobrem. Clique em qualquer uma para ver os códigos completos, ou copie o conjunto inteiro como lista de valores HEX ou como propriedades personalizadas CSS prontas para colar em uma folha de estilo.

Um gerador de paleta a partir de uma foto é um jeito rápido de montar um esquema de cores que já parece harmonioso, porque as cores vêm de uma cena real: um pôr do sol, uma floresta ou um ambiente bem decorado.

Trabalhando com logos

Para descobrir as cores de uma marca a partir do logo, use o arquivo original em vez de uma captura de tela ou de uma cópia comprimida, que pode alterar levemente as cores. Pegue as áreas chapadas do logo, não as bordas, onde as cores se misturam com o fundo.

Chrome, Edge e outros navegadores Chromium no computador têm um conta-gotas de tela. Toque em Pegar uma cor de qualquer lugar da tela e o cursor vira uma lupa que você pode mover sobre qualquer janela, inclusive outros apps. Clique para pegar ou aperte Esc para cancelar. É um seletor de cores de tela prático quando a cor que você precisa está em um vídeo, em um app de design ou em um site.

Firefox e Safari ainda não oferecem esse recurso, então o botão fica escondido neles e você pode pegar a cor de uma imagem enviada. No celular, use uma captura de tela: tire o print e depois cole ou escolha aqui.

Fotos x gráficos chapados

Fotos têm ruído e degradês, então pixels vizinhos podem ser um pouco diferentes. Para uma cor representativa de uma foto, a paleta muitas vezes é melhor que um único pixel, porque faz a média de pixels parecidos. Em logos e gráficos chapados, um único clique é exato.

Perfis de cor e telas

Os códigos vêm dos dados da imagem como o navegador os decodifica. Imagens com gamut muito amplo podem parecer um pouco diferentes em telas diferentes, mas os códigos são o que você precisa para reproduzir a cor em ferramentas web e de design.

Imagens comprimidas

JPEGs muito comprimidos criam artefatos em blocos ao redor das bordas. Pegue a cor no meio de uma área chapada, ou use uma versão de mais qualidade da imagem quando houver.

Sua imagem fica na memória do navegador; nada é enviado, registrado ou guardado. Arquivos JPG, PNG, WebP, GIF e BMP são suportados, e áreas transparentes são ignoradas na montagem da paleta.

A ferramenta é grátis e ilimitada, não adiciona marca d'água e não usa créditos do EnhancerPro. Se quiser transformar uma paleta em logo ou ícone, nosso gerador de favicon e o conversor de imagem para SVG são bons próximos passos.

Usando as cores no CSS

Cole códigos HEX direto nas propriedades de cor, ou copie a paleta como variáveis CSS e use-as com var(--color-1). Valores HSL facilitam criar tons mais claros aumentando a porcentagem de luminosidade.

Comece com uma cor forte

A maioria dos bons esquemas começa com uma única cor principal, muitas vezes tirada de um logo ou de uma foto importante. Pegue essa cor aqui e depois defina um neutro claro e um escuro para fundos e textos. Com HSL fica fácil: mantenha matiz e saturação e aumente a luminosidade para um tom de fundo ou diminua para um destaque profundo.

Cores de apoio a partir da paleta

A paleta extraída geralmente tem uma ou duas cores vivas e várias mais suaves. As suaves funcionam bem para fundos, bordas e botões secundários, enquanto as vivas combinam com chamadas para ação e destaques. Como vêm da mesma imagem, costumam combinar naturalmente.

Confira o contraste

O texto precisa ser legível para todo mundo. Texto escuro sobre um tom claro, ou texto branco sobre uma cor profunda, geralmente funciona. Confira as combinações importantes com um verificador de contraste antes de publicar, principalmente em botões e textos pequenos. Uma cor que parece forte em uma foto pode ser clara demais para texto em uma página branca.

Guarde um registro

Salve os códigos finais em um guia de estilo ou como variáveis CSS. Copiar a paleta como propriedades personalizadas CSS dá um ponto de partida pronto que você pode renomear, como primary, accent e surface, para que todas as páginas do seu site usem exatamente os mesmos tons.

Cores para impressão

As cores de tela usam RGB, enquanto as impressoras usam tintas CMYK. Os códigos daqui são perfeitos para telas; para material impresso, peça à gráfica para convertê-los ou para igualar a uma amostra impressa, porque algumas cores vivas de tela não podem ser impressas com exatidão.

Compartilhando cores com a equipe

Designers, desenvolvedores e clientes muitas vezes descrevem cores de jeitos diferentes: um código hex em um arquivo de design, um valor RGB em uma apresentação, um valor HSL em uma folha de estilo. Copiar os três da mesma seleção evita pequenas diferenças que aparecem quando os valores são convertidos à mão. Cole os códigos nas notas do projeto junto com a imagem de origem, para que qualquer pessoa veja de onde veio cada cor e possa pegá-la de novo se a paleta precisar de ajuste.

Paletas de estação e de clima

Fotos são uma ótima fonte de clima. Folhas de outono dão laranjas e vermelhos profundos, uma praia dá neutros cor de areia e turquesa, e uma cidade à noite dá azuis profundos com detalhes neon. Experimente extrair paletas de várias imagens que combinem com a sensação que você quer e fique com as cores que aparecem várias vezes. Esse conjunto repetido costuma virar um esquema forte e coerente.