Cómo usar el generador de paletas de colores
Este generador de paletas de colores gratuito convierte un único color de partida en un esquema completo y armónico usando las matemáticas clásicas de la teoría del color. Elige un color base con la rueda, el deslizador de tono o escribiendo un código hex y, después, selecciona una regla de armonía para ver al instante un conjunto de colores que combina. Cada muestra puede copiarse al portapapeles con un solo clic, lista para pegarla directamente en CSS, Tailwind, Figma o cualquier herramienta de diseño.
- Elige un color base — arrastra el punto en la rueda de color, mueve el deslizador de tono, escribe un valor hex de seis dígitos o usa el selector de color nativo de la barra superior.
- Selecciona una regla de armonía — abre el desplegable «Armonía de color» y elige la relación que quieras (complementaria, análoga, triádica y más).
- Copia tus colores — pasa el cursor sobre una muestra de la tira de la paleta para ver su código hex y haz clic para copiarlo.
- Comprueba la accesibilidad — usa el verificador de contraste WCAG integrado más arriba para confirmar que los colores de tu texto y de tu fondo son legibles.
- Explora variaciones — revisa la cuadrícula «Todas las paletas de armonía» para comparar todas las reglas de tu color base, o parte de una de las paletas seleccionadas.
Las siete reglas de armonía del color
Las armonías del color describen cómo se relacionan los tonos entre sí en la rueda de color. Cada regla genera un ambiente y un nivel de contraste distintos:
- Complementaria — dos tonos directamente opuestos entre sí (a 180°). Máximo contraste y energía; ideal para llamadas a la acción.
- Análoga — tonos vecinos (a unos 30°). Tranquila, cohesionada y de aspecto natural.
- Triádica — tres tonos repartidos de forma uniforme a 120°. Vibrante pero equilibrada.
- Complementaria dividida — un color base más los dos tonos que flanquean su complemento. Fuerte contraste con menos tensión que la complementaria pura.
- Tetrádica — cuatro tonos que forman un rectángulo en la rueda. Rica y variada; funciona mejor con un color dominante.
- Cuadrada — cuatro tonos repartidos de forma uniforme a 90°. Atrevida y equilibrada, con igual peso visual.
- Monocromática — un único tono con distintos niveles de luminosidad y saturación. Elegante, limpia y fácil de aplicar.
Comprobar el contraste del color para la accesibilidad
Una paleta bonita sigue necesitando ser legible. Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen los ratios mínimos de contraste entre el texto y su fondo: 4.5:1 para el texto de cuerpo normal y 3:1 para el texto grande para cumplir el nivel AA, y 7:1 para el nivel AAA, más estricto. El verificador de contraste de esta página calcula el ratio exacto entre dos colores cualesquiera y muestra si superan el nivel AA o AAA, para que puedas ajustar tu paleta antes de publicarla.
Preguntas frecuentes
¿El generador de paletas de colores es gratis?
Sí. La herramienta es completamente gratuita tanto para proyectos personales como comerciales, y no requiere registro.
¿Qué formatos de color admite?
Puedes introducir y copiar colores como códigos hex, y cada color generado se calcula a partir de sus valores HSL y RGB subyacentes.
¿Qué regla de armonía debería usar?
Usa la complementaria o la complementaria dividida para acentos de gran impacto, la análoga o la monocromática para interfaces tranquilas y cohesionadas, y la triádica o la cuadrada cuando necesites un esquema más rico y multicolor.