Gere 17 paletas de cores a partir de uma cor base

Escolha uma cor de base e gere 17 paletas harmoniosas. Monocromática, complementar, triádica, pastel, escura e mais – todos os cálculos são executados localmente no seu navegador.

Paleta monocromática

Todas as cores partilham a mesma tonalidade (H) e variam principalmente em luminosidade (L) no espaço de cor HSL.

#0b28ba

hsl(230, 89%, 39%)

#153af2

hsl(230, 89%, 52%)

#4f6bf5

hsl(230, 89%, 64%)

#899cf8

hsl(230, 89%, 76%)

#c3ccfc

hsl(230, 89%, 88%)

Paleta triádica

Três tonalidades separadas por 120° no círculo cromático (vértices de um triângulo equilátero), uma geometria frequentemente utilizada em branding e designs inspirados na Bauhaus.

#4f6bf5

hsl(230, 89%, 64%)

#f43757

hsl(350, 89%, 59%)

#7ff667

hsl(110, 89%, 69%)

#f87f94

hsl(350, 89%, 74%)

#42f21f

hsl(110, 89%, 54%)

Paleta complementar dividida

Uma variante da paleta complementar: em vez de um complemento (180°), utilizam-se duas cores deslocadas de aproximadamente ±30° do complemento, reduzindo a tensão visual mas mantendo um forte contraste.

#4f6bf5

hsl(230, 89%, 64%)

#f5864f

hsl(20, 89%, 64%)

#bef54f

hsl(80, 89%, 64%)

#f7a176

hsl(20, 89%, 72%)

#b0f328

hsl(80, 89%, 56%)

Paleta pastel

A mesma tonalidade com saturação reduzida e luminosidade aumentada, um deslocamento para o centro e o topo do espaço HSL que produz cores suaves e "cremosas".

#e1e5f4

hsl(230, 45%, 92%)

#d3d7ee

hsl(230, 45%, 88%)

#c4cae9

hsl(230, 45%, 84%)

#b5bde3

hsl(230, 45%, 80%)

#a6b0dd

hsl(230, 45%, 76%)

Paleta escura

A mesma tonalidade com saturação elevada (S) e luminosidade reduzida (L) um deslocamento para baixo no eixo de luminosidade, produzindo cores profundas típicas do modo escuro e acentos intensos.

#3757f4

hsl(230, 89%, 59%)

#153af2

hsl(230, 89%, 52%)

#0c2dd2

hsl(230, 89%, 44%)

#0a25ab

hsl(230, 89%, 36%)

#081d85

hsl(230, 89%, 28%)

Paleta tonal (inspirada em Material Design)

Vários níveis de luminosidade de uma mesma tonalidade L variada e S moderada, semelhante às gamas tonais das diretrizes Material Design (ex.: 50-900).

#f2f3f8

hsl(230, 27%, 96%)

#dcdfef

hsl(230, 36%, 90%)

#b1bae7

hsl(230, 54%, 80%)

#7c8ee9

hsl(230, 71%, 70%)

#3e5df4

hsl(230, 89%, 60%)

Paleta minimalista (inspirada em Apple)

Um acento de cor vivo e vários neutros muito claros e suaves, uma composição típica de interfaces com muito espaço branco e sombras subtis.

#3e5df4

hsl(230, 89%, 60%)

#fafafa

hsl(230, 6%, 98%)

#efeff1

hsl(230, 6%, 94%)

#dfdfe2

hsl(230, 6%, 88%)

#484951

hsl(230, 6%, 30%)

Paleta análoga

Cores de tonalidades próximas, de aproximadamente -30° a +30° em torno da cor base no círculo cromático clássico (ex.: Itten).

#4fbef5

hsl(200, 89%, 64%)

#67a3f6

hsl(215, 89%, 69%)

#4f6bf5

hsl(230, 89%, 64%)

#4637f4

hsl(245, 89%, 59%)

#864ff5

hsl(260, 89%, 64%)

Paleta complementar

A cor base e o seu complemento deslocado 180° no círculo cromático, um dos contrastes fundamentais descritos por Johannes Itten.

#4f6bf5

hsl(230, 89%, 64%)

#1f42f2

hsl(230, 89%, 54%)

#f5d94f

hsl(50, 89%, 64%)

#f8e37f

