Generador de esquema triádico

Un generador de esquema de color triádico convierte un color hex en una paleta de tres colores recorriendo la rueda cromática en pasos iguales de ciento veinte grados. Introduzca un código base como #3498db o la forma corta #abc; la herramienta convierte el color a matiz, saturación y luminosidad, mantiene fijos saturación y luminosidad, y produce tres miembros con desplazamientos de matiz de cero, más ciento veinte y más doscientos cuarenta grados. Recibe valores hex normalizados, canales RGB, desgloses HSL, un arreglo de esquema y líneas de rotación paso a paso que puede asertar en pruebas o volcar en un archivo de tokens de diseño. Los equipos de marca que equilibran acentos secundarios audaces, los desarrolladores front-end que andamian tokens de tema y los estudiantes que aprenden armonía del color necesitan ese mismo mapa triádico determinista sin abrir una suite de diseño completa.

Qué es un esquema triádico y por qué funciona el espaciado de 120°

La armonía triádica sitúa tres matices en los vértices de un triángulo equilátero sobre el círculo de matiz: cada color queda a ciento veinte grados del siguiente, de modo que ningún matiz domina mientras los tres permanecen equidistantes. Los sistemas de diseño usan esta estructura cuando una marca necesita un color primario de identidad más dos acentos de apoyo que aún se sientan relacionados y no elegidos al azar.

El generador implementa el modelo clásico en el espacio HSL: convierte el hex de entrada en enteros de rojo, verde y azul, mapea esos canales a matiz en grados y saturación y luminosidad como fracciones, y emite tres colores que comparten la saturación y luminosidad originales mientras sus matices se sitúan en el ángulo base, base más ciento veinte y base más doscientos cuarenta, cada uno envuelto en el intervalo semiabierto de cero a trescientos sesenta.

Mantener fijos saturación y luminosidad es deliberado—la intención de búsqueda triádica es la rotación equilibrada del matiz, no inventar nuevas rampas de valor o croma—así un azul pastel produce compañeros pastel y un rojo saturado produce compañeros saturados. Cuando la entrada es casi gris, la saturación ronda cero y los tres hex pueden parecer similares; es física correcta, no un error, porque los colores acromáticos no tienen matiz significativo que rotar.

Los docentes suelen emparejar esta herramienta con lecciones complementarias (ciento ochenta grados) y análogas (pasos adyacentes pequeños) para que los alumnos vean cómo el espaciado en la rueda cambia la tensión visual. La respuesta siempre lista los roles primary, secondary y tertiary para que la documentación y las propiedades personalizadas CSS puedan mapearse limpiamente a --color-primary, --color-secondary y --color-tertiary sin reordenar a mano.

Consejos prácticos, límites y búsquedas relacionadas

Parta del color de marca o de IU en el que ya confía en lugar de un punto arbitrario de la rueda; el miembro primary es el matiz de entrada en desplazamiento cero tras el viaje de ida y vuelta HSL, que puede diferir en una unidad de canal del hex original porque RGB a HSL a RGB se cuantiza a canales de ocho bits. No pase formas con alfa como #RRGGBBAA—este aterrizaje apunta solo a hex clásico opaco para que las longitudes inválidas fallen de inmediato.

Los colores CSS con nombre como tomato quedan fuera de alcance; resuélvalos primero a hex o use una tabla de colores con nombre. Esta página se dirige a quienes buscan un generador de esquema de color triádico, una paleta de ciento veinte grados o una herramienta gratuita de rueda de tres colores en línea; no es un convertidor multi-espacio completo, ni un extractor de paleta desde imagen, ni un solucionador solo complementario o tetrádico de cuatro colores.

Prefiera esta capacidad cuando necesite exactamente tres matices equidistantes desde un token hex; si solo necesita dividir canales sin armonía, use un convertidor hex a RGB.