¿Qué diferencia hay entre estas armonías?

Complementaria usa el color a 180° opuesto en la rueda - contraste máximo, útil para acentos en botones de acción. Análoga toma vecinas a 30° - bajo contraste, calmada, ideal para fondos. Triádica elige tres colores equidistantes (120°) - vibrante y equilibrado. Tetrádica añade un cuarto, dos pares de complementarios - rica pero más difícil de equilibrar. Monocromática varía claridad y saturación manteniendo el tono - la opción más cohesiva.

El hex se convierte a HSL y luego el tono se rota con offsets fijos según la armonía (180° para complementaria, ±30° para análoga, ±120° para triádica, +60/+180/+240 para tetrádica). La saturación y la claridad se mantienen constantes para que las variantes se sientan de la misma familia. La monocromática mantiene el tono y baja la claridad del 90 % al 20 %.

¿Por qué HSL en lugar de HSV o LCH?

HSL es el espacio que CSS conoce nativamente y casa con cómo la mayoría de diseñadores piensa los colores («una versión más oscura», «el opuesto»). LCH daría pasos perceptivamente más uniformes pero aún no está soportado en todas las herramientas. HSL es el término medio pragmático - suficientemente bueno para ideación, con salida estable entre herramientas.

¿Pasarán estas paletas el contraste WCAG?

No necesariamente - armonía y accesibilidad son preguntas distintas. Dos colores pueden ser armónicos y aún tener contraste insuficiente para texto. Tras elegir una paleta, mete cada par texto/fondo en el comprobador de contraste. El generador de tonos también ayuda: la mayoría de paletas necesitan variantes claras y oscuras para cuerpo de texto, no los tonos medios saturados que devuelve una armonía.

¿Empiezo desde mi color de marca o un tono al azar?

Color de marca, casi siempre. El generador te ayuda a encontrar colores de apoyo que funcionen con lo que ya tienes. Empezar desde un tono aleatorio da una paleta bonita sin ancla, lo que suele acabar en rediseñar la marca para encajar con la paleta y no al revés.

Generador de paleta de colores

Genera paletas complementarias, análogas, triádicas, tetrádicas y monocromáticas a partir de cualquier color base.

Color base

Complementaria

Análoga

Triádica

Tetrádica

Monocromática

Haz clic en una muestra para copiar su hex.

Un color base, cinco paletas. El generador aplica las armonías clásicas - complementaria, análoga, triádica, tetrádica, monocromática - sobre el hex que tecleas. Cada fila muestra la paleta completa, con la muestra base destacada y las demás derivadas rotando el tono en HSL. Haz clic en una muestra para copiar su hex.

Cómo usarla

Define el color base
Usa el selector o pega un hex. Las cinco filas de paleta se recalculan al instante.
Escanea las armonías
Cada fila es una armonía. Elige la que case con la energía del proyecto - calmada (análoga), atrevida (triádica), icónica (complementaria).
Copia lo que necesites
Haz clic en una muestra para copiar su hex. La muestra base está marcada.
Valida frente al texto
Pasa los colores elegidos por el comprobador de contraste para asegurarte de que cumplen WCAG con los tamaños de texto que usas.

¿Qué es?

Un generador de paleta toma un color base y produce varios esquemas armónicos rotando su tono por la rueda cromática. Las armonías tradicionales - complementaria, análoga, triádica, tetrádica, monocromática - vienen de la teoría del color del siglo XIX y siguen siendo la base de la mayoría de selectores de design systems (Material, Adobe, Tailwind, IBM Carbon). Dan un punto de partida que no chocará, incluso antes de ajustar brillo y saturación.

Cuándo usarla

Elegir colores de acento para una marca cuyo primario está fijo, diseñar una paleta de gráficos donde cada serie debe distinguirse, elegir colores de apoyo para una página de marketing desde un solo color de marca, esbozar moodboards antes de comprometerse a un design system completo, y aprender qué tonos se leen bien juntos jugando con un slider.

Errores comunes

Tratar la salida del generador como la paleta final - es un punto de partida. Habrá que ajustar la claridad por muestra para legibilidad, cambiar alguna muestra por una vecina que case con la marca y añadir grises neutros (las armonías no los producen). Elegir una paleta sin probarla contra los fondos reales en que vivirá - los colores se leen distinto sobre blanco, beige y superficies oscuras.

Preguntas frecuentes

¿Qué diferencia hay entre estas armonías?: Complementaria usa el color a 180° opuesto en la rueda - contraste máximo, útil para acentos en botones de acción. Análoga toma vecinas a 30° - bajo contraste, calmada, ideal para fondos. Triádica elige tres colores equidistantes (120°) - vibrante y equilibrado. Tetrádica añade un cuarto, dos pares de complementarios - rica pero más difícil de equilibrar. Monocromática varía claridad y saturación manteniendo el tono - la opción más cohesiva.
¿Cómo se calculan?: El hex se convierte a HSL y luego el tono se rota con offsets fijos según la armonía (180° para complementaria, ±30° para análoga, ±120° para triádica, +60/+180/+240 para tetrádica). La saturación y la claridad se mantienen constantes para que las variantes se sientan de la misma familia. La monocromática mantiene el tono y baja la claridad del 90 % al 20 %.
¿Por qué HSL en lugar de HSV o LCH?: HSL es el espacio que CSS conoce nativamente y casa con cómo la mayoría de diseñadores piensa los colores («una versión más oscura», «el opuesto»). LCH daría pasos perceptivamente más uniformes pero aún no está soportado en todas las herramientas. HSL es el término medio pragmático - suficientemente bueno para ideación, con salida estable entre herramientas.
¿Pasarán estas paletas el contraste WCAG?: No necesariamente - armonía y accesibilidad son preguntas distintas. Dos colores pueden ser armónicos y aún tener contraste insuficiente para texto. Tras elegir una paleta, mete cada par texto/fondo en el comprobador de contraste. El generador de tonos también ayuda: la mayoría de paletas necesitan variantes claras y oscuras para cuerpo de texto, no los tonos medios saturados que devuelve una armonía.
¿Empiezo desde mi color de marca o un tono al azar?: Color de marca, casi siempre. El generador te ayuda a encontrar colores de apoyo que funcionen con lo que ya tienes. Empezar desde un tono aleatorio da una paleta bonita sin ancla, lo que suele acabar en rediseñar la marca para encajar con la paleta y no al revés.