Gerador de Paleta de Cores Online — Paletas Aleatórias e Temáticas

Crie paletas de cores harmoniosas em segundos. Explore a galeria de paletas geradas automaticamente ou abra o editor para gerar variações, travar cores favoritas, ajustar a quantidade de cores e exportar para seus projetos. As cores são calculadas no espaço perceptual Okhsl, o que ajuda a manter tons visualmente equilibrados e evita distorções comuns do HSL tradicional.

Principais recursos

Gere paletas aleatórias ou por tema, como pastel, vibrante, escura, vintage e terrosa

Trave cores favoritas, gere novas variações e ajuste a quantidade de cores da paleta

Veja tons perceptuais, confira contraste WCAG e simule daltonismo

Exporte em HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON ou Tailwind e compartilhe por link

Aplicações comuns

Descobrir novas paletas e combinações para interfaces e design systems, com tons perceptualmente equilibrados e prontos para uso
Definir esquemas de cores para apresentações, posts e materiais de marketing com harmonia visual
Copiar variáveis em HEX, RGB, HSL ou OKLCH diretamente para o CSS, sem precisar calcular cores manualmente
Testar diferentes harmonias de cores (análogas, monocromáticas, complementares, tríades e tétrades) em redesigns de interface antes de finalizar o projeto
Verificar a acessibilidade de contraste e visualizar como a paleta é percebida por pessoas com daltonismo

Como usar

Explore a galeria

A página abre com algumas paletas geradas automaticamente. Escolha entre o modo aleatório e temático, pressione a tecla Espaço para gerar novas opções, ou clique em 'Carregar mais' para expandir a galeria.

Abra no editor

Clique em uma paleta para abri-la no editor. Trave as cores que quiser manter e gere novamente para variar apenas as demais.

Ajuste e exporte

Ajuste a quantidade de cores, veja os tons, confira contraste e daltonismo, e exporte no formato que precisar ou compartilhe pelo link.

Notas técnicas

Alguns detalhes ajudam a entender como as cores são geradas e por que ficam equilibradas:

As cores são geradas no espaço Okhsl, que é perceptualmente uniforme: variar a luminosidade produz degraus visualmente regulares, ao contrário do HSL, onde o mesmo valor de luminosidade parece mais claro no amarelo do que no azul

Ao clicar em "ver tons" de uma cor, é gerada uma rampa de 50 a 900 mantendo matiz e saturação fixos e variando apenas a luminosidade perceptual — pronta para escalas de design system e copiável em CSS ou Tailwind

A verificação de contraste usa a razão WCAG entre a cor e o texto legível sobre ela; a marcação AA indica razão de pelo menos 4,5:1

A simulação de daltonismo é uma aproximação para conferência rápida e não substitui testes com usuários reais

Perguntas e respostas

Como gerar uma paleta de cores?

A página já abre com várias paletas geradas automaticamente. Pressione a barra de espaço (ou o botão Gerar novas) para criar outras, ou escolha um tema como pastel ou escura. Ao clicar em uma paleta, você abre o editor para travar cores e ajustar como quiser.

Qual a diferença entre o modo aleatório e por tema?

No modo aleatório, as cores podem vir de qualquer ponto do espectro. No modo por tema, a geração é enviesada para um visual específico — pastel usa cores claras e suaves, escura usa tons de baixa luminosidade, vintage usa tons envelhecidos e dessaturados, e assim por diante.

O que é o espaço de cor Okhsl e por que ele importa?

Okhsl é um modelo de cor perceptualmente uniforme. Na prática, isso significa que ajustar a luminosidade de uma cor produz mudanças que o olho percebe como regulares, gerando paletas e tons mais equilibrados do que o HSL tradicional, especialmente ao comparar cores muito diferentes como amarelo e azul.

Como salvo ou compartilho uma paleta?

No editor, o botão Compartilhar copia um link com as cores codificadas no endereço. Quem abrir esse link verá exatamente a mesma paleta no editor. Você também pode exportar as cores em CSS, SCSS, JSON, Tailwind ou como lista de HEX.

Gerador de Paleta de Cores

Sobre esta ferramenta