Generatore di tavolozza di colori

Il generatore di tavolozze di colori trasforma un singolo colore di base in un insieme coordinato di colori utilizzando le regole di armonia colore-ruota Scegli un colore di partenza e scegli una modalità - sfumature e tinte, monocromatica, complementare, analoga, triadica o tetradica - e lo strumento calcola una tavolozza bilanciata con il codice HEX per ogni campione.

Buone combinazioni di colori seguono le relazioni prevedibili sulla ruota dei colori HSL: i colori complementari si trovano uno di fronte all'altro, i colori analoghi si trovano uno accanto all'altro e i colori triadici sono equamente distanziati. Lavorare a mano significa giocoleria con angoli di tonalità e valori di leggerezza. Questo strumento esegue istantaneamente la matematica e mostra il risultato in modo da poter scegliere uno schema che funzioni.

Tutto funziona lato client Regola il colore di base, cambia modalità, fai clic su qualsiasi swatch per copiare il suo codice HEX o usa Copia CSS per esportare l'intera tavolozza come proprietà personalizzate CSS Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

Un esempio elaborato mostra come funziona come generatore di tavolozze di colori per matrimoni, con una condizione: non ci sono preset per matrimoni, quindi porti il colore Digita un verde salvia, #9caf88, come colore Base e pick Complementare I quattro campioni sono #c2ceb6, #9caf88, una lavanda polverosa #9b88af e una più profonda #755e8d, e Copy CSS li restituisce come --color-100 a - color-400 Per un risultato generatore di tavolozze di colori pastello, inizia da una base pallida come #a7c7e7: Analogous, Triadic e Tetradic mantengono la sua leggerezza e saturazione, quindi ogni campione rimane morbido.

Le modalità di armonia provengono da relazioni colore-ruota, ruotando la tonalità di quantità fisse attorno al cerchio: 180 gradi per complementare, 120 per triadico e piccoli passi per analogo Che la matematica è fatta in HSL, che è conveniente e non percettivamente uniforme La leggerezza HSL tratta il giallo e il blu allo stesso valore di altrettanto luce, e all'occhio non lo sono, motivo per cui un insieme triadico può sembrare bilanciato su carta e sbilanciato sullo schermo Controlla qualsiasi tavolozza che intendi utilizzare per il testo contro un controllore di contrasto piuttosto che fidarti dei numeri Le sfumature e le tinte sono prodotte spostando la leggerezza mantenendo la tonalità e la saturazione, il che mantiene una famiglia riconoscibilmente correlata ed è ciò che le rende utili come un insieme di variabili CSS.