hsl(50, 89%, 74%)

#f2cf1f

hsl(50, 89%, 54%)

Paleta tetrádica (quadrada)

Quatro tons espaçados 90 no círculo cromático (vértices de um quadrado) rica e equilibrada, ideal para temas UI complexos e visualização de dados.

#4f6bf5

hsl(230, 89%, 64%)

#f54fbe

hsl(320, 89%, 64%)

#f5d94f

hsl(50, 89%, 64%)

#4ff586

hsl(140, 89%, 64%)

#97a8f9

hsl(230, 89%, 79%)

Paleta de tons quentes

Cores deslocadas para a extremidade quente do espectro (vermelhos, laranjas, amarelos) evoca energia, calor e acessibilidade.

#f3d026

hsl(50, 89%, 55%)

#e7f548

hsl(65, 89%, 62%)

#c6f665

hsl(80, 89%, 68%)

#e8e00d

hsl(58, 89%, 48%)

#e5f886

hsl(70, 89%, 75%)

Paleta de tons frios

Cores deslocadas para a extremidade fria do espectro (azuis, turquesas, roxos) transmite calma, profissionalismo e confiança.

#0e34f1

hsl(230, 89%, 50%)

#4434f3

hsl(245, 89%, 58%)

#0c62d9

hsl(215, 89%, 45%)

#565cf5

hsl(238, 89%, 65%)

#0a3fb7

hsl(222, 89%, 38%)

Paleta de tons terrosos

Castanhos, olivas e ocres de baixa saturação inspirados em paisagens naturais perfeita para marcas ecológicas e estética rústica.

#9b9b4b

hsl(60, 35%, 45%)

#a3af6a

hsl(70, 30%, 55%)

#88813a

hsl(55, 40%, 38%)

#a6b686

hsl(80, 25%, 62%)

#a5ac53

hsl(65, 35%, 50%)

Paleta néon vibrante

Cores de saturação máxima com intensidade elétrica projetada para marketing ousado, interfaces de jogos e designs chamativos.

#1a40ff

hsl(230, 100%, 55%)

#330aff

hsl(250, 100%, 52%)

#2994ff

hsl(210, 100%, 58%)

#7f06f9

hsl(270, 95%, 50%)

#15d4f9

hsl(190, 95%, 53%)

Paleta vintage suave

Tons dessaturados e ligeiramente quentes que lembram impressões antigas e fotografia retro ideal para marcas com herança e estética nostálgica.

#7c87c1

hsl(230, 36%, 62%)

#9c8ac2

hsl(260, 31%, 65%)

#69a2bf

hsl(200, 40%, 58%)

#bc98c3

hsl(290, 27%, 68%)

#65b3a6

hsl(170, 34%, 55%)

Paleta de alto contraste

Faixa extrema de luminosidade do quase preto ao quase branco com o tom base excelente para designs acessíveis e forte hierarquia visual.

#030a30

hsl(230, 89%, 10%)

#081f91

hsl(230, 89%, 30%)

#0e34f1

hsl(230, 89%, 50%)

#869af8

hsl(230, 89%, 75%)

#f3f4f6

hsl(230, 15%, 96%)

Paleta gradiente pôr do sol

Uma rotação suave de tons quentes a frios, imitando um pôr do sol natural ótima para seções hero, fundos e projetos criativos.

#2648f3

hsl(230, 89%, 55%)

#6434f3

hsl(255, 89%, 58%)

#a917f2

hsl(280, 89%, 52%)

#e80dd6

hsl(305, 89%, 48%)

#d90c73

hsl(330, 89%, 45%)

Gerar paletas a partir de uma única cor

O gerador de paletas cria 17 paletas diferentes a partir de uma única cor de base, apoiando-se na teoria das cores. Cada paleta tem uma composição diferente – das variações monocromáticas às cores complementares contrastantes.

Todos os cálculos baseiam-se no espaço cromático HSL (Tonalidade, Saturação, Luminosidade). A tonalidade determina a cor de base, a saturação a intensidade e a luminosidade o caráter claro ou escuro. Este modelo corresponde à perceção humana das cores e presta-se perfeitamente à geração de paletas.

Como usar o gerador

A geração demora apenas alguns segundos:

