Círculo cromático interactivo para armonías de color
El círculo cromático es una rueda HSL interactiva que convierte un solo color base en un esquema de color listo para usar. Haz clic o arrastra por el círculo para elegir un tono y mira cómo aparecen al instante combinaciones complementarias, análogas, triádicas y otras armonías.
Está pensado para diseñadores, artistas, desarrolladores y cualquiera que elija colores para un sitio web, una marca, una ilustración o un ambiente. En lugar de adivinar qué colores combinan, ves las relaciones trazadas sobre el círculo con puntos indicadores y líneas de conexión, y copias cualquier valor HEX con un solo clic.
Cómo usar el círculo cromático
Elige un color base
Haz clic o arrastra en cualquier punto del círculo para fijar tu tono. También puedes usar el selector de Color base o escribir un código HEX (por ejemplo #6366F1) para un punto de partida exacto.
Ajusta la saturación y la luminosidad
Usa el control de Saturación para regular la intensidad (0% gris a 100% vívido) y el de Luminosidad para el brillo (0% negro, 50% color puro, 100% blanco). El círculo y las muestras se actualizan en vivo.
Elige una armonía de color
Selecciona uno de los seis modos de Armonía de color. El círculo dibuja puntos indicadores y líneas de conexión que muestran cómo se relacionan los colores, y una breve nota explica cuándo conviene usar ese esquema.
Copia tus colores
Cada muestra indica su etiqueta, su código HEX y su ángulo respecto al color base. Haz clic en una muestra para copiar su valor HEX al portapapeles, listo para pegar en cualquier herramienta de diseño o en CSS.
Funciones
Círculo cromático interactivo
Una rueda fluida en canvas donde haces clic o arrastras para elegir cualquier tono de 0° a 360°, con la vista previa central que muestra tu color actual.
Seis modos de armonía de color
Genera esquemas complementarios, análogos, triádicos, complementarios divididos, tetrádicos y monocromáticos que usan los diseñadores profesionales.
Indicadores visuales de armonía
Los puntos indicadores y las líneas de conexión sobre el círculo muestran con exactitud cómo se relacionan los colores de cada armonía con tu color base.
Control de saturación y luminosidad
Afina cualquier color con controles en vivo cuyos degradados se actualizan para mostrar todo el rango de tu tono actual.
Selector de color y entrada HEX
Fija un color base preciso con el selector de color nativo o escribiendo directamente un código HEX de seis dígitos.
Copia con un clic
Haz clic en cualquier muestra para copiar su valor HEX al portapapeles al instante; cada muestra está etiquetada e indica su ángulo respecto al color base.
Teoría del color integrada
Cada modo de armonía incluye una breve descripción de lo que hace y cuándo usarlo, así aprendes teoría del color mientras trabajas.
Responsivo y modo oscuro
El táctil y el ratón funcionan en computadora, tablet y teléfono, con un cómodo tema oscuro integrado.
Preguntas frecuentes
¿Cómo uso el círculo cromático para armar un esquema?
Elige un color base haciendo clic en el círculo o escribiendo un código HEX, luego selecciona un modo de Armonía de color como Complementarios o Triádicos. Los colores correspondientes aparecen como muestras con sus valores HEX, listos para copiar en tu diseño.
¿Qué son los colores complementarios?
Los colores complementarios se ubican justo en lados opuestos del círculo, a 180° de distancia. Esa combinación crea el mayor contraste, lo que la hace ideal cuando quieres que ciertos elementos resalten y capten la atención.
¿Qué son los colores análogos y los triádicos?
Los colores análogos son tres vecinos en el círculo (a unos ±30° del base), que dan esquemas tranquilos y cohesivos. Los triádicos son tres tonos separados 120°, que ofrecen una paleta vibrante pero equilibrada; suele funcionar mejor con un color dominante.
¿Cuál es la diferencia entre complementarios y análogos?
Los complementarios usan colores opuestos para lograr alto contraste y energía, mientras que los análogos usan colores vecinos para una sensación suave y armónica. Elige complementarios cuando busques fuerza y énfasis; elige análogos para diseños relajados y unificados.
¿Qué significan los grados que aparecen en cada muestra?
Los grados son el ángulo de ese color en el círculo respecto a tu color base. Un color complementario muestra 180° (justo enfrente), y los triádicos muestran 120° y 240°: la separación igual que define cada armonía.
¿Puedo obtener valores HEX para usar en mi software de diseño?
Sí. Cada muestra muestra un código HEX, y al hacer clic copias el valor al portapapeles. El HEX funciona en Photoshop, Figma, Sketch, CSS y casi cualquier herramienta de diseño. Para impresión, convierte estos colores de pantalla a CMYK en tu software.
¿Por qué cambian los colores cuando muevo los controles?
El círculo usa el modelo HSL, así que la Saturación controla qué tan vívido o gris se ve un color y la Luminosidad controla qué tan claro u oscuro es. Todo el círculo y cada muestra se redibujan con tu configuración actual, para que veas exactamente cómo lucirá la armonía, no colores puros teóricos.
Aún no hay comentarios. ¡Sé el primero en comentar!