Generador de Colores Análogos
Elige un color base y un ángulo de separación. La herramienta muestra el color base con un tono vecino a cada lado en el ángulo elegido, el trío análogo clásico, y añade dos tonos exteriores al doble de ese ángulo para formar una paleta más amplia de cinco colores. Las paletas análogas están entre los esquemas clásicos más armoniosos porque sus tonos cercanos comparten un matiz dominante; por eso son habituales en la naturaleza (atardeceres, bosques) y en el diseño editorial.
Cómo construir una paleta análoga
-
1
Elige el color base
Pega un código hex, tripleta RGB o valor HSL. Los colores saturados de tono medio dan los conjuntos análogos más ricos.
-
2
Elige el ángulo de desplazamiento
30° es el espaciado análogo clásico. 15° da un conjunto más ajustado, casi monocromático; 45° comienza a acercarse al complementario dividido.
-
3
Ajusta la variación de claridad
Opcionalmente, varía la claridad entre los tres tonos para evitar una paleta plana. Aclarar los dos extremos crea una sensación más suave y editorial.
-
4
Exporta los colores
Copia hex, RGB o HSL. Útil para variables CSS, estilos de Figma o hojas de especificaciones de impresión.
Esquemas de color clásicos vs. análogos
| Esquema | Relación angular | Carácter |
|---|---|---|
| Monocromático | 0° (mismo tono, diferente luminosidad/saturación) | Calmado, unificado |
| Análogo | 30° a cada lado | Armonioso, natural |
| Complementario | 180° separados | Alto contraste, tensión |
| Complementario dividido | Base + 2 tonos flanqueando el complemento | Contraste con matiz |
| Triádico | 120° separados | Equilibrado, vibrante |
| Tetrádico | Dos pares complementarios | Rico, complejo |
Ejemplos de paletas análogas de la naturaleza
- Atardecer: amarillo → naranja → rojo-naranja (saltos de 30° en el lado cálido).
- Bosque: amarillo-verde → verde → azul-verde.
- Océano: azul-verde → azul → azul-violeta.
- Otoño: rojo-naranja → naranja → amarillo-naranja.
Diseñando con un conjunto análogo
- Elige un color como dominante (60% de la superficie), usa el segundo como acento (30%) y el tercero como detalle (10%): la regla “60-30-10”.
- Combina los colores análogos con un neutro (blanco, negro, gris cálido) para el texto y los elementos de la interfaz.
- Evita usar tres colores análogos con la misma saturación en bloques grandes: queda apagado. Varía la claridad o la saturación entre los extremos y la base.
Espacios de color y matemáticas de ángulo
El desplazamiento de 30° se calcula en el espacio de tono HSL o HSV, ambos tratan el tono como un ángulo (0-360°). Las operaciones en la rueda en RGB no funcionan, debes convertir a HSL, rotar el tono y convertir de nuevo. Eso es lo que hace la herramienta en segundo plano. Se proporciona salida en las tres notaciones porque CSS, herramientas de diseño y flujos de trabajo de impresión prefieren diferentes formatos.
Preguntas frecuentes
Monocromático utiliza un tono con diferentes claridad y saturación (marino, azul, azul cielo). Análogo utiliza tres tonos diferentes que son vecinos en la rueda (azul-verde, azul, azul-violeta). Análogo tiene más variedad visual.
Los colores análogos pueden tener mezclas de tinta CMYK superpuestas que reducen el contraste en impresión. Verifica versiones de prueba y considera aumentar el espaciado de 30° a 40° para trabajos de impresión.
Sí, pero mantén uno de los tres como color de marca dominante y relega los otros dos a papeles secundarios (distintivos, acentos). Usar los tres para las acciones principales de la interfaz genera confusión: los usuarios aprenden a asociar un solo color con la llamada a la acción principal.
Los tres colores centrales forman el esquema análogo clásico: el tono base y sus dos vecinos, separados por el ángulo elegido. Los dos colores exteriores están al doble de ese ángulo y son opciones adicionales para ampliar la paleta. Con la separación predeterminada de 30°, el trío queda en ±30° y la pareja exterior en ±60°.
Herramientas relacionadas
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Simplificador de Álgebra Booleana
Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.
Generador de colores aleatorios
Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.
Convertidor de binario a hex
Convierte entrada binaria en un valor hexadecimal simple en mayúsculas. Los caracteres no binarios se ignoran y los ceros iniciales no se conservan.