Como as cores extraídas são escolhidas?

Pixels de cores semelhantes são agrupados, os seis grupos mais frequentes são selecionados, e a cor média real dentro de cada grupo é calculada para a representação mais precisa possível.

Posso usar o resultado diretamente no meu design?

Sim — o botão "Copiar tudo como variáveis CSS" copia cada cor já formatada como :root { --palette-color-1: ...; } para colar diretamente no seu próprio arquivo CSS.

Extrator de Paleta de Cores

O Extrator de Paleta de Cores analisa qualquer imagem que você envia e extrai automaticamente suas cores mais dominantes, mostrando o código HEX e RGB de cada cor junto com sua proporção aproximada na imagem. Copie qualquer cor com um clique, ou copie a paleta inteira de uma vez como variáveis CSS personalizadas prontas para usar. Útil para extrair uma identidade de cor de uma foto de produto, um logotipo, ou uma captura de design que você goste. Toda a análise acontece no seu navegador via Canvas — sua imagem nunca é enviada a um servidor.

Ferramentas de Design e CSS Funciona totalmente no seu navegador

Sua imagem é processada totalmente no seu dispositivo via Canvas, e nunca é enviada a um servidor.

Envie uma imagem e a ferramenta extrai automaticamente suas cores mais dominantes, com o código HEX e RGB de cada cor, além de um botão para copiar todas as cores de uma vez como variáveis CSS.

Arraste uma imagem aqui, ou escolha uma

JPG, PNG ou WebP

Escolher um arquivo

Perguntas Frequentes

Não — a imagem é totalmente analisada no seu navegador via Canvas; ela nunca é enviada a nenhum servidor.

Continuar com

Totalmente local

Gerador de Gradiente CSS

Crie visualmente um gradiente CSS linear ou radial e copie o código.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Verificador de Contraste de Cores

Verifique se um par de cores texto/fundo atende aos padrões de contraste de acessibilidade WCAG.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Conversor de Cores

Converta uma cor entre os formatos HEX, RGB, e HSL instantaneamente.

Ferramentas para DesenvolvedoresAbrir ferramenta

Totalmente local

Gerador de harmonia de paleta de cores

Escolha uma cor base e obtenha uma paleta de cores harmoniosa (complementar, análoga, tríade, tétrade, monocromática).

Ferramentas de Design e CSSAbrir ferramenta

Ferramentas relacionadas

Totalmente local

Gerador de captura de código

Cole código e transforme-o em uma imagem polida com fundo em gradiente e barra de título, pronta para compartilhar

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Simulador de Daltonismo

Veja como sua imagem aparece para alguém com daltonismo (protanopia, deuteranopia, tritanopia ou acromatopsia)

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de clip-path CSS

Escolha uma forma pronta (círculo, triângulo, estrela, balão de mensagem...) e copie o código clip-path.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de curva de aceleração Cubic Bezier

Arraste dois pontos para projetar visualmente uma curva de aceleração personalizada e copie o código cubic-bezier.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Glassmorphism CSS

Projete visualmente um efeito de cartão de vidro fosco e copie o código CSS pronto para usar.

Ferramentas de Design e CSSAbrir ferramenta

Pronto para experimentar o Uddatak?

Explore a biblioteca completa de ferramentas e comece a usar o que você precisa agora — grátis, sem cadastro.

Ver todas as ferramentas