Generador de círculo cromático

• Generación instantánea del círculo cromático: el generador renderiza un círculo completo de 360 tonos en tiempo real mientras ajustas la saturación y la luminosidad. Los cambios se aplican al instante sin retraso, sin idas y vueltas al servidor ni esperas.
• Procesamiento seguro y privado: tu círculo cromático se genera totalmente en tu navegador usando canvas HTML5. No se sube ningún dato a ningún servidor y tus elecciones de diseño nunca salen de tu dispositivo.
• Descarga como PNG o SVG: exporta tu círculo cromático como PNG de alta calidad para presentaciones y maquetas, o como SVG escalable para impresión, Figma, Illustrator y uso web, todo con un clic.
• 100 % gratis para siempre: usa este generador de círculo cromático sin registro, suscripciones, límites de uso ni muros de pago ocultos. Genera y descarga tantos círculos cromáticos como necesites, completamente gratis.

Un generador de círculo cromático es una herramienta que renderiza una visualización circular de todo el espectro de tonos, desde 0° (rojo) pasando por 120° (verde) hasta 240° (azul) y de vuelta a 360° (rojo), con una saturación y luminosidad configurables. El círculo cromático es la herramienta de referencia fundamental en la teoría del color, utilizada para identificar relaciones de armonía complementarias, análogas, triádicas y otras entre colores. Este generador de círculo cromático usa el modelo de color HSL (tono, saturación, luminosidad) para producir círculos matemáticamente precisos que se pueden descargar como PNG o SVG para usar en cualquier flujo de trabajo de diseño.

1. Ajusta saturación y luminosidad: usa los controles deslizantes para definir la saturación (intensidad del color, 0-100 %) y la luminosidad (brillo, 5-95 %) de todo el círculo. Los 360 tonos se renderizan con la misma saturación y luminosidad, por lo que el círculo muestra una familia de color coherente.
2. Elige un predefinido o el número de segmentos: selecciona un predefinido como Pastel, Apagado u Oscuro para ir a configuraciones comunes, o elige un número de segmentos (12, 24, 36, 72 o 360) para controlar cuántas porciones de color distintas aparecen en el círculo.
3. Descarga como PNG o SVG: haz clic en el botón PNG para descargar una imagen ráster para presentaciones y maquetas, o en SVG para descargar un archivo vectorial totalmente escalable para impresión, Figma, Illustrator y uso web. Ambos archivos se nombran con los valores de saturación y luminosidad para referencia fácil.

• Saturación (0-100 %): controla cuán vivos o grises aparecen los colores. Al 0 %, todos los tonos se vuelven grises. Al 100 %, los colores están totalmente saturados y vivos. Los círculos pastel suelen usar 40-70 % de saturación.
• Luminosidad (5-95 %): controla cuán claros u oscuros aparecen los colores. Al 50 %, los colores están en su punto medio más vivo. Valores más altos producen tonos más claros, tipo pastel; valores más bajos producen tonos más oscuros y ricos.
• Radio interior (donut): controla el tamaño del centro hueco. Al 0 %, el círculo es un disco completo. Valores más altos crean un anillo más fino, útil para diseños decorativos o de impresión.
• Segmentos: controla en cuántas porciones de color distintas se divide el círculo. 360 segmentos producen un círculo con degradado suave; 12 segmentos producen el clásico círculo de 12 colores usado en la educación tradicional de la teoría del color.

El generador de círculo cromático usa el modelo de color HSL, que es una representación cilíndrica del espacio de color RGB. HSL no es perceptualmente uniforme, lo que significa que dos colores con el mismo valor de luminosidad pueden no parecer igualmente brillantes al ojo humano (por ejemplo, el amarillo con L=50 % parece mucho más brillante que el azul con L=50 %). Para trabajos de color perceptualmente uniformes, considera usar los modelos de color OKLCH o LCH. La exportación PNG se renderiza a 400×400 píxeles; para impresión de mayor resolución, descarga el SVG y expórtalo a los DPI que necesites desde un editor vectorial.