1. Escolher a cor de base
Introduza um código HEX ou utilize o seletor de cores.
2. Ver as paletas
A ferramenta gera automaticamente 17 paletas com várias cores harmoniosas.
3. Copiar os códigos HEX
Clique numa cor para copiar o seu código HEX. Utilize-o em CSS, Figma ou outras ferramentas.

17 tipos de paletas – qual combina com o seu projeto?

O gerador cria 17 esquemas cromáticos baseados na teoria das cores. Cada um segue uma lógica diferente:

Paleta monocromática
Vários níveis de luminosidade de uma única tonalidade. As cores transmitem coesão e serenidade. Adequada para relatórios corporativos, sites institucionais e projetos que pedem sobriedade visual.
Paleta análoga
Cores vizinhas no círculo cromático (cerca de 30° de distância). Transições suaves sem contraste brusco. Apreciada em ilustrações editoriais, blogs e materiais narrativos.
Paleta complementar
A cor base e a sua oposta no círculo (180°). Produz o maior contraste visual. Útil para botões de ação, banners promocionais e elementos que precisam de destaque imediato.
Paleta triádica
Três cores espaçadas de 120° formando um triângulo equilátero. Combinação vibrante e equilibrada. Funciona bem para identidade de marcas criativas e campanhas publicitárias.
Paleta complementar dividida
Em vez do complemento direto, usam-se os dois vizinhos deste. O contraste permanece evidente mas menos agressivo. Uma opção segura quando o esquema complementar parece intenso demais.
Paleta pastel
Saturação reduzida e luminosidade alta produzem tons suaves e delicados. Comum na cosmética, na moda infantil e na confeitaria artesanal.
Paleta escura
Saturação elevada e luminosidade baixa. Tons profundos e intensos para interfaces em modo escuro, marcas premium e produtos que visam exclusividade.
Paleta tonal
Uma escala de luminosidade da mesma tonalidade, do muito claro ao muito escuro. Corresponde aos níveis de cor dos design systems (ex.: 50 a 900). Indispensável para construir bibliotecas de componentes UI.
Paleta minimalista
Um acento cromático forte rodeado de neutros claros. Estilo típico de páginas de produto e landing pages contemporâneas com bastante espaço em branco.
Paleta tetrádica (quadrada)
Quatro tonalidades a 90° de distância no círculo cromático. Rica e equilibrada – especialmente indicada para dashboards, visualizações de dados e interfaces complexas que exigem muitas cores distintas.
Paleta quente
Tonalidades deslocadas para vermelhos, laranjas e amarelos. Transmite energia, calor e proximidade. Comum na restauração, na hotelaria e em campanhas de marketing dinâmicas.
Paleta fria
Tonalidades deslocadas para azuis, turquesas e violetas. Comunica calma, profissionalismo e confiança. Presente em fintech, saúde e branding corporativo.
Paleta tons de terra
Castanhos, olivas e ocres pouco saturados inspirados em paisagens naturais. Indicada para marcas biológicas, produtos artesanais e uma estética rústica e autêntica.
Paleta néon
Cores com saturação máxima e intensidade elétrica. Concebida para marketing arrojado, interfaces de jogos, marcas de vida noturna e designs que exigem atenção imediata.
Paleta vintage
Tons dessaturados e ligeiramente quentes que evocam impressões antigas e fotografia retrô. Ideal para marcas com história, produtos artesanais e uma estética nostálgica.
Paleta alto contraste
Amplitude de luminosidade extrema do quase preto ao quase branco com a tonalidade base. Excelente para designs acessíveis, hierarquia visual forte e interfaces em conformidade com as WCAG.
Paleta pôr do sol
Rotação fluida de tonalidades do quente para o frio, imitando um pôr do sol natural. Perfeita para secções hero, fundos com gradiente e projetos criativos.

Exemplo: HSL(210, 80%, 50%)

H = 210° (tonalidade azul)

S = 80% (intensa)

L = 50% (luminosidade média)

Mesma tonalidade, luminosidade diferente

L: 90% → 70% → 50% → 30% → 10%

Como funciona o espaço cromático HSL

Todas as paletas desta ferramenta baseiam-se no espaço cromático HSL (Tonalidade, Saturação, Luminosidade). Contrariamente ao HEX ou RGB, o HSL descreve as cores tal como as percecionamos:

