Gerador de paletas de cores grátis online

Como usar

• Escolha um modo de harmonia (Análogo, Complementar, Triádico, etc.) ou mantenha em Aleatório.
• Clique em Gerar ou pressione Espaço para novas paletas.
• Clique no ícone do cadeado para travar uma cor para que ela permaneça ao gerar novamente.
• Clique em um código HEX para copiá-lo para a área de transferência.
• Use Copiar CSS para obter propriedades personalizadas CSS ou baixar como imagem.

Teoria das cores e modos de harmonia

Este gerador suporta 7 modos de harmonia baseados na teoria das cores. Análogo: paletas usam cores a menos de 30° umas das outras no círculo cromático · transmitem calma e coesão. Complementar: paletas combinam cores opostas a 180° para contraste máximo. Triádico: paletas usam três matizes igualmente espaçados (a 120° de distância) para uma variedade vibrante. Complementar dividido: pega uma cor base mais duas cores adjacentes à sua complementar · ousado, porém mais sutil. Monocromático: paletas variam apenas a luminosidade e a saturação de um único matiz · elegante e minimalista. Quadrado: usa quatro cores separadas por 90° para uma paleta bem equilibrada e cheia de cor.

Perguntas frequentes

Como uso essas cores no meu projeto?

Clique em "Copiar CSS" para obter propriedades personalizadas CSS prontas para colar. Você também pode clicar em códigos HEX individuais para copiá-los ou exportar a paleta inteira como uma imagem PNG para usar como referência em ferramentas de design como Figma ou Canva.

Quantas cores uma paleta deve ter?

A maioria dos designs funciona melhor com 3 a 5 cores: uma cor primária, uma cor secundária, um tom de destaque e 1 ou 2 neutros. Use o botão "+ Adicionar cor" para expandir sua paleta ou remova cores gerando com menos.

Posso travar as cores que eu gosto?

Sim! Clique no ícone do cadeado em qualquer amostra de cor. Quando você gera novas paletas, as cores travadas permanecem no lugar enquanto as destravadas são randomizadas. Isso é ótimo para montar uma paleta em torno de uma cor de marca específica.

O que são os modos de harmonia?

Os modos de harmonia geram paletas baseadas nas relações da teoria das cores. Análogo usa matizes próximos para uma paleta relaxante. Complementar usa matizes opostos para um contraste forte. Triádico, Complementar dividido e Quadrado distribuem os matizes uniformemente pelo círculo cromático. Monocromático mantém um matiz e varia a luminosidade · perfeito para designs limpos e minimalistas.

O que é um gerador de paleta de cores?

Um gerador de paleta de cores escolhe um conjunto de cores que funcionam visualmente juntas, baseado nas regras da teoria das cores. Voce dá a ele uma dica inicial (uma cor base, um modo de harmonia ou puro acaso), e ele retorna tres a cinco códigos hexadecimais que se posicionam em locais deliberados na roda de cores. A saída está pronta para colocar em variáveis CSS, um arquivo Figma, um guia de marca ou uma apresentação.

Ferramentas web modernas expressam cores em hexadecimal (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%) ou OKLCH (51.3% 0.066 233.4). Hex é o mais copiável-colável; HSL é o mais intuitivo para ajustar (abaixe a luminosidade para uma variante mais escura); OKLCH (introduzido no CSS Color 4, suportado em navegadores desde 2023) é perceptualmente uniforme, o que importa para tokens de design. Esta ferramenta emite hex por padrão e permite copiar propriedades CSS personalizadas para variáveis e passagem de matiz amigável ao OKLCH.

Toda a geração acontece no seu navegador. Os modos de harmonia são computados a partir de uma cor base via rotação de matiz HSL, depois convertidos de volta para hex. O botão de bloqueio mantém seus favoritos enquanto o resto da paleta reorganiza. A tecla Espaço dispara uma nova geração sem sair da página, o que torna a exploração rápida.

O que há dentro do gerador

A barra superior agrupa os tres botões que mudam a geração: um botão Gerar que produz uma nova paleta, um menu suspenso Modo com sete regras de harmonia (Aleatório, Análogo, Complementar, Triádico, Split-Complementar, Monocromático, Quadrado), e um seletor de cor Base para semear modos não-aleatórios. O botão Adicionar Cor estende a paleta além das cinco amostras padrão, útil para sistemas de design que precisam de mais tons.

Cada amostra mostra seu código hex em uma pílula escura que permanece legível contra qualquer fundo. Clique no hex para copiá-lo. Clique no cadeado para congelar a amostra através de gerações futuras, é assim que voce constrói uma paleta em torno de uma cor de marca: bloqueie a marca, regenere, obtenha tres companheiros combinando. A barra de ações dentro de cada amostra mantém os ícones de bloqueio, cópia e remoção dentro de alvos de toque de 32 pixels para satisfazer a regra target-size do Lighthouse.

