Design, imagens e QRGrátis e sem cadastro

Paleta de cores: crie a sua a partir de uma cor e copie os códigos

Escolha uma cor e esta paleta de cores monta na hora as combinações, com os códigos HEX, RGB e HSL prontos para copiar e o contraste com branco e preto. Para sua marca, seu site ou sua próxima apresentação.

Sua cor HEX, RGB ou HSL

Harmonia

Sua cor e a oposta no círculo cromático (180°), com uma versão clara e outra escura: contraste máximo para botões e chamadas para ação.

Base

Branco7,29:1AAA

Preto2,88:1Reprova
2

Branco2,73:1Reprova

Preto7,66:1AAA
3

Branco13,45:1AAA

Preto1,56:1Reprova
4

Branco1,41:1Reprova

Preto14,79:1AAA
5

Branco1,21:1Reprova

Preto17,21:1AAA

Trave com o cadeado as cores que você curtiu e clique de novo: só as outras mudam.

Tons claros e escuros da sua cor

Sua cor misturada com preto (esquerda) e com branco (direita) em passos de 20%. Clique em um para copiar o HEX.

Sua paleta em variáveis CSS

:root {
  --color-1: #3D3AE0;
  --color-2: #9493EE;
  --color-3: #22207B;
  --color-4: #DDE03A;
  --color-5: #ECEE93;
}

Contraste pela fórmula da WCAG 2.2: o nível AA pede 4,5:1 em texto normal e 3:1 em texto grande; o AAA, 7:1 e 4,5:1. Tudo é calculado no seu navegador: nada é salvo nem enviado.

Uma paleta de cores é o conjunto de 3 a 6 tons que sua marca usa em tudo: site, redes sociais, fachada e nota fiscal. Este gerador de paleta de cores cria a sua a partir de uma única cor, com as regras do círculo cromático. E ainda mostra qual combinação de cores aguenta texto por cima.

Como criar paleta de cores em 4 passos

Escolha sua cor de partida

Use o seletor, cole um código HEX, RGB ou HSL, ou pegue uma cor da tela com o conta-gotas (Chrome e Edge no computador).
Escolha a harmonia

Seis regras, da complementar à monocromática. O círculo mostra onde cai cada cor.
Trave o que gostou e teste mais

O cadeado prende uma cor. “Paleta aleatória” muda só as outras, então você ajusta sem perder o que já estava bom.
Copie os códigos ou o CSS

Clique em qualquer código para copiar. Logo abaixo ficam as variáveis CSS e os tons claros e escuros da sua cor.

Cores complementares, cores análogas, tríade e tétrade: como são calculadas

Cada harmonia gira o tom (H) da sua cor no círculo HSL, o das telas. A saturação e a luminosidade não mudam, então as cores novas têm o mesmo peso que a sua.

Harmonia	Giro no círculo	Quando usar
Cores complementares	180°	Um botão que precisa aparecer de qualquer jeito
Complementar dividida	150° e 210°	Contraste forte, mas mais suave
Cores análogas	±30° e ±60°	Marcas tranquilas: bem-estar, natureza, casa
Tríade	120° e 240°	Marcas alegres, infantis ou de lazer
Tétrade	90°, 180° e 270°	Muita variedade: uma manda e o resto acompanha
Monocromática	0° (a luz muda de 15 em 15 pontos)	Sites elegantes e apresentações sóbrias

Os tons claros e escuros misturam sua cor com branco ou preto: claro = cor + (255 − cor) × t, e escuro = cor × (1 − t), com t em passos de 20%. Servem para fundos, bordas e o hover dos botões.

Cores quentes e frias: como montar uma paleta com as duas

«Cores quentes e frias» tem cerca de 8.100 buscas por mês no Brasil, segundo a DataForSEO (outubro de 2026). A temperatura se lê no círculo cromático:

Quentes: vermelhos, laranjas e amarelos, de 0° a 60° aproximadamente.
Frias: ciano, azuis e índigos, de 180° a 260° aproximadamente.
Neutras: branco, preto, cinza, bege e marrons. Têm pouca saturação e não competem com ninguém.

Verdes e violetas ficam no meio: parecem quentes ou frios conforme o que está ao lado. Uma boa paleta de cores quentes e frias tem um lado que manda e outro que acompanha, como uma base quente com um botão azul de destaque. Monte pela harmonia complementar e confira o contraste antes de publicar.

