Generador de Esquemas de Color
Usar Generador de Esquemas de Color
La herramienta funciona directamente en esta página, sin registro ni instalación.
Sobre esta herramienta
Genera esquemas de color completos desde un color base con 7 reglas de armonía. Vista previa UI en vivo, cambio claro/oscuro, exportación a lista HEX, Tailwind o variables CSS.
- 100% gratis y sin límites de uso
- Sin registro ni inicio de sesión
- Funciona directamente en tu navegador
- Rápido y respetuoso con la privacidad
Documentación
El Generador de Esquemas de Color es una herramienta profesional de paletas para diseñadores, desarrolladores frontend y gestores de producto. Basada en el motor de rueda cromática iro.js y algoritmos de armonía HSL, genera esquemas completos a partir de un sólo color base utilizando 7 reglas clásicas de armonía: complementario, análogo, triádico, complementario dividido, tetrádico, monocromático y cuadrado. Una vista previa en tiempo real de componentes UI te permite evaluar cómo funciona tu paleta en una interfaz realista antes de escribir código.
La herramienta integra todo el flujo — elegir color, explorar armonías, previsualizar en una maqueta UI y exportar — en una sola interfaz unificada. El panel izquierdo aloja una rueda de color interactiva con entrada HEX. El panel central muestra paletas para cada regla. El panel derecho renderiza una vista previa UI en vivo (cabecera, botones, tarjetas, insignias, campo de entrada) con alternancia claro/oscuro. Exporta tu esquema final como lista HEX, configuración de Tailwind o propiedades CSS personalizadas en un clic.
Funciones principales
- Rueda de color interactiva iro.js con entrada HEX y generación aleatoria.
- 7 reglas de armonía: complementario, análogo, triádico, complementario dividido, tetrádico, monocromático, cuadrado.
- Visualización HEX individual por muestra con copia en un clic.
- Vista previa en tiempo real de componentes UI (cabecera / botones / tarjetas / insignias / campo), con alternancia claro/oscuro.
- 3 formatos de exportación: lista HEX, configuración Tailwind, variables CSS.
Recomendaciones de uso
- Comienza con el color principal de tu marca, luego recorre las reglas para comparar direcciones estilísticas.
- Alterna entre modo claro y oscuro para verificar contraste y legibilidad.
- Usa la función de exportación para aplicar la paleta final directamente en Tailwind o variables CSS.
- Pulsa Aleatorio para obtener inspiración rápida y luego ajusta el color base.
Notas técnicas
Todos los cálculos de paleta se ejecutan en el navegador usando transformaciones en el espacio de color HSL. Los colores se generan según las fórmulas de teoría del color: rotación de tono de 180° para complementario, ±120° para triádico, +150°/+210° para complementario dividido, +60°/+180°/+240° para tetrádico, +90°/+180°/+270° para cuadrado.
Última verificación: 2026-07-22 Código fuente: jaames/iro.js
Preguntas frecuentes
¿Es gratis?
Sí, gratis, sin registro, sin límites.
¿Qué reglas?
7: complementario, análogo, triádico, complementario dividido, tetrádico, monocromático, cuadrado.
¿Vista previa?
Sí, el panel derecho muestra vista previa UI (cabecera, botones, tarjetas, insignias, campo) con cambio claro/oscuro.
¿Cómo exportar?
3 formatos: lista HEX, configuración Tailwind, variables CSS. Clic para copiar.
¿Se suben datos?
No, todos los cálculos se ejecutan localmente en el navegador.
Más de Diseño
Todas las herramientas de DiseñoSelector Pantone
Selecciona colores y encuentra la referencia Pantone más cercana con salida HEX/RGB y copia rápida.
Estudio de Rueda de Color
Un selector de color basado en iro.js con rueda de color, salidas HEX/RGB/HSL/HSV, copia y paleta.
Pantone + CMYK + RGB para Impresión
Herramienta de paleta de impresión con 150+ muestras Pantone, 2-5 colores, coincidencia Pantone automática, cálculo CMYK en tiempo real y vista previa en papel estucado.
Generador Online de Arte de Degradado
Herramienta online inspirada en Art of the Gradient con degradados radiales por capas, mezcla, generacion aleatoria y copia CSS.
Generador de Diagrama de Cuerdas en Línea - Gratis
Lee relaciones por pares con un diagrama de cuerdas circular: los nodos rodean el círculo, la longitud del arco muestra el flujo total de cada nodo y el ancho y color de las cintas codifican la fuerza del vínculo. Pensado para migración, comercio, llamadas o citas; tres temas y exportación PNG / SVG.
Gráfico de Burbujas Circular Elegante por Fecha
Proyecta un año de eventos sobre un anillo de fechas concéntrico (meses en el círculo exterior y días alineados hacia dentro), de modo que cada evento flote como una burbuja degradada sobre su casilla del calendario. Paleta refinada de baja saturación, fondos claro / oscuro y exportación PNG / SVG.
Rosa de Nightingale No. 1 con Doble Degradado
Una rosa de Nightingale cuyos pétalos se despliegan en anillo simétrico, cada uno pintado con un degradado bicolor en vez de un color plano. Un año opcional se sitúa en el centro del gráfico, con fondos claro / oscuro y exportación PNG / SVG.
Generador de Diagrama de Sankey de Dos Columnas
Un diagrama de Sankey de dos columnas con acabado de cartel: los nodos izquierdos toman colores vivos, los derechos se sombrean en grises según su peso y cada banda de flujo muestra nombre, valor y proporción. Fondos claro / oscuro y exportación PNG / SVG.
Generador de Streamgraph - Creador de Gráfico Fluvial en Línea Gratis
Un streamgraph suave donde cada serie se apila simétricamente alrededor de una línea base que oscila con el tiempo, como cauces de río que se desplazan. Ideal para comparar cómo evolucionan juntas las partes de un todo; admite 2 a 16 series y 3 a 40 filas, con fondos claro / oscuro y exportación PNG / SVG.
Generador de Streamgraph Morandi - Gráfico de Río en Línea Gratis
Un streamgraph vestido con una paleta Morandi de azul a rosa: azul marino, gris azulado y rosa empolvado de baja saturación serenan el río superpuesto, finas costuras blancas separan cada capa y una leyenda superior empareja colores y series. Fondos claro / oscuro y exportación PNG / SVG.
Generador de Gráfico de Banda de Error - Gratis en Línea
Un gráfico de banda de error continua: bajo la línea principal no hay una sombra fija sino una banda que abraza la curva y cambia de ancho punto a punto, más ancha en los periodos volátiles y más fina en los estables, de modo que tendencia e incertidumbre comparten marco. Temas clásico, arcoíris y Morandi con fondos claro / oscuro y exportación PNG / SVG.
Generador de Gráfico de Burbujas con Tallos Curvos - Gratis en Línea
Un gráfico de burbujas con tallos curvos para cronologías: cada evento se sitúa en un eje de años, un tallo fino se curva desde la base y levanta una burbuja translúcida, y un eje Y logarítmico hace comparables valores de órdenes distintos (0,7 a 14) en un mismo marco, con tamaño de burbuja por raíz cuadrada. Cinco colores, fondos claro / oscuro y exportación PNG / SVG.
Generador de Diagrama de Zonificación de Burbujas Morph - Gratis en Línea
Un diagrama de zonificación de burbujas morph donde los nodos hijos se funden en su centro con superficies Metaball en lugar de flotar sueltos, las etiquetas siguen el arco exterior de cada nodo, líneas discontinuas conectan las burbujas y una paleta de cuatro verdes mantiene la calma. Pensado para estructuras de núcleo y miembros; incluye fondos claro / oscuro y exportación PNG / SVG.
Generador de Diagrama de Cuerdas en Abanico - Gratis en Línea
Un diagrama de cuerdas bipartito en forma de vieira: los arcos de grupo en la parte inferior se ponderan por el flujo total en vieiras desiguales, los nodos objetivo se abren en abanico arriba en arcos de ancho igual y los flujos se vuelven cintas finas que se curvan por curvas de Bézier que cruzan el centro, con etiquetas radiales sin enredarse. Pensado para datos bipartitos de pocos grupos hacia muchos objetivos.
Generador de Mapa de Calor Anotado - Gratis en Línea
Un mapa de calor de tabla que mantiene legibles los números: cada celda se colorea y muestra su valor, una escala divergente va de cero hacia los extremos positivos y negativos, y una barra de color graduada queda a la derecha. Temas clásico, arcoíris y Morandi, fondos claro / oscuro y exportación PNG / SVG.
Generador de Gráfico de Barras Agrupadas con Barras de Error - Gratis
Un gráfico de barras agrupadas con barras de error en el estilo académico sobrio: dos barras pastel lado a lado, barras de error negras en forma de I sobre ellas, un marco de ejes negro completo y etiquetas x rotadas 45 grados, una réplica fiel de figura de publicación. Pensado para comparar grupos experimentales, con fondos claro / oscuro y exportación PNG / SVG.
Generador de Ridgeline Plot - Creador de gráfico de crestas en línea gratis
Un ridgeline plot (joy plot) que apila varias distribuciones sobre su propia línea de base, con crestas suaves que nunca se solapan, nombre de serie a la izquierda de cada fila y leyenda de puntos debajo: ideal para comparar picos y dispersión de muchos grupos uno al lado del otro. Hasta 6 series y 400 filas, con fondos claro / oscuro y exportación PNG / SVG.
Generador de Barras Radiales Apiladas - Racetrack en línea gratis
Un gráfico de barras radiales apiladas (racetrack) donde cada fila de datos se vuelve un anillo concéntrico dividido en arcos de categorías apiladas cuya longitud es proporcional al total del anillo — vueltas de pista que etiquetan la composición de cada año. Un total en cursiva sigue cada extremo de arco y una leyenda vertical de marcadores cuadrados empareja los colores.
Generador de Diagrama de Sankey de Decisiones en Cuatro Etapas
Un Sankey de cuatro columnas que dibuja todo el embudo de una vez — origen, destino, decisión y desglose por origen. El flujo entra en capas desde la izquierda y la derecha lo descompone en barras de aceptado / rechazado por fuente, con insignia de año y tres paletas; ideal para revisiones, aprobaciones o admisiones.
Generador de Mapa de Calor Matricial en Escalera Triangular
Organiza una matriz de frecuencias (cuántos días pasa cada categoría en cada rango de valores) como un mapa de calor triangular escalonado. El color codifica la frecuencia; los rangos intercuartílicos, medianas y medias se dibujan solos. Tres paletas, fondos claro / oscuro y exportación PNG / SVG.
Generador de Diagrama de Cuerdas con Cintas de Degradado Circos
Un diagrama de cuerdas estilo Circos con campos cálido y frío: los nodos cálidos y fríos forman cada uno un arco continuo, y cada enlace se vuelve una cinta que degrada del tono de un extremo al del otro. Los flujos entre campos se leen de un vistazo; incluye modo oscuro y exportación PNG / SVG.
Generador de Diagrama de Cuerdas con Burbujas
Un diagrama de cuerdas con burbujas sitúa relaciones por pares alrededor de un gran círculo: cada nodo es una burbuja cuyo tamaño muestra la escala del nodo y cuyo relleno sigue un colormap menta-a-azul para la intensidad; los enlaces se curvan hacia el centro con grosor proporcional al flujo y los nombres irradian al exterior del anillo. Pensado para redes de colaboración, dependencias de suministro o flujos entre equipos cuando cada nodo lleva también métricas; legible hasta unos 30 nodos, con modo oscuro y exportación PNG / SVG.
Generador de Diagrama de Arco Radial
Un diagrama de flujo de arcos radiales para flujos país-hacia-organización: un arco superior segmentado por región con marcas de país a lo largo del arco, y curvas que bajan desde cada marca hasta nodos de organización dimensionados por el volumen total. Pensado para comercio global, ayuda o migraciones; incluye modo oscuro y exportación PNG / SVG.
Generador de Diagrama de Arco
Un diagrama de arcos clásico que aplana las co-ocurrencias sobre una línea de base: marcas de grupo coloreadas sobre la línea, etiquetas verticales con el color del grupo a la izquierda, y la fuerza de la relación se dibuja como semicírculos semitransparentes cuya altura y grosor varían con el peso, legible incluso con 400 relaciones. Incluye modo oscuro y exportación PNG / SVG.
Generador de Rosa con Colores Agrupados
Convierte las columnas de categoría, valor y grupo en una rosa de Nightingale donde cada pétalo toma el color de su grupo y los tonos fluyen de un segmento al siguiente. Incluye interruptor de etiquetas, fondos claro / oscuro y exportación PNG / SVG.
Pizarra Excalidraw en Línea
Pizarra online basada en Excalidraw para flujos, bocetos, wireframes y anotaciones, con edición local en navegador y exportacion a PNG, SVG y .excalidraw.