Generador de esquema de color cuadrado

Introduzca un color hexadecimal y este generador conservará su saturación y luminosidad mientras crea el tono base y tres compañeros equilibrados. El resultado incluye valores hexadecimales, RGB y HSL reutilizables, listos para un sistema de diseño, una hoja de estilos, una ilustración o una exploración de marca. El cálculo es determinista: una misma entrada válida siempre devuelve la misma paleta ordenada, sin azar ni acceso a la red.

Cómo se construye una armonía cromática cuadrada

Una armonía cuadrada divide los 360 grados del círculo cromático en cuatro partes iguales. El color introducido ocupa el primer punto y el generador suma después 90, 180 y 270 grados a su tono. La saturación y la luminosidad no cambian, de modo que el tono es el único componente variable y la relación matemática de la paleta queda clara. Este método se diferencia de un esquema tetrádico rectangular, cuyos espacios se alternan en vez de ser iguales. Cada muestra devuelta incluye su desplazamiento de tono exacto, valores HSL normalizados, canales RGB y un código hexadecimal de seis dígitos en minúsculas. La rotación vuelve a comenzar correctamente después de 360 grados, por lo que un color base próximo al final del círculo se comporta como cualquier otro. En colores neutros como el gris, la saturación HSL es cero y el cambio de tono no produce colores visiblemente distintos; es una propiedad esperada del modelo. El orden comienza siempre con el color base normalizado y avanza por las otras tres rotaciones.

Cómo elegir y aplicar los cuatro colores

La separación uniforme aporta variedad, pero una buena jerarquía visual sigue dependiendo del papel asignado a cada color. Puede empezar usando el color base como tono dominante de marca, fondo o ilustración. Reserve un color rotado para el acento principal, otro para un acento secundario y el tono opuesto para elementos que requieran una separación fuerte. Como las cuatro muestras comparten saturación y luminosidad, inicialmente tienen un peso visual parecido. En una interfaz terminada conviene crear variantes más claras y oscuras después de asignar funciones, para que textos, bordes, rellenos y estados interactivos no compitan por igual. Compruebe siempre el contraste de las combinaciones de primer plano y fondo; una relación armónica no garantiza accesibilidad. El generador ofrece un punto de partida disciplinado, no exige ocupar el mismo espacio con cada tono. Una distribución práctica suele dedicar la mayor parte de la composición a un color, apoyar con uno o dos y emplear el último con moderación para destacar.

Uso de resultados deterministas en flujos de diseño

Un resultado determinista resulta esencial cuando la paleta forma parte de un proceso automatizado. Un hexadecimal base almacenado puede volver a generar los mismos cuatro valores durante una compilación, en un script de tokens de diseño o cuando un cliente modifica un tema. La entrada normalizada hace coherentes las abreviaturas y las combinaciones de mayúsculas, mientras que los arrays devueltos permiten copiar los cuatro códigos o examinar sus datos estructurados. Como el algoritmo utiliza conversiones HSL y desplazamientos fijos, no ordena los colores según criterios estéticos, no infiere estados de ánimo ni modifica muestras en secreto. Esa transparencia facilita revisar y reproducir el resultado. Guarde el color base junto a la paleta para que futuros colaboradores conozcan su origen. Si después ajusta la saturación o la luminosidad para una función concreta, conserve el conjunto cuadrado original como referencia y documente las variantes por separado. Las solicitudes a la API cuestan $0.002; la versión del navegador permite explorar manualmente sin enviar el color a otro lugar.