¿Qué es Rueda de colores?

Elige un color base y visualiza esquemas complementarios, análogos, triádicos, complementarios divididos, tetrádicos y monocromáticos en una rueda interactiva. Cada muestra incluye su contraste WCAG sobre blanco y negro, y puedes exportar la paleta como texto plano o como PNG para compartir.

La rueda funciona en HSL: arrastras un tono base o tecleas un HEX y las muestras coordinadas giran a su sitio en tiempo real. Los controles de saturación y luminosidad ajustan todo el esquema a la vez. Cada color generado se copia como HEX, RGB, HSL, CMYK u OKLCH con un clic, y la rueda marca cada punto de armonía con un círculo etiquetado para que veas la relación entre colores.

Cómo usar

1. Haz clic o arrastra sobre la rueda de color para elegir tu tono base, o introduce un valor HEX específico en el campo de entrada.
2. Elige un tipo de armonía (complementaria, análoga, triádica, complementaria dividida o tetrádica) para ver los colores coincidentes resaltados en la rueda.
3. Copia cualquier color generado como HEX, RGB, HSL, CMYK u OKLCH haciendo clic en la muestra. Exporta la paleta completa para usarla en tus herramientas de diseño.

Cuándo usar

• Elegir tres o cuatro colores de acento para un kit de marca una vez fijado el color primario.
• Seleccionar un color de botón opuesto al fondo para maximizar contraste.
• Construir una paleta UI donde los tonos relacionados deben sentirse calmados, no chocar.

Resultado

Un diseñador web elige #E87040 como color de marca, cambia a armonía triádica y obtiene tres colores de acento equilibrados para su página de aterrizaje — todo con un solo clic.

Preguntas frecuentes

¿Qué diferencia hay entre la armonía análoga y la triádica?

La análoga toma colores contiguos en la rueda (dentro de unos 30 grados) y resulta calmada y unificada. La triádica separa tres colores cada 120 grados: alto contraste, equilibrio y un aire enérgico para el diseño.

¿Cuándo conviene complementaria en lugar de complementaria dividida?

Complementaria usa dos tonos opuestos para máximo impacto, pero choca si ambos están a tope de saturación. La dividida empareja tu base con los dos vecinos del color opuesto: misma tensión visual, choque más suave, más fácil de equilibrar.

¿Por qué cambian los colores de la armonía al mover el control de luminosidad?

La rueda mantiene los desplazamientos de tono relativos pero aplica tu saturación y luminosidad a cada resultado. Así, los verdes análogos al 40% de luminosidad son todos tonos de bosque oscuro, no una mezcla de verde oscuro con verde neón.

¿Puedo obtener la paleta como variables CSS o formato de herramientas de diseño?

Pulsa cualquier muestra para copiar HEX, RGB, HSL, CMYK u OKLCH al portapapeles. Desde ahí va directo a un archivo CSS (--brand-primary: #E87040), al campo hex de Figma o a la configuración de colores de Tailwind, lo que estés usando.

¿La tetrádica es lo mismo que una armonía rectangular?

Sí. La tetrádica (también llamada rectangular) elige cuatro colores formando un rectángulo en la rueda: dos pares complementarios. Da una paleta más rica, pero necesitas un tono dominante o el diseño termina viéndose recargado.

Herramientas relacionadas