Generador de paletas de

El generador de paleta de colores convierte un único color base en un conjunto coordinado de colores utilizando reglas de armonía de rueda de colores. Elija un color inicial y elija un modo (tonos y tintes, monocromático, complementario, análogo, triádico o tetrádico) y la herramienta calculará una paleta equilibrada con el código HEX para cada muestra.

Las buenas combinaciones de colores siguen relaciones predecibles en la rueda de color HSL: los colores complementarios se sientan uno frente al otro, los colores análogos se sientan uno al lado del otro y los colores triádicos están espaciados uniformemente. Hacer estos trabajos a mano significa hacer malabarismos con los ángulos de tono y los valores de ligereza. Esta herramienta hace las matemáticas al instante y muestra el resultado para que puedas elegir un esquema que funcione.

Todo se ejecuta en el lado del cliente. Ajuste el color base, cambie de modo, haga clic en cualquier muestra para copiar su código HEX o use Copiar CSS para exportar toda la paleta como propiedades personalizadas de CSS. Sin cuenta, sin cargas y sigue funcionando sin conexión una vez que la página se ha cargado.

Un ejemplo trabajado muestra cómo funciona como generador de paleta de colores para bodas, con una condición: no hay ajustes preestablecidos para bodas, por lo que traes el color. Escriba un verde salvia, #9caf88, como color base y elija Complementario. Las cuatro muestras son #c2ceb6, #9caf88, una lavanda polvorienta #9b88af y una más profunda #755e8d, y Copie CSS las devuelve como --color-100 a --color-400. Para obtener un resultado generador de paleta de colores pastel, comience desde una base pálida como #a7c7e7: Análogo, Triádico y Tétrada mantienen su ligereza y saturación, por lo que cada muestra permanece suave.

Los modos de armonía provienen de relaciones de rueda de colores, que giran el tono en cantidades fijas alrededor del círculo: 180 grados para complementario, 120 para triádico y pequeños pasos para análogos. Que las matemáticas se hacen en HSL, lo cual es conveniente y no perceptualmente uniforme. La ligereza HSL trata el amarillo y el azul con el mismo valor que la luz, y a simple vista no lo son, razón por la cual un conjunto triádico puede verse equilibrado en el papel y desequilibrado en la pantalla. Verifique cualquier paleta que planee usar para texto frente a un verificador de contraste en lugar de confiar en los números. Los tonos y tintes se producen moviendo la ligereza mientras se mantiene el tono y la saturación, lo que mantiene una familia reconociblemente relacionada y es lo que los hace útiles como un conjunto de variables CSS.