Gerador de Paletas de Cores

Gere paletas de cores complementares, análogas, triádicas e tetrádicas a partir de qualquer cor base

Experimente um exemplo

Cor base

Esquema de cores

Paleta gerada

O que é uma Paleta de Cores?

Uma paleta de cores é um conjunto fixo de cores escolhidas para funcionar bem juntas em um design. Quando você seleciona uma única cor base para uma marca, site ou ilustração, precisa de cores complementares que se harmonizem com ela. A geração de paletas automatiza essa escolha aplicando regras da teoria das cores — especificamente as relações geométricas na roda de cores HSL padrão.

A roda de cores HSL (Matiz, Saturação, Luminosidade) organiza os matizes em um círculo de 360 graus. O vermelho fica em 0 graus, o verde em 120 graus e o azul em 240 graus. Cada esquema de harmonia de cores funciona selecionando matizes a distâncias angulares específicas da cor base. Um par complementar, por exemplo, usa duas cores separadas por 180 graus. Um conjunto análogo seleciona cores dentro de 30 graus de cada lado. Essas regras geométricas produzem combinações equilibradas porque os matizes selecionados se distribuem ao redor da roda em vez de se concentrarem em uma única região.

Esta ferramenta aceita qualquer cor hex como entrada, converte-a para HSL, rotaciona o matiz pelos ângulos definidos pelo esquema selecionado e converte os resultados de volta para hex. Ela suporta seis esquemas: complementar, análogo, triádico, split-complementar, tetrádico e monocromático. Cada esquema produz um número diferente de cores de saída, de 2 a 5.

Por que usar este Gerador de Paletas de Cores?

Escolher cores que funcionem juntas por tentativa e erro é lento e inconsistente. Um gerador de paletas aplica as regras da teoria das cores instantaneamente, fornecendo resultados matematicamente equilibrados a partir de qualquer ponto de partida.

Geração Instantânea de Paletas
Selecione uma cor base e um tipo de esquema, e a paleta aparece imediatamente. Sem envio de formulários, sem telas de carregamento. Altere a cor base e a saída é atualizada em tempo real.
🎨
Seis Esquemas de Harmonia
Escolha entre complementar, análogo, triádico, split-complementar, tetrádico ou monocromático. Cada esquema produz um efeito visual diferente, de pares de alto contraste a gradientes sutis de um único matiz.
🔒
Processamento com Privacidade
Todo o cálculo de cores é feito no seu navegador. Nenhum dado de cor é enviado a qualquer servidor. A ferramenta funciona offline após o carregamento da página.
📋
Exportação com Um Clique
Copie códigos hex individuais ou a paleta completa com um clique. Cole diretamente em CSS, Figma, na configuração do Tailwind ou em qualquer ferramenta de design que aceite valores hex.

Casos de Uso do Gerador de Paletas de Cores

Criação de Temas de Interface
Desenvolvedores frontend que estão criando um novo app podem começar com uma cor de marca e gerar uma paleta completa para tokens primários, secundários e de destaque. Esquemas triádicos ou tetrádicos produzem variedade suficiente para botões, links, alertas e fundos.
Tokens de Cor para Design Systems
Engenheiros de design systems usam paletas monocromáticas para gerar uma escala de luminosidade para um único matiz de marca e depois mapeiam cada passo para um token nomeado (por exemplo, azul-100 a azul-900).
Visualização de Dados
Engenheiros de dados e analistas precisam de cores distintas para séries de gráficos que não conflitem entre si. Uma paleta análoga ou triádica oferece separação suficiente para 3 a 6 séries, mantendo o gráfico visualmente coerente.
Landing Pages de Marketing
Designers que constroem páginas de campanha partem da cor primária da marca e usam um esquema split-complementar para encontrar cores de destaque para botões de CTA e seções destacadas, sem conflitar com o logo.
Emparelhamento para Acessibilidade
Engenheiros de QA testando conformidade WCAG emparelham as cores geradas da paleta e as testam em um verificador de contraste. Partir de um esquema complementar ou split-complementar frequentemente produz pares com alto contraste de luminância.
Aprendizado de Teoria das Cores
Estudantes de design podem alternar entre os seis esquemas com a mesma cor base e ver como cada geometria distribui os matizes ao redor da roda. A saída visual torna os ângulos abstratos algo concreto.

Comparação dos Esquemas de Harmonia de Cores