Abaixo da paleta, o bloco de exportação Variáveis CSS atualiza ao vivo com suas cores atuais como propriedades personalizadas :root. O botão Exportar Imagem serializa a paleta para PNG via um canvas oculto, o que é útil para compartilhar em revisões de design ou fixar em um moodboard. O atalho de teclado Espaço regenera instantaneamente, sem mudança de foco necessária.

História e contexto

Isaac Newton divide a luz branca (1666)

Os experimentos de prisma de Isaac Newton em 1666 em Cambridge mostraram que a luz branca é composta por um espectro contínuo de cores. Em Opticks (1704), ele apresentou uma roda de sete cores com vermelho, laranja, amarelo, verde, azul, índigo e violeta posicionados de modo que as cores diametralmente opostas criavam complementares harmoniosos. Toda roda de cores moderna descende deste diagrama.

Teoria das cores de Goethe (1810)

A Teoria das Cores (Theory of Colours) de Johann Wolfgang von Goethe em 1810 reenquadrou a física de Newton em termos de percepção humana. Goethe foi o primeiro a descrever sistematicamente pós-imagens, contraste simultâneo e o calor psicológico do vermelho versus a frieza do azul. Seu trabalho influenciou Turner, Schopenhauer e todo o campo da psicologia das cores que escolas de arte ensinam hoje.

Johannes Itten formaliza regras de harmonia (1961)

Johannes Itten, um professor da Bauhaus, publicou A Arte da Cor (Kunst der Farbe) em 1961. Sua roda de cores de doze raios e os sete contrastes (matiz, valor, temperatura, complementar, simultâneo, saturação, extensão) tornaram-se o currículo padrão em escolas de arte e design. Os modos de harmonia nesta ferramenta (Análogo, Complementar, Triádico, Split-Complementar, Quadrado) vem diretamente dos capítulos de Itten.

Sistema de Correspondencia Pantone (1963)

Lawrence Herbert na Pantone, uma impressora comercial M. Harris and Sons, lançou o Sistema de Correspondencia Pantone em 1963. O livro de chips deu a designers e impressores uma referencia numérica compartilhada, para que uma cor de marca pudesse sobreviver a ser reproduzida em diferentes papéis, telas e tecidos. A Cor do Ano, iniciada em 2000, agora impulsiona tendencias de paleta em moda, interiores e design web.

Paleta web-safe e as 216 cores (1996)

