Generador de paletas de colores

Cómo usar el generador de paletas de colores

1. Elige un Color base con la muestra de color o escribe cualquier código en Código del color base (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), un nombre CSS…).
2. Selecciona una Armonía: Complementaria, Análoga, Triádica, Complementaria dividida, Tetrádica (rectángulo), Cuadrada o Monocromática.
3. Elige la Rueda de color: HSL (clásica) u OKLCH (perceptual). La paleta se actualiza en cuanto cambias cualquier opción; Generar paleta también la refresca.
4. Copia un solo color con el botón Copiar que hay bajo su muestra, o elige un formato en Exportar como (Lista HEX, Variables CSS, Variables SCSS, Array JSON o Colores de Tailwind) y usa Copiar o Descargar para la paleta completa.

Cada muestra enseña su código HEX en negro o en blanco, según cuál contraste mejor, y su posición respecto al color base (por ejemplo +120°).

Las armonías de color

Las armonías de color son ángulos fijos en la rueda de color. A partir de tu tono base, la herramienta gira el tono y mantiene la saturación y la luminosidad del color base.

• Complementaria (0°, 180°): el color opuesto. Contraste máximo, ideal para un botón de llamada a la acción frente al color principal de la marca.
• Análoga (−60°, −30°, 0°, +30°, +60°): los vecinos en la rueda. Combinaciones tranquilas y naturales que funcionan bien en fondos e ilustraciones.
• Triádica (0°, 120°, 240°): tres tonos a la misma distancia. Viva y equilibrada; normalmente un color domina y los otros dos sirven de acento.
• Complementaria dividida (0°, 150°, 210°): los dos vecinos del complementario. Contraste fuerte con menos tensión que un par complementario puro.
• Tetrádica (rectángulo) (0°, 60°, 180°, 240°): dos pares complementarios. Paletas ricas que necesitan un color dominante para mantener la coherencia.
• Cuadrada (0°, 90°, 180°, 270°): cuatro tonos a la misma distancia.
• Monocromática: un solo tono en cinco pasos de luminosidad, de oscuro a claro. Ideal para estados de interfaz, gráficos y diseños sobrios.

¿Rueda HSL u OKLCH?

La rueda HSL (clásica) es la tradicional que usan la mayoría de las herramientas de diseño y los tutoriales. Su inconveniente es que ángulos iguales no se ven igual de luminosos: el amarillo a 60° parece mucho más claro que el azul a 240° con la misma luminosidad HSL.

La rueda OKLCH (perceptual) gira el tono en el modelo de color Oklab, diseñado para que la luminosidad se perciba de forma uniforme. Las paletas creadas con ella tienen colores de peso visual similar, lo que ayuda a conseguir un contraste accesible. Algunos colores girados pueden quedar fuera de lo que una pantalla puede mostrar; en ese caso, la herramienta reduce un poco su croma para que se puedan visualizar.

Cómo usar la paleta exportada

Variables CSS genera un bloque :root con --color-1, --color-2… que puedes pegar en una hoja de estilos. Variables SCSS da líneas $color-1: …;, Array JSON ofrece una lista de cadenas HEX para scripts y Colores de Tailwind crea un objeto colors con claves 100, 200, 300… para pegarlo en tu configuración de Tailwind.

Antes de publicar, comprueba el contraste del texto: una armonía garantiza tonos agradables, no texto legible. Usa neutros oscuros o claros para el texto principal y reserva los colores saturados de la paleta para acentos, botones y gráficos.