Generador de Paletas de Color
Genera paletas de colores complementarios, análogos, tríadicos y tetrádicos a partir de cualquier color base
Color base
Esquema de color
Paleta generada
¿Qué es una paleta de colores?
Una paleta de colores es un conjunto fijo de colores elegidos para funcionar juntos en un diseño. Cuando escoges un color base para una marca, un sitio web o una ilustración, necesitas colores complementarios que armonicen con él. La generación de paletas de colores automatiza esa elección aplicando las reglas de la teoría del color, concretamente las relaciones geométricas de la rueda de color HSL estándar.
La rueda de color HSL (Matiz, Saturación, Luminosidad) organiza los matices en un círculo de 360 grados. El rojo se sitúa en 0 grados, el verde en 120 grados y el azul en 240 grados. Todo esquema de armonía de color funciona seleccionando matices a distancias angulares específicas respecto al color base. Un par complementario, por ejemplo, usa dos colores separados 180 grados. Un conjunto análogo elige colores dentro de los 30 grados a cada lado. Estas reglas geométricas producen combinaciones equilibradas porque los matices seleccionados se distribuyen por la rueda en lugar de concentrarse en una misma zona.
Esta herramienta acepta cualquier color hex como entrada, lo convierte a HSL, rota el matiz según los ángulos definidos por el esquema seleccionado y convierte los resultados de vuelta a hex. Admite seis esquemas: complementario, análogo, tríadico, complementario dividido, tetrádico y monocromático. Cada esquema produce un número diferente de colores de salida, de 2 a 5.
¿Por qué usar este generador de paletas de color?
Elegir colores que funcionen juntos por ensayo y error es lento e inconsistente. Un generador de paletas aplica las reglas de la teoría del color de forma instantánea, ofreciéndote resultados matemáticamente equilibrados desde cualquier punto de partida.
Casos de uso del generador de paletas de color
Comparación de esquemas de armonía de color
Cada esquema de armonía elige colores según los ángulos de rotación del matiz desde el color base en la rueda HSL. La tabla siguiente muestra cada esquema, el número de colores que produce, los ángulos de rotación y el contexto de diseño en el que funciona mejor.
| Esquema | Colores | Á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 |
Cómo funciona la rotación de la rueda de color HSL
Toda la generación de paletas en esta herramienta se basa en el modelo de color HSL. Entender sus tres ejes te ayuda a predecir cómo se transformará un color base bajo cada esquema.
Ejemplos de código
Genera paletas de colores de forma programática usando conversión HSL y rotación 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
}