Hue (H) – a tonalidade no círculo cromático (0°–360°). 0° = vermelho, 120° = verde, 240° = azul.
Saturation (S) – a intensidade. 0% = cinzento, 100% = cor plenamente saturada.
Lightness (L) – a luminosidade. 0% = preto, 50% = cor normal, 100% = branco.

Ao modificar seletivamente estes valores, obtêm-se paletas harmoniosas. As paletas monocromáticas variam apenas L, as análogas apenas H e as complementares invertem H em 180°.

A cor na arte e no design lusófono

O azulejo é a assinatura visual de Portugal. Desde o século XV, painéis de cerâmica azul e branca cobrem fachadas de igrejas, estações de comboio e palácios. O contraste entre o azul cobalto e o fundo branco cria um esquema cromático de alta legibilidade - o mesmo princípio que torna interfaces digitais claras e fáceis de navegar. A Estação de São Bento no Porto e o Mosteiro dos Jerónimos em Lisboa são exemplos icónicos desta paleta monocromática em azul.

O estilo Manuelino trouxe outra dimensão cromática à arquitetura portuguesa. Pedra calcária branca esculpida com motivos marítimos - cordas, algas, esferas armilares - ganha profundidade através de sombras naturais que criam gradientes de bege, creme e cinzento. Esta lição de cor através da textura aplica-se ao design digital: variações subtis de luminosidade numa só tonalidade produzem hierarquia visual sem necessidade de múltiplas cores.

No Brasil, o Modernismo de Tarsila do Amaral revolucionou o uso da cor. Obras como Abaporu (1928) utilizam verdes tropicais, amarelos intensos e azuis profundos que capturam a paisagem brasileira. Estes contrastes quentes e saturados inspiram paletas contemporâneas para marcas que procuram transmitir energia e autenticidade.

Simbolismo das cores na cultura portuguesa e brasileira

A bandeira portuguesa combina verde e vermelho com o amarelo da esfera armilar. O verde representa esperança e os oceanos que os navegadores cruzaram. O vermelho simboliza o sangue dos que lutaram pela nação. No branding para o mercado português, esta combinação evoca patriotismo, tradição e descoberta. Marcas de turismo, gastronomia e produtos regionais utilizam estes tons como ponto de partida.

No Brasil, o verde e amarelo da bandeira têm um significado diferente - riqueza natural e ouro. O azul do globo celeste e o branco das estrelas completam a paleta. O futebol brasileiro tornou o amarelo-canário num símbolo reconhecido mundialmente. Marcas brasileiras de desporto, lazer e entretenimento utilizam frequentemente este amarelo vibrante como cor principal.

As festas populares lusófonas têm paletas próprias. O Carnaval brasileiro explode com amarelo, verde, roxo, laranja e rosa - cores que transmitem alegria e celebração. As festas dos Santos Populares em Portugal decoram as ruas com manjerico verde, balões coloridos e sardinhas pintadas em todas as cores do arco-íris. O Natal lusófono mistura vermelho, dourado e verde escuro. Conhecer estes códigos culturais permite criar esquemas de cores que falam diretamente ao público-alvo.

Cor no branding e no mercado lusófono

O setor vinícola português é um exemplo de como a cor constrói identidade de marca. Os rótulos de Vinho do Porto usam bordô profundo, dourado e preto para comunicar tradição e prestígio. Os vinhos verdes do Minho preferem verdes claros, brancos e azuis suaves que evocam frescura e juventude. Uma paleta monocromática em tons de bordô ou uma paleta análoga em verdes e dourados funciona bem para este segmento.

O design digital lusófono está em crescimento acelerado. Startups em Lisboa, São Paulo e Luanda adotam paletas vibrantes - corais, turquesas, violetas e laranjas - para se destacarem em mercados competitivos. O contraste com o branding tradicional português, mais conservador, torna estas marcas jovens imediatamente reconhecíveis. O gerador de paletas oferece esquemas triádicos e complementares divididos que proporcionam este tipo de combinações arrojadas.

A indústria do turismo lusófono utiliza códigos cromáticos regionais. O Algarve inspira-se em tons de areia, azul oceano e branco calcário. A Amazónia brasileira traz verdes profundos, castanhos de terra e azuis de rio. Cabo Verde e Moçambique combinam turquesa tropical com laranjas e rosas quentes. Cada destino tem uma identidade cromática que as marcas locais aproveitam para criar ligação emocional com o público.

