Círculo cromático interactivo

¿Qué es el círculo cromático?

El círculo cromático es la disposición circular de los colores que usamos para razonar sobre el color: qué tono se opone a cuál, cuáles quedan cerca y cuáles forman grupos equilibrados. En esta versión, el tono avanza alrededor del borde de la rueda —rojo, naranja, amarillo, verde, cian, azul, magenta y vuelta al rojo— mientras la saturación crece desde el centro (gris) hacia el exterior (color puro). Elegir un punto en la rueda equivale a elegir un color por tono y saturación de una sola vez.

Esta herramienta convierte ese círculo cromático en algo que se puede tocar: fija un color base, aplica una regla de armonía y obtén al instante los colores que la acompañan, con su código hex y su valor HSL listos para copiar. Sirve tanto para arrancar una paleta desde cero como para revisar si los colores que ya tienes en un diseño encajan según alguna de las combinaciones clásicas.

Cómo usarlo

1. Elige un color base. Haz clic o arrastra sobre la rueda, o escribe un código hex en el campo si ya tienes uno en mente; la rueda salta a ese punto.
2. Selecciona un esquema de color. Cambia entre complementario, análogo, triádico, complementario dividido, cuadrado o monocromático y observa cómo se mueven los marcadores pequeños sobre la rueda.
3. Ajusta la luminosidad y copia. Usa el deslizador de luminosidad para aclarar u oscurecer toda la paleta a la vez, y haz clic en cualquier tarjeta —o en “Copiar todo”— para llevarte los códigos.

Los esquemas de color, uno a uno

El complementario toma dos colores opuestos en la rueda y es la opción con más contraste: funciona bien para llamadas a la acción, botones o cualquier elemento que necesite destacar sobre el resto. El análogo usa tonos vecinos y produce paletas tranquilas y cohesionadas, típicas de fondos, ilustraciones o interfaces donde no quieres que ningún color grite más que otro. El triádico reparte tres colores a distancias iguales alrededor de la rueda: da viveza sin caer en el caos porque mantiene un equilibrio geométrico entre los tonos.

El complementario dividido suaviza el contraste del complementario puro sustituyendo el opuesto exacto por sus dos vecinos, así que conserva la tensión visual sin resultar tan agresivo. El cuadrado añade un cuarto color y reparte los cuatro a intervalos iguales, lo que da paletas ricas pero exige más disciplina: conviene tratar uno como dominante y los otros tres como acentos, no darles el mismo peso. El monocromático se queda en un solo tono y varía solo la luminosidad, ideal cuando quieres un sistema de color coherente —una app, una marca— sin la complejidad de combinar varios tonos distintos.

Limitaciones honestas

Esta rueda es RGB/HSL, la que describe la luz de una pantalla, y en ella el complementario del rojo es el cian. La rueda tradicional del pintor es RYB —mezcla de pigmento— y ahí el complementario del rojo es el verde; ninguna de las dos está mal, simplemente responden preguntas distintas, y las paletas que salen de aquí están pensadas para pantalla, no para mezclar pintura. Además, la luminosidad de HSL no equivale a brillo percibido: hsl(60, 100%, 50%) (amarillo) se ve mucho más luminoso a simple vista que hsl(240, 100%, 50%) (azul) aunque el número de luminosidad sea idéntico, así que una armonía correcta en teoría puede verse desequilibrada en pantalla. Por eso existen espacios de color como OKLCH, pensados para que la luminosidad se corresponda mejor con lo que el ojo percibe.

Las reglas de armonía son puntos de partida, no garantías: una tríada perfecta sobre el papel puede fallar en una maqueta real, donde la proporción entre colores pesa tanto como el tono elegido —la práctica habitual es dejar que un color domine y usar el resto como acentos. Tampoco hay que olvidar que la rueda no comprueba contraste ni accesibilidad: un par complementario puede quedar precioso como muestra y ser ilegible como texto sobre fondo, así que conviene revisar el contraste por separado antes de dar una combinación por buena. Y en el esquema monocromático, los pasos de luminosidad más altos y más bajos tienden a aplanarse hacia el blanco y el negro, con lo que la paleta pierde color justo en los extremos. Todos los valores que ves son sRGB, y el resultado final depende de la calibración de tu pantalla.

¿Por qué es gratis?

Esta rueda de colores funciona por completo en tu navegador: no hace falta crear una cuenta, no añade marcas de agua ni límites de uso, y no existe una versión de pago con más funciones escondidas detrás. Es una herramienta más de FreeToGenerate.com, pensada para resolver la tarea y listo.