Quantas paletas a ferramenta gera?

A ferramenta gera 9 paletas diferentes a partir de uma única cor de base: monocromática, análoga, complementar, triádica, complementar dividida, pastel, escura, tonal (Material Design) e minimalista (estilo Apple).

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.

Gerador de paletas de cores

Escolha uma cor de base e gere 9 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%)

Gerar paletas a partir de uma única cor

O gerador de paletas cria 9 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 9 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.

9 tipos de paletas – qual convém ao seu projeto?

Cada paleta tem um caráter diferente:

Monocromática
Variações de uma tonalidade em luminosidade e saturação. Elegante, harmoniosa, profissional.
Análoga
Cores vizinhas no círculo cromático. Transição suave e natural.
Complementar
Cor de base + cor oposta (180°). Contraste máximo para designs dinâmicos.
Triádica
Três cores a 120° de intervalo. Equilibrada com forte contraste visual.
Complementar dividida
Cor de base + os dois vizinhos do complemento. Contraste mais subtil.
Pastel
Luminosidade elevada, saturação reduzida. Suave, arejada – ideal para designs amigáveis.
Escura
Luminosidade baixa, tons profundos. Profissional – adequada ao modo escuro e marcas premium.
Tonal (Material Design)
Luminosidade graduada numa mesma tonalidade. Semelhante ao sistema de cores do Google Material Design.
Minimalista (Apple)
Base neutra com acento colorido. Limpa, moderna – inspirada no estilo Apple.

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°.

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 9 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

Descubra outras ferramentas

Ver todas as ferramentas

Conversor JPG/PNG para WebP

Reduza o tamanho das imagens sem perda de qualidade. Converta JPG e PNG para WebP e acelere o seu site.

Gerador de paletas de cores

Gerar paletas a partir de uma única cor

Como usar o gerador

1. Escolher a cor de base

2. Ver as paletas

3. Copiar os códigos HEX

9 tipos de paletas – qual convém ao seu projeto?

Monocromática

Análoga

Complementar

Triádica

Complementar dividida

Pastel

Escura

Tonal (Material Design)

Minimalista (Apple)

Como funciona o espaço cromático HSL

Onde utilizar as paletas geradas?

Identidade visual de marca

Sites

Interfaces de aplicações

Visuais para redes sociais

Apresentações e documentos

Resolução de problemas do gerador de paletas

As paletas não mudam após introduzir uma cor

Mensagem de formato inválido

Formato HEX curto e completo

Perguntas frequentes sobre o gerador de paletas

Quantas paletas a ferramenta gera?

O que é uma paleta monocromática?

O que é uma paleta complementar?

Posso copiar as cores geradas?

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

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

Descubra outras ferramentas

Conversor JPG/PNG para WebP

Editor de imagens online

Gerador de favicon

Verificador de meta título e descrição

Contador de palavras e caracteres

Gerador de assinatura de e-mail

Verificador de contraste de cores

Extrator de cores de imagem