Gerador de Paletas de Cores
Gere paletas de cores complementares, análogas, triádicas e tetrádicas a partir de qualquer cor base
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.
Casos de Uso do Gerador de Paletas de Cores
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.
| Esquema | Cores | Ângulos de matiz | Ideal para |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, 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.
Exemplos de Código
Gere paletas de cores de forma programática usando conversão HSL e rotação de matiz.
// 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"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']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
}