Cada esquema de harmonia seleciona cores com base nos ângulos de rotação do matiz a partir da cor base na roda HSL. A tabela abaixo lista cada esquema, o número de cores produzidas, os ângulos de rotação e o contexto de design em que funciona melhor.

EsquemaCoresÂngulos de matizIdeal para
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

Como Funciona a Rotação da Roda de Cores HSL

Toda a geração de paletas nesta ferramenta se baseia no modelo de cor HSL. Entender seus três eixos ajuda a prever como uma cor base se transformará em cada esquema.

Matiz (0-360)
A posição na roda de cores em graus. 0 é vermelho, 60 é amarelo, 120 é verde, 180 é ciano, 240 é azul, 300 é magenta. Os esquemas de paleta rotacionam este valor mantendo a saturação e a luminosidade fixas.
Saturação (0-100%)
O quanto a cor é vívida. 100% é totalmente saturada; 0% é um tom de cinza. Os esquemas de paleta preservam a saturação da cor base, de modo que todas as cores geradas compartilham a mesma intensidade.
Luminosidade (0-100%)
O quanto a cor é clara. 0% é preto, 50% é o matiz puro e 100% é branco. Os esquemas monocromáticos variam a luminosidade para criar uma escala tonal; todos os outros esquemas mantêm a luminosidade constante.

Exemplos de Código

Gere paletas de cores de forma programática usando conversão HSL e rotação de matiz.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

Perguntas Frequentes

Qual é a diferença entre complementar e split-complementar?
O esquema complementar usa duas cores exatamente a 180 graus de distância na roda de cores, produzindo o máximo contraste de matiz. O split-complementar substitui o oposto direto por duas cores a 150 e 210 graus da cor base, oferecendo contraste forte com menos tensão visual. O split-complementar é mais fácil de trabalhar em design de interface porque nenhuma cor de destaque se opõe diretamente à base.
Quantas cores deve ter uma paleta de interface?
A maioria dos design systems usa de 3 a 5 matizes principais: um primário, um secundário, um neutro e um ou dois destaques. Cada matiz principal tem então uma escala de luminosidade (100 a 900). Comece com um esquema triádico ou tetrádico para os matizes principais e depois gere escalas monocromáticas para cada um.
Posso usar essas paletas com Tailwind CSS?
Sim. Copie os valores hex e adicione-os ao objeto colors no seu arquivo tailwind.config.js ou tailwind.config.ts. Para uma escala monocromática, mapeie cada tom para uma chave numerada (50, 100, 200 etc.) para seguir a convenção de nomenclatura do Tailwind.
Por que algumas cores geradas parecem opacas ou sem vida?
Se a sua cor base tiver saturação baixa ou luminosidade extrema (muito próxima de 0% ou 100%), os matizes rotacionados também parecerão apagados. O gerador preserva os valores de saturação e luminosidade da cor base. Para paletas vívidas, escolha uma base com saturação acima de 50% e luminosidade entre 30% e 70%.
Qual é a diferença entre HSL e HSV/HSB?
HSL e HSV usam o matiz como eixo circular, mas definem o brilho de formas diferentes. No HSL, luminosidade 50% é o matiz puro e 100% é branco. No HSV (também chamado de HSB), valor 100% é o matiz puro e não é possível atingir o branco sem reduzir a saturação. A maioria dos geradores de paleta usa HSL porque seu eixo de luminosidade se mapeia de forma mais intuitiva para como percebemos o brilho das cores.
Como os esquemas de harmonia de cores se relacionam com a acessibilidade?
Harmonia de cores e contraste WCAG são preocupações separadas. Um par complementar tem contraste máximo de matiz, mas isso não garante contraste de luminância suficiente para a legibilidade do texto. Após gerar uma paleta, teste cada par de primeiro plano e fundo em relação ao WCAG AA (proporção de 4,5:1 para texto normal). Cores com luminosidade semelhante falharão independentemente da relação de matiz entre elas.
HSL é o mesmo que a função hsl() do CSS?
Sim. A função hsl() do CSS aceita três argumentos: matiz em graus (0-360), saturação como percentual e luminosidade como percentual. O CSS Color Level 4 também aceita um valor alpha separado por barra: hsl(240 60% 50% / 0.8). O modelo HSL usado por este gerador corresponde exatamente à especificação CSS, portanto você pode colar os valores de matiz, saturação e luminosidade diretamente nas suas folhas de estilo.