Generador de paleta de colors de franc

Com funciona

L'eina està construïda amb zero biblioteques externes — tota la matemàtica de color s'executa en JavaScript escrit a mà directament al teu navegador. Converteix el color triat entre hexadecimal i HSL, i després aplica regles clàssiques d'harmonia de la teoria del color (complementari, triàdic, anàleg, etc.) mitjançant aritmètica sobre la roda de tons per produir cada paleta.

1. 1
   Conversió d'hexadecimal a HSL

   Quan tries un color, l'eina analitza la cadena hexadecimal en components RGB i els converteix a HSL (to, saturació, lluminositat). El to és la posició de 0 a 360 graus a la roda de colors; tota la matemàtica de la paleta passa en aquest espai.
2. 2
   Aritmètica de to per a l'harmonia

   Cada tipus de paleta és una fórmula de rotació fixa aplicada al to base. El complementari suma 180°, el triàdic suma 120° i 240°, el tetràdic avança de 90 en 90°, el complementari dividit utilitza 150° i 210°. El monocromàtic i els tons mantenen el to i la saturació constants mentre avancen la lluminositat amunt i avall.
3. 3
   Sortida d'HSL a hexadecimal

   Cada triplet HSL calculat es torna a convertir a un color hexadecimal utilitzant la fórmula estàndard de croma. Els resultats es mostren com una franja de color amb etiquetes de contrast automàtic (text fosc en mostres clares, text clar en fosques) determinat per un llindar simple de luminància.
4. 4
   Exporta en el teu format preferit

   La paleta es pot copiar com a cadenes hexadecimals o exportar com a fitxer de variables CSS (:root { --color-1: … }), variables SCSS, un fragment de configuració de Tailwind, un objecte JSON, o una franja de color PNG. L'exportació PNG utilitza l'API Canvas del navegador (toDataURL) per dibuixar cada mostra amb la seva etiqueta hexadecimal — tot es genera localment en fer clic.

Eines relacionades