Onde utilizar as paletas geradas?

Identidade visual de marca
Selecione cores complementares para um logótipo existente ou construa uma paleta de branding do zero, para cartões de visita, papelaria e suportes de marketing.
Sites
Defina a cor principal, a cor de destaque e os tons de fundo. Os códigos HEX copiados colam-se diretamente nas folhas de estilo CSS ou na configuração de temas.
Interfaces de aplicações
A paleta tonal fornece variantes de luminosidade de uma cor: mais claras para os fundos, mais escuras para o texto, intermédias para bordas e estados interativos.
Visuais para redes sociais
Cores coerentes para publicações, stories e capas de perfil. As paletas análogas ou pastel funcionam bem para um estilo uniforme e reconhecível.
Apresentações e documentos
Conjuntos de cores harmoniosos para diapositivos, gráficos e infografias. As paletas monocromáticas ou minimalistas mantêm a ordem visual.

Resolução de problemas do gerador de paletas

As paletas não mudam após introduzir uma cor
Simplesmente digitar um código HEX não gera automaticamente as paletas: deve confirmar a alteração com o botão Atualizar cor. Só após a confirmação é que a ferramenta recalcula os 17 esquemas.
Mensagem de formato inválido
O gerador aceita apenas o formato HEX com # no início, por ex. #FF5500. Os formatos sem # (por ex. FF5500) ou em notação RGB (por ex. rgb(255,85,0)) não são suportados.
Formato HEX curto e completo
Ambos os formatos são suportados: completo #RRGGBB (por ex. #FF5500) e curto #RGB (por ex. #F50). O gerador reconhece automaticamente ambos e trata-os de forma idêntica.

Perguntas frequentes sobre o gerador de paletas

Quantas paletas a ferramenta gera?

A ferramenta gera 17 paletas diferentes a partir de uma única cor de base: monocromática, análoga, complementar, triádica, complementar dividida, tetrádica (quadrada), quente, fria, tons de terra, néon, vintage, alto contraste, pôr do sol, pastel, escura, tonal e minimalista.

O que é uma paleta monocromática?

Uma paleta monocromática é composta por variações de uma única tonalidade – todas as cores partilham a mesma tonalidade (H no modelo HSL) e variam apenas em luminosidade e saturação. Estas paletas são harmoniosas e particularmente adequadas para designs profissionais.

O que é uma paleta complementar?

Uma paleta complementar combina a cor de base com o seu complemento – a cor oposta no círculo cromático (desfasamento de 180°). Este contraste é um dos princípios fundamentais da teoria das cores e produz um efeito vivo e dinâmico.

Posso copiar as cores geradas?

Sim. Clique numa cor na paleta para copiar o seu código HEX para a área de transferência. Utilize-o diretamente em CSS, Figma, Adobe ou outras ferramentas de design.

O que é o espaço cromático HSL?

HSL significa Hue (tonalidade), Saturation (saturação) e Lightness (luminosidade). Contrariamente ao RGB, o HSL descreve as cores tal como as percecionamos: a tonalidade determina a cor de base, a saturação a intensidade e a luminosidade indica se a cor é clara ou escura. Todas as paletas desta ferramenta baseiam-se em cálculos HSL.

Qual a diferença entre triádica e complementar dividida?

Uma paleta triádica utiliza três cores equidistantes no círculo cromático (120° de intervalo). Uma paleta complementar dividida utiliza, em vez do complemento direto, os dois vizinhos do complemento – o que produz um contraste mais subtil.

Qual tipo de paleta é melhor para um site corporativo?

Paletas monocromáticas ou tonais funcionam bem para sites corporativos porque oferecem uma hierarquia visual unificada e serena. Use a paleta tonal para construir um sistema completo de fundos, textos, bordas e acentos a partir de uma única cor da marca.

Posso usar as paletas geradas em projetos comerciais?

Sim. Pode usar as paletas de cores geradas em qualquer projeto - comercial e não comercial, sem restrições de licença.

Ajude-nos a melhorar nossas ferramentas

Tem uma ideia para uma nova funcionalidade, encontrou um bug ou quer sugerir outra ferramenta que facilitaria seu trabalho? Escreva-nos – respondemos em 24 horas.