La herramienta de rueda de color genera paletas de colores armoniosas a partir de un color base aplicando relaciones geométricas en la rueda cromática. Escribe un valor hexadecimal o arrastra la rueda para seleccionar el color base, elige uno de los 9 modos de combinación y obtendrás entre 2 y 5 colores con sus códigos hex y el nombre de Tailwind CSS más próximo, listos para copiar.
Cómo elegir el modo de combinación
La rueda de color coloca todos los tonos en un círculo; las distintas relaciones geométricas producen tensiones visuales diferentes.
Paletas de contraste
- Complementarios — dos colores en extremos opuestos; contraste máximo, ideal para botones CTA y elementos de foco
- Complementarios divididos — un color base más dos que flanquean su complementario; contraste sin la agresividad de los colores puramente complementarios
- Complementarios dobles divididos — dos pares de complementarios divididos, 5 colores en total; para composiciones complejas con múltiples elementos
Paletas de armonía
- Análogos — 3 a 5 tonos adyacentes; transiciones suaves y naturales, buenas para fondos y degradados
- Monocromáticos — mismo tono a distintos niveles de luminosidad y saturación; aspecto mínimo y unificado
- Compuesto — variante extendida de los complementarios con más capas de tono
Opciones multicolor equilibradas: Tríada (3 colores equidistantes), Tetrádico (rectángulo de 4 colores) y Cuadrado (4 colores equidistantes) funcionan para identidades de marca, infografías y visualización de datos donde se necesita variedad sin conflictos.
Equilibrio entre principal, secundario y acento
Las paletas multicolor funcionan mejor cuando los colores tienen roles definidos. Un enfoque habitual: el color principal ocupa el 60% de la superficie (fondos amplios, contenido principal), el secundario el 30% (tarjetas, barras laterales, elementos de segundo nivel) y el acento el 10% (botones, etiquetas, llamadas a la acción). Aplicar todos los colores con el mismo peso crea ruido visual. El color de acento suele ser el de mayor saturación de la paleta de contraste.
Ajustar la paleta generada antes de usarla
La rueda genera colores base teóricos. En la práctica necesitarás ajustar la luminosidad (aclarar los fondos, oscurecer el texto) y la saturación (mantener vívidos los colores de marca, reducir la saturación en áreas neutras). Trata la paleta generada como punto de partida, no como resultado final.
Copiar colores a herramientas de diseño
Haz clic en cualquier muestra de color de la paleta generada para copiar su código hex. Pégalo directamente en los selectores de color de Figma, Sketch o Adobe XD. Los nombres de Tailwind que se muestran (como rose-400, sky-600) te permiten encontrar el color incorporado más cercano en Tailwind si prefieres no usar valores arbitrarios en tu proyecto.