Gerador de paleta de cores — paletas harmoniosas, do zero ou a partir de uma foto
Pressione a barra de espaço para uma nova paleta, trave as cores de que gostar, escolha uma harmonia ou extraia a paleta de uma foto. Exporte para CSS, Tailwind, SCSS, JSON ou PNG.
Clique numa amostra para selecioná-la, no cadeado para mantê-la ao gerar, no lápis para escolher uma nova cor e no código para copiá-la.
| HEX | RGB | HSL | |
|---|---|---|---|
| #264653 | rgb(38, 70, 83) | hsl(197, 37%, 24%) | |
| #2a9d8f | rgb(42, 157, 143) | hsl(173, 58%, 39%) | |
| #e9c46a | rgb(233, 196, 106) | hsl(43, 74%, 66%) | |
| #f4a261 | rgb(244, 162, 97) | hsl(27, 87%, 67%) | |
| #e76f51 | rgb(231, 111, 81) | hsl(12, 76%, 61%) |
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}
Paleta a partir de uma imagem
Envie uma foto para levar as cores dominantes dela para as amostras destravadas e depois clique em qualquer ponto da imagem para capturar um pixel exato na amostra selecionada (cor 1). A imagem fica no seu dispositivo.
As paletas são geradas no seu navegador, e as imagens enviadas nunca saem do seu dispositivo. Ver todas as ferramentas grátis.
Encontrou um problema ou algo que poderia ser melhor? Lemos todas as mensagens e corrigimos rápido.
Este gerador de paleta de cores grátis monta um conjunto de 2 a 10 cores que funcionam juntas. Pressione a barra de espaço (ou Gerar) para uma nova paleta, trave as amostras que quiser manter e gere de novo até que o resto combine. Escolha uma harmonia como análoga, complementar ou triádica, ou envie uma foto e leve as cores dominantes dela direto para a paleta. Cada amostra mostra os valores HEX, RGB e HSL e a cor de texto, preta ou branca, que continua legível sobre ela.
A maioria dos geradores gira o matiz em HSL, o que produz paletas em que o amarelo ofusca e o azul afunda, porque a luminosidade do HSL não tem nada a ver com o quanto uma cor parece clara. Este calcula as harmonias em OKLCH, um espaço de cor perceptual em que a mesma luminosidade parece igualmente clara, e depois distribui a luminosidade para que toda paleta tenha tons escuros, médios e claros que você possa usar de verdade em textos, fundos e destaques. Ele não consegue dizer se uma paleta combina com a sua marca. Essa decisão continua sendo sua, e o verificador de contraste indicado abaixo mostra quais pares são legíveis.
Como usar
- Pressione a barra de espaço ou o botão Gerar para criar uma paleta. Use − e + para escolher entre 2 e 10 cores.
- Escolha uma harmonia no menu. Aleatória gera conjuntos variados mas equilibrados; as outras seguem as regras clássicas do círculo cromático.
- Clique no cadeado de qualquer amostra de que gostar e continue gerando: as cores travadas ficam, e a harmonia é recalculada em torno da primeira travada.
- Clique no lápis para escolher uma cor manualmente, ou digite um valor HEX no editor abaixo da faixa. Para começar de uma foto, envie-a em Paleta a partir de uma imagem e clique na imagem para capturar pixels exatos.
- Exporte a paleta como variáveis CSS, configuração do Tailwind, SCSS ou JSON, baixe um PNG ou copie o link de compartilhamento.
Perguntas frequentes
Como gerar uma paleta de cores?
Pressione a barra de espaço nesta página. Cada toque cria uma nova paleta com a harmonia selecionada. Quando uma cor parecer certa, trave-a com o cadeado e continue pressionando: só as amostras destravadas mudam, e as novas cores são escolhidas para harmonizar com a travada. Cinco cores é um bom padrão para um site: uma escura para o texto, uma clara para os fundos, uma primária, uma secundária e uma de destaque.
O que são cores complementares, análogas e triádicas?
São posições no círculo cromático. Cores complementares ficam em lados opostos (a 180 graus uma da outra), o que dá o contraste mais forte. Cores análogas são vizinhas, a cerca de 30 graus, e transmitem calma e coesão. Cores triádicas são três matizes espaçados de 120 graus; a complementar dividida usa um matiz base mais os dois matizes de cada lado do seu complemento (150 e 210 graus); a tetrádica, ou quadrada, usa quatro matizes a 90 graus entre si. A monocromática mantém um matiz e varia a luminosidade e a saturação.
Posso obter uma paleta de cores a partir de uma imagem?
Sim. Envie uma foto em Paleta a partir de uma imagem. A ferramenta a reduz para no máximo 200 pixels, o que suaviza o ruído, e agrupa os pixels com clusterização k-means no espaço de cor OKLab, para que o resultado reflita as cores que você vê, e não a contagem bruta de pixels. Os maiores grupos preenchem as amostras destravadas, e a parcela da imagem coberta por cada cor é exibida. Clique em qualquer ponto da imagem para capturar um pixel exato na amostra selecionada. A imagem nunca sai do seu navegador.
Como usar uma paleta em CSS ou no Tailwind?
Escolha a exportação em variáveis CSS e cole o bloco :root na sua folha de estilo; depois use as cores como var(--color-1) e assim por diante. A exportação para Tailwind é um bloco theme.extend.colors que adiciona de palette-1 a palette-N, para você escrever bg-palette-1 ou text-palette-3. Renomeie as variáveis conforme a função (primary, surface, text) depois de decidir para que serve cada cor; nomes como color-3 não sobrevivem a um redesign.
Por que este gerador usa OKLCH em vez de HSL?
Porque a luminosidade do HSL não é a luminosidade percebida. Em HSL, o amarelo puro e o azul puro têm ambos 50 por cento de luminosidade, mas o amarelo parece tão claro quanto um cinza-claro e o azul parece quase preto. Girar o matiz em HSL, portanto, gera conjuntos desequilibrados em brilho. O OKLCH, definido no CSS Color Level 4 e suportado por todos os navegadores atuais, separa luminosidade, croma e matiz, de modo que girar o matiz mantém o brilho aparente. Cores que ficam fora da faixa sRGB são trazidas de volta reduzindo o croma, mantendo o matiz e a luminosidade.
Posso compartilhar ou salvar uma paleta?
Copie o link de compartilhamento: ele contém as cores no endereço (por exemplo ?colors=264653-2a9d8f-e9c46a), então quem o abrir vê a mesma paleta, e você pode salvá-lo nos favoritos. Nada é armazenado em servidor. Você também pode baixar um PNG das amostras com os valores HEX e RGB para um mood board ou um e-mail para o cliente.
Como transformar uma paleta num sistema de cores de interface utilizável
Uma paleta de cinco cores bonitas ainda não é um design system. O que um site precisa é de funções: uma cor de texto com contraste de pelo menos 4,5:1 sobre o fundo, um fundo e uma superfície um pouco diferente para cards, uma cor primária para botões e links e uma cor de destaque usada com moderação. A regra 60-30-10 do design de interiores é um bom ponto de partida: cerca de 60 por cento de fundo neutro, 30 por cento de cor secundária, 10 por cento de destaque.
• Texto: a cor mais escura, ou um quase preto tingido com o matiz da sua primária. Preto puro #000 sobre branco puro #fff é mais duro do que precisa ser.
• Fundo e superfície: a cor ou as duas cores mais claras. Muitas paletas geradas incluem uma; se não, trave a primária e mude para Monocromática para obter tons claros dela.
• Primária: a cor que diz “clique aqui”. Verifique se o texto branco ou preto sobre ela atinge 4,5:1 (a cor de texto legível em cada amostra é uma primeira verificação rápida; o verificador de contraste é a verificação de verdade).
• Destaque: a cor mais saturada, para realces e selos, não para áreas grandes.
Depois, gere tons mais claros e mais escuros da primária (mais claros para fundos de hover, mais escuros para estados pressionados) em vez de introduzir novos matizes. Travar a primária e mudar para Monocromática com 7 a 10 cores dá essa escala.
Modos de harmonia e quando cada um funciona
• Análoga: matizes vizinhos. Calma, natural, difícil de errar. Boa para sites de conteúdo e marcas de bem-estar e alimentação. Precisa de um neutro contrastante para o texto.
• Monocromática: um matiz, muitos degraus de luminosidade. A escolha mais segura para dashboards e apps, em que a cor deve apoiar os dados, e não competir com eles.
• Complementar: dois matizes opostos. Contraste e energia máximos; use um como cor principal e o outro só para chamadas à ação, senão parece uniforme de time.
• Complementar dividida: um matiz mais os dois de cada lado do seu oposto. Quase tão vibrante quanto a complementar, com menos tensão; um bom padrão para sites de marketing.
• Triádica e tetrádica: três ou quatro matizes igualmente espaçados. Divertidas e vivas, adequadas a produtos infantis, jogos e ilustração. Deixe um matiz dominar e mantenha os outros pequenos.
• Aleatória (agradável): os matizes variam de 20 a 70 graus de uma amostra para a outra, com a luminosidade distribuída pelo conjunto. Boa para explorar antes de se comprometer com uma regra.
Como funciona a extração de cores de uma imagem
A imagem enviada é desenhada num canvas de no máximo 200 pixels no lado maior. A redução tira a média de pixels vizinhos, o que elimina o ruído de JPEG e texturas finas que, de outra forma, gerariam dezenas de cores quase idênticas. Pixels totalmente transparentes são ignorados.
Os pixels restantes são convertidos para OKLab e agrupados com clusterização k-means, em que k é o número de amostras. Os centros iniciais são escolhidos por uma regra fixa (o pixel mais próximo da cor média da imagem e, em seguida, repetidamente, o pixel mais distante de todos os centros já escolhidos), então a mesma imagem sempre gera a mesma paleta, e áreas pequenas mas distintas, como uma jaqueta vermelha numa paisagem verde, não se perdem. A média de cada grupo vira uma amostra, ordenada pela parcela da imagem que ela cobre.
A extração encontra as cores que estão lá, não necessariamente as que você usaria num design. Fotos são dominadas por tons médios apagados, então trave a cor ou as duas cores que capturam a imagem e gere o resto, ou clique na imagem para capturar um realce específico.
Ferramentas grátis relacionadas
- Verificador de contraste — Confira cores de texto e de fundo segundo a WCAG 2.x AA e AAA, veja o valor Lc da APCA e encontre a cor mais próxima que passa.
- Seletor e conversor de cores — Capture qualquer cor de qualquer lugar da tela ou converta na hora entre HEX, RGB e HSL.
- Gerador de gradiente CSS — Crie gradientes lineares, radiais e cônicos com pontos de cor arrastáveis, um seletor de ângulo e predefinições. Copie o CSS ou uma classe do Tailwind.
- Gerador de box-shadow — Crie efeitos de box-shadow e text-shadow em camadas com prévia ao vivo e predefinições de elevação, neumorfismo e brilho, e copie o CSS.