Contraste de cores: a fórmula da WCAG

Cada cor mostra o contraste com branco e com preto, pela fórmula do guia de contraste da WCAG 2.2, o padrão de acessibilidade do W3C. Primeiro sai a luminância relativa (L = 0,2126 R + 0,7152 G + 0,0722 B, com cada canal linearizado). Depois, a razão: (L1 + 0,05) / (L2 + 0,05).

Nível	Texto normal	Texto grande (24 px, ou 18,5 px em negrito)
AA	4,5:1	3:1
AAA	7:1	4,5:1

O cinza #767676 sobre branco dá 4,54:1: passa no AA raspando. Se uma cor marca “Reprova” com branco e com preto, não use em texto.

Paleta de cores pastel: como tirar a sua de uma cor

«Paleta de cores pastel» tem cerca de 1.300 buscas por mês no Brasil, segundo a DataForSEO (outubro de 2026). Um pastel é a sua cor misturada com muito branco, e a ferramenta já calcula isso nos tintes. Com o violeta #6C5CE7 de exemplo:

Tinte	Código	Contraste com branco	Contraste com azul-marinho #1F3A5F
60 %	#C4BEF5	1,75:1	6,58:1
80 %	#E2DEFA	1,30:1	8,80:1

Cálculo nosso, com a fórmula da WCAG. A lição: pastel é fundo, não é letra. Sobre o branco não chega nem a 2:1; com texto azul-marinho, o de 60 % passa o AA (4,5:1) e o de 80 % chega ao AAA (7:1). Use tintes de 60 % a 80 % em cartões, banners e fundos de seção, e deixe a cor cheia para o botão.

Paleta de cores para site: exemplos para negócios

Clínica ou fisioterapia: verde-azulado com suas análogas. Passa calma, e o tom claro de 80% fica perfeito como fundo.
Loja virtual de moda: monocromática em preto ou areia, e uma complementar só para o botão de comprar. Se tudo grita, nada vende.
Cafeteria ou restaurante: tríade quente (terracota, mostarda e verde-oliva) com bastante off-white.

Com a paleta pronta, coloque ao lado do seu logo e do seu slogan (veja estes exemplos de slogan) e confira se contam a mesma história. Vai montar o site? O guia para criar site com IA mostra onde colar as variáveis. Para cartazes e panfletos, gere um QR Code com as cores da sua marca.

Perguntas frequentes sobre paleta de cores

Como saber a paleta de cores ideal?

Comece por uma única cor que conte quem você é: azuis e verdes costumam passar confiança e saúde; vermelhos e laranjas, energia. Veja quais cores seus três concorrentes diretos usam e escolha uma que te diferencie. Depois monte a harmonia aqui, junte um neutro claro e um escuro e teste em peças reais: o site, um post e um cartão. Se não convencer, troque a cor de partida, não a regra.

O que é a regra das 3 cores?

É a regra do 60-30-10, que vem da decoração e funciona muito bem em sites e marcas: 60% de uma cor neutra (fundo), 30% da cor principal (títulos, faixas, cabeçalho) e 10% de uma cor de destaque, reservada para o que você quer que a pessoa clique. Na ferramenta, o destaque costuma ser a cor complementar, e o neutro sai dos tons claros da sua cor. Se tudo tem a mesma quantidade de cor, nada chama a atenção.

Quais cores combinam?

Combinam as cores que têm uma relação clara no círculo: opostas, como o azul e o laranja dos pintores; vizinhas, como verde, verde-azulado e azul; ou separadas por igual, como vermelho, amarelo e azul. Os neutros (off-white, cinza, bege e azul-marinho) vão com quase tudo. O que raramente funciona é juntar várias cores muito saturadas sem nenhuma mandar. Escolha uma protagonista e use as outras em doses menores.

O que são cores complementares?

São as que ficam em lados opostos do círculo, a 180°, e por isso dão o maior contraste de tom possível. Atenção: existem dois círculos. No do pintor (vermelho, amarelo e azul), a complementar do azul é o laranja; no das telas (RGB, o desta ferramenta e de todo design digital), é o amarelo. Para site e redes sociais vale o RGB. Use as complementares em doses pequenas: um botão ou um selo de oferta.