Quando os monitores de 8 bits dominavam a web inicial, Lynda Weinman codificou uma paleta web-safe de 216 cores em 1996 para garantir renderização consistente entre Mac e Windows. A paleta tornou-se obsoleta uma vez que a cor de 24 bits se tornou onipresente (por volta de 2000), mas a sintaxe hexadecimal que ela popularizou (#RRGGBB) permanece a forma dominante de escrever cores em CSS, HTML e ferramentas de design.

OKLCH e cor perceptualmente uniforme (2020)

O artigo OKLab de Bjoern Ottosson de 2020 introduziu um espaço de cor perceptualmente uniforme que não tem as inconsistencias de luminosidade do HSL. CSS Color Level 4 (navegadores a partir do Chrome 111, Safari 15.4, Firefox 113) adicionou sintaxe oklch(). O futuro de tokens de design, contraste de cor acessível e geração de paleta vive cada vez mais em OKLCH porque uniformidade perceptual significa que duas cores com o mesmo valor L realmente parecem igualmente brilhantes.

Fluxos de trabalho práticos

Construir uma identidade de marca a partir de uma cor

Defina a cor Base para seu hex de marca, bloqueie a primeira amostra, mude o modo para Análogo ou Split-Complementar, e clique em Gerar até que as quatro cores companheiras pareçam certas. Copie as variáveis CSS e cole-as em seus tokens de sistema de design. O resultado é uma paleta ancorada à sua marca com harmonias respaldadas pela teoria.

Projetar pares de modo escuro

Escolha uma paleta Monocromática com seu fundo de modo escuro como base. As cinco amostras dão a voce fundo, superfície, divisor, texto secundário e texto primário em luminosidade graduada. Para modo claro, gere uma paleta Monocromática separada com uma base clara. As duas paletas pareadas via prefers-color-scheme cobrem a maioria das necessidades de tematização sem ajustes ad hoc.

Escolher cores para visualização de dados

Para dados categóricos (gráficos de barra, segmentos de pizza), paletas Triádicas ou Quadradas dão a voce tres ou quatro matizes distintos que leem separadamente em um gráfico ocupado. Para dados sequenciais (mapas de calor, mapas coropléticos), use Monocromático para variar a luminosidade enquanto mantém o matiz constante. Verifique o contraste contra o fundo do gráfico; ferramentas de viz de dados como Vega-Lite esperam pelo menos 3:1 entre categorias adjacentes.

Rascunho de paleta priorizando acessibilidade

Gere uma paleta, depois cole cada par em um verificador de contraste (WebAIM, Tanaguru). Para texto do corpo em um fundo, voce quer pelo menos 4.5:1 (WCAG AA). Para texto grande ou componentes UI, 3:1 é o limiar. Se uma paleta falhar, gere uma nova ou bloqueie a amostra de marca e deixe as outras reorganizarem para encontrar um conjunto compatível.

Exploração de moodboard

Aperte Espaço repetidamente para percorrer dezenas de paletas aleatórias. Quando uma chamar sua atenção, bloqueie a melhor amostra, mude para Análogo, e continue gerando para encontrar variações que constroem sobre ela. O loop da barra de espaço é mais rápido que clicar, o que permite a voce ficar no modo de exploração do hemisfério direito sem quebrar o fluxo.

Correspondencia de cor impressão-para-tela

Quando voce tem uma referencia impressa (um chip Pantone ou amostra de tecido), pegue com conta-gotas o equivalente digital mais próximo e use-o como cor Base. Os modos de harmonia entao se espalham ao redor de sua referencia. Esteja ciente de que impressão é CMYK e tela é RGB, entao uma correspondencia exata é impossível; o objetivo é uma paleta próxima o suficiente para ler como a mesma marca.

Armadilhas comuns

Contraste WCAG não é automático

Uma paleta bonita pela teoria ainda pode falhar a acessibilidade. Pares pastel-sobre-pastel (um amarelo claro sobre um rosa claro) parecem agradáveis mas tem menos de 2:1 de contraste. Sempre teste os pares texto-sobre-fundo propostos em um verificador WCAG. Se a paleta deve funcionar para texto do corpo, construa-a primeiro em torno do requisito de contraste, harmonia em segundo.

Daltonismo afeta 8% dos homens

Deuteranopia vermelho-verde é a forma mais comum de deficiencia de visão de cor, afetando aproximadamente 8% dos homens e 0.5% das mulheres. Uma paleta Complementar vermelho-verde se torna uma única mancha marrom para um espectador deuteranópico. Para cor categórica (gráficos, badges de status, semáforos), pareie cor com forma, rótulo ou padrão, e teste em um simulador como Stark ou Sim Daltonism.

HSL não é perceptualmente uniforme

Em HSL, amarelo a 50% de luminosidade parece muito mais brilhante que azul a 50% de luminosidade. O modelo HSL trata todos os matizes igualmente numericamente, mas olhos humanos não. O gerador trabalha em HSL internamente para rotação de matiz, entao duas amostras com S e L similares ainda podem ter peso perceptual notavelmente diferente. Para paletas perceptualmente equilibradas, mude para ferramentas conscientes de OKLCH (Leonardo, Open Color).

Diferenças de gamut entre sRGB e Display P3

Telas Apple modernas (desde iMacs 2015, MacBook Pros 2016, todos os iPhones desde o 7) usam Display P3, um gamut de cor mais amplo que sRGB. Um vermelho saturado que parece vívido em Display P3 pode parecer mais opaco quando o mesmo hex é renderizado em um monitor mais antigo apenas-sRGB. Para cores de marca que devem parecer identicas em todos os lugares, fique dentro do gamut menor do sRGB.

Códigos hex não carregam alpha por padrão

Hex de tres dígitos (#abc) e seis dígitos (#aabbcc) são opacos. Hex de oito dígitos (#aabbcc80, onde 80 é 50% alpha) é suportado no CSS Color 4 e navegadores modernos mas não em ferramentas legadas. Se voce precisa de transparencia, use rgba() ou hsla() em vez disso, ou fique com cores opacas e deixe a opacidade do pai lidar com mesclagem.

Deriva de calibração do seletor de cor

Um monitor não calibrado pode derivar várias unidades Delta-E longe de uma referencia, o que significa que uma paleta que parece imaculada em sua tela pode parecer suja ou supersaturada na de outra pessoa. Para trabalho crítico para a marca, calibre com um dispositivo Spyder ou i1Display. Para a maioria do design web, variancia de tela é inevitável; escolha cores que funcionem ao longo da faixa mediana.

Privacidade e tratamento de dados

Tudo roda em seu navegador. A matemática de harmonia é JavaScript, a exportação canvas é local, e a Clipboard API requer um gesto do usuário. Não enviamos seus códigos hex para lugar nenhum, não rastreamos quais paletas voce gera, e não armazenamos nada em cookies ou localStorage. Recarregue a página e a paleta anterior se foi.

Uma vez carregada a página, o gerador funciona offline. Voce pode usá-lo em um voo, dentro de um proxy corporativo ou em um ambiente isolado. A única ação que toca a rede é a opcional Exportar Imagem, que baixa via URL de blob, e o próprio download não transmite suas cores para lugar nenhum.

Quando não usar este gerador

Estabelecer um sistema de design com tokens semanticos

Sistemas de design precisam de tokens nomeados, semanticos (color-primary-500, color-error, color-warning) com valores pareados de modo claro e escuro, garantias de contraste e passos de escala nomeados. Use uma ferramenta dedicada (Material Color Tool, Open Color, Adobe Leonardo) ou um sistema de gestão de tokens (Style Dictionary, Tokens Studio). Este gerador é para exploração, não para design de sistema.

Gestão de cor de impressão (CMYK, Pantone)

Separações de cor CMYK para impressão offset requerem ferramentas profissionais (painel de amostras do Adobe Illustrator, Pantone Connect). Conversão RGB-para-CMYK é com perda e limites de cobertura de tinta importam. Se sua paleta será impressa em escala, trabalhe com a especificação de cor da impressora desde o início, não com um gerador hex só para tela.

Gerar paletas acessíveis para texto do corpo

Para paletas que devem garantir contraste WCAG AA ou AAA em cada par, use uma ferramenta priorizando contraste como Tanaguru Contrast-Finder, Adobe Leonardo, ou ferramentas baseadas em APCA. Este gerador segue regras de harmonia, não regras de contraste, entao uma bela paleta Análoga pode ter um par texto-sobre-fundo de 1.5:1 que falha a acessibilidade.

Animações e interpolação de cor

Para paradas de gradiente ou animações de cor, voce precisa de interpolação perceptualmente uniforme em OKLCH ou LCH, não HSL ou hex bruto. Interpolação de gradiente CSS padrão para sRGB produz pontos médios opacos (o famoso ponto médio cinza entre amarelo e azul). Use ferramentas de interpolação de cor (chroma.js de Erin Kissane, oklch.com) para transições animadas.

Mais perguntas

Quando devo usar hex vs RGB vs HSL?

Hex é o mais compacto e mais copiado, ótimo para entregas de design. RGB é o mais fácil de computar em código (cada canal 0-255). HSL é o mais fácil de ajustar à mão: mude matiz para deslocar a cor, luminosidade para variantes. Para CSS moderno, OKLCH é o mais à prova de futuro para sistemas de design porque é perceptualmente uniforme.

Qual modo de harmonia devo escolher?

Comece com Análogo para paletas calmas e coesas (interfaces, blogs). Use Complementar para pares de chamada à ação de alto contraste. Triádico e Quadrado dão paletas categóricas vibrantes para gráficos ou marcas brincalhonas. Monocromático é melhor para modo escuro e sistemas de design tonais. Split-Complementar é a escolha mais segura 'audaciosa mas não chocante'.

Como verifico a acessibilidade?

Cole cada par texto-sobre-fundo no WebAIM Contrast Checker, Tanaguru ou APCA Contrast Tool. Mire em pelo menos 4.5:1 (WCAG AA) para texto do corpo, 3:1 para texto grande e componentes UI, 7:1 (WCAG AAA) para apps de leitura pesadas em prosa. Teste com simuladores de daltonismo (Stark, Sim Daltonism) para uso categórico.

Posso exportar para Figma ou Sketch?

Copiar CSS dá a voce propriedades personalizadas prontas para colar. Tanto Figma quanto Sketch importam códigos hex diretamente via seu seletor de cor. O botão Exportar Imagem dá a voce um PNG adequado para moodboards ou capturas de tela. Para uma exportação amigável a tokens (formato W3C Design Token Community Group), copie os códigos hex e adapte-os em Tokens Studio ou Style Dictionary.

Quantas cores uma paleta deve ter?

Tres a cinco para a maioria de websites e apps: uma cor de marca primária, um destaque ou secundário, um neutro para texto, e um ou dois neutros utilitários (borda, fundo). Sistemas de design maiores usam 9 a 12 tokens nomeados (primário, secundário, sucesso, aviso, erro, info, mais neutros). A ferramenta começa em cinco mas Adicionar Cor a estende.

O que é OKLCH e devo usá-lo?

OKLCH é um espaço de cor perceptualmente uniforme adicionado ao CSS em 2023. Diferente do HSL, duas cores OKLCH com o mesmo valor L realmente parecem igualmente brilhantes. Para sistemas de design e escalas tonais consistentes é a nova melhor prática. Suporte de navegadores é universal em versões atuais (Chrome 111+, Safari 15.4+, Firefox 113+). Para um fallback elegante em navegadores mais antigos, envie um valor hex sRGB ao lado do oklch().

Ferramentas relacionadas