Generador de Paletas de Color

Genera paletas de colores complementarios, análogos, tríadicos y tetrádicos a partir de cualquier color base

Prueba un ejemplo

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.

Generación de paletas instantánea
Selecciona un color base y un tipo de esquema, y la paleta aparece de inmediato. Sin envío de formularios, sin pantallas de carga. Cambia el color base y el resultado se actualiza en tiempo real.
🎨
Seis esquemas de armonía
Elige entre complementario, análogo, tríadico, complementario dividido, tetrádico o monocromático. Cada esquema produce un efecto visual distinto, desde pares de alto contraste hasta gradientes sutiles de un solo matiz.
🔒
Procesamiento con privacidad primero
Todo el cálculo de colores se ejecuta en tu navegador. No se envía ningún dato de color a ningún servidor. La herramienta funciona sin conexión una vez cargada la página.
📋
Exportación en un clic
Copia códigos hex individuales o toda la paleta con un solo clic. Pega directamente en CSS, Figma, la configuración de Tailwind o cualquier herramienta de diseño que acepte valores hex.

Casos de uso del generador de paletas de color

Creación de temas de interfaz
Los desarrolladores frontend que construyen una nueva aplicación pueden partir de un color de marca y generar una paleta completa para los tokens primario, secundario y de acento. Los esquemas tríadico o tetrádico producen suficiente variedad para botones, enlaces, alertas y fondos.
Tokens de color en sistemas de diseño
Los ingenieros de sistemas de diseño usan paletas monocromáticas para generar una escala de luminosidad para un único matiz de marca, y luego asignan cada paso a un token con nombre (por ejemplo, blue-100 a blue-900).
Visualización de datos
Los ingenieros de datos y analistas necesitan colores diferenciados para las series de gráficos que no choquen entre sí. Una paleta análoga o tríadica ofrece suficiente separación para 3-6 series mientras mantiene el gráfico visualmente coherente.
Páginas de aterrizaje de marketing
Los diseñadores que crean páginas de campaña parten del color primario de la marca y usan un esquema complementario dividido para encontrar colores de acento para los botones CTA y secciones destacadas sin que choquen con el logotipo.
Combinaciones para accesibilidad
Los ingenieros de QA que verifican el cumplimiento WCAG combinan los colores de la paleta generada y los pasan por un verificador de contraste. Partir de un esquema complementario o complementario dividido suele producir pares con alto contraste de luminancia.
Aprendizaje de teoría del color
Los estudiantes de diseño pueden alternar entre los seis esquemas con el mismo color base y ver cómo cada geometría distribuye los matices por la rueda. El resultado visual hace tangibles los ángulos abstractos.

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.

EsquemaColoresÁ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

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.

Matiz (0-360)
La posición en la rueda de color expresada en grados. 0 es rojo, 60 es amarillo, 120 es verde, 180 es cian, 240 es azul y 300 es magenta. Los esquemas de paleta rotan este valor manteniendo fijas la saturación y la luminosidad.
Saturación (0-100%)
La viveza del color. Al 100% está completamente saturado; al 0% es un tono de gris. Los esquemas de paleta preservan la saturación del color base para que todos los colores generados compartan la misma intensidad.
Luminosidad (0-100%)
El brillo del color. Al 0% es negro, al 50% es el matiz puro y al 100% es blanco. Los esquemas monocromáticos varían la luminosidad para crear una escala tonal; todos los demás esquemas mantienen la luminosidad constante.

Ejemplos de código

Genera paletas de colores de forma programática usando conversión HSL y rotación 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
}

Preguntas frecuentes

¿Cuál es la diferencia entre complementario y complementario dividido?
El esquema complementario usa dos colores separados exactamente 180 grados en la rueda de color, produciendo el máximo contraste de matiz. El complementario dividido sustituye el opuesto directo por dos colores a 150 y 210 grados del color base, dando un contraste fuerte con menos tensión visual. El complementario dividido es más fácil de usar en diseño de interfaces porque ningún color de acento se opone directamente al base.
¿Cuántos colores debe tener una paleta de interfaz?
La mayoría de los sistemas de diseño usan entre 3 y 5 matices principales: un primario, un secundario, un neutro y uno o dos acentos. Cada matiz principal tiene después una escala de luminosidad (100 a 900). Empieza con un esquema tríadico o tetrádico para los matices principales y luego genera escalas monocromáticas para cada uno.
¿Puedo usar estas paletas con Tailwind CSS?
Sí. Copia los valores hex y añádelos al objeto de colores en tu archivo tailwind.config.js o tailwind.config.ts. Para una escala monocromática, asigna cada tono a una clave numerada (50, 100, 200, etc.) para seguir la convención de nomenclatura de Tailwind.
¿Por qué algunos colores generados parecen apagados o turbios?
Si tu color base tiene poca saturación o una luminosidad extrema (muy cerca del 0% o del 100%), los matices rotados también parecerán atenuados. El generador preserva los valores de saturación y luminosidad del color base. Para paletas vivas, elige un color base con saturación superior al 50% y luminosidad entre el 30% y el 70%.
¿Cuál es la diferencia entre HSL y HSV/HSB?
HSL y HSV usan el matiz como eje circular, pero definen el brillo de forma diferente. En HSL, una luminosidad del 50% corresponde al matiz puro y el 100% es blanco. En HSV (también llamado HSB), un valor del 100% es el matiz puro y no hay forma de llegar al blanco sin reducir la saturación. La mayoría de los generadores de paletas usan HSL porque su eje de luminosidad se corresponde de forma más intuitiva con cómo percibimos el brillo del color.
¿Cómo se relacionan los esquemas de armonía de color con la accesibilidad?
La armonía de color y el contraste WCAG son aspectos distintos. Un par complementario tiene el máximo contraste de matiz, pero eso no garantiza un contraste de luminancia suficiente para la legibilidad del texto. Tras generar una paleta, prueba cada par de primer plano y fondo frente a WCAG AA (ratio de 4,5:1 para texto normal). Los colores con luminosidades similares fallarán independientemente de su relación de matiz.
¿Es HSL lo mismo que la función CSS hsl()?
Sí. La función CSS hsl() acepta tres argumentos: el matiz en grados (0-360), la saturación como porcentaje y la luminosidad como porcentaje. CSS Color Level 4 también acepta un valor alfa separado por barra: hsl(240 60% 50% / 0.8). El modelo HSL utilizado por este generador coincide exactamente con la especificación CSS, por lo que puedes pegar los valores de matiz, saturación y luminosidad directamente en tus hojas de estilo.