Generador de paletas de colores
Paletas complementarias, análogas, triádicas, complementarias divididas y monocromáticas a partir de un solo color base, con los cálculos HSL resueltos para ti.
Cómo funciona
Este generador de paletas de colores toma un color base y produce al instante cinco variaciones de paleta basadas en la teoría del color: complementaria, análoga, triádica, complementaria dividida y monocromática, para que explores combinaciones armónicas sin hacer los cálculos HSL a mano.
- Define un color base
Escribe un código hexadecimal, usa el selector de muestra o haz clic en Color aleatorio.
- Genera las paletas
Aparecen cinco tipos de armonía, cada uno como una fila de cinco muestras.
- Copia lo que necesites
Haz clic en cualquier muestra para obtener su valor hexadecimal o copia todo como variables CSS.
Los cinco tipos de armonía
Cada paleta se construye convirtiendo el color base a HSL (tono, saturación, luminosidad) y desplazando el tono una cantidad fija alrededor del círculo cromático:
- Complementaria: el tono directamente opuesto al base, a 180 grados, para máximo contraste.
- Análoga: tonos vecinos al base, a 15 y 30 grados a cada lado, para una apariencia tranquila y cohesiva.
- Triádica: tres tonos separados por 120 grados, una combinación vibrante y equilibrada.
- Complementaria dividida: los dos tonos adyacentes al complementario, a 150 y 210 grados, casi el mismo contraste con menos tensión.
- Monocromática: el mismo tono en cinco niveles diferentes de luminosidad, siempre una opción segura y cohesiva.
Uso de una paleta en CSS
Copia los valores hexadecimales y defínelos como propiedades personalizadas; luego haz referencia a ellos en toda la hoja de estilos:
--color-primary: #14b8a6; --color-accent: #b84e14;
HSL no es perceptualmente uniforme
Estas paletas se calculan puramente con matemáticas HSL y no consideran la uniformidad perceptual, como sí lo hacen espacios de color como OKLCH o CIELAB. Dos colores con la misma luminosidad HSL pueden verse notablemente diferentes en brillo, así que verifica las relaciones de contraste con una herramienta dedicada de accesibilidad antes de finalizar una paleta para interfaz de usuario.
Preguntas frecuentes
¿Cómo genero una paleta de colores a partir de un solo color hexadecimal?
Ingresa tu código hexadecimal en el campo Color base, por ejemplo #14b8a6, y haz clic en Generar paletas. La herramienta lo convierte a HSL y luego calcula cinco tipos de armonía: complementaria, análoga, triádica, complementaria dividida y monocromática, cada una como una fila de cinco muestras. Haz clic en cualquier muestra para copiar su valor hexadecimal al portapapeles.
¿Cuál es la diferencia entre las paletas de colores complementarias y complementarias divididas?
Una paleta complementaria combina tu tono base con el color directamente opuesto en el círculo cromático, a 180 grados, para lograr el máximo contraste. Una paleta complementaria dividida usa los dos tonos adyacentes a ese punto opuesto, a 150 y 210 grados, produciendo un contraste igualmente vibrante pero ligeramente más suave que resulta más fácil de equilibrar en el diseño de interfaces.
¿Cómo uso una paleta generada en CSS?
Copia los valores hexadecimales de las muestras y defínelos como propiedades personalizadas de CSS, por ejemplo --color-primary: #14b8a6; --color-accent: #b84e14;. Úsalos en toda tu hoja de estilos con var(--color-primary). El botón Copiar las 5 paletas copia todas las muestras de cada tipo de armonía a la vez, listas para pegar en un bloque :root.
¿Puedo comenzar con un color aleatorio para inspirarme en la paleta?
Sí. Haz clic en el botón Color aleatorio para generar un valor hexadecimal al azar y calcular inmediatamente las cinco paletas a partir de él. Esto es útil para explorar opciones de marca cuando aún no tienes un color inicial en mente.
¿Cuál es una limitación de la generación de paletas en el navegador?
Los cálculos de la paleta se realizan puramente con matemáticas HSL y no consideran la uniformidad perceptual, como sí lo hacen los espacios de color OKLCH o CIELAB. Los colores con igual luminosidad HSL pueden verse diferentes en brillo, así que verifica siempre las proporciones de contraste con una herramienta dedicada de accesibilidad antes de finalizar una paleta de interfaz.