colorPaletteFinder si basa sui principi classici della teoria del colore combinati con i requisiti del design digitale moderno. Abbiamo progettato un'interfaccia fluida in cui non devi calcolare manualmente le tonalità né verificare i rapporti di contrasto: lo strumento fa il lavoro pesante al posto tuo.
1. La Ruota dei Colori Interattiva
Al cuore di colorPaletteFinder c'è la Ruota dei Colori HSL interattiva. A differenza dei normali selettori di colore rettangolari, la nostra ruota circolare riflette direttamente le dinamiche della teoria del colore.
- Tonalità (l'angolo): trascina il punto lungo il bordo esterno per cambiare la famiglia di colore fondamentale (rosso, blu, verde, ecc.).
- Saturazione (la distanza dal centro): trascina il punto verso il centro per rendere il colore grigiastro e smorzato, oppure verso il bordo per la massima vivacità.
- Luminosità: regolata dinamicamente per garantire che i colori armonici generati mantengano un peso visivo bilanciato.
Sposta il punto del colore principale e osserva tutti i colori armonici dipendenti adattarsi all'istante, in tempo reale, mantenendo le loro rigorose relazioni matematiche.
2. Scegliere una Regola di Armonia
A seconda dell'estetica che vuoi ottenere, puoi scegliere tra sette diverse regole di armonia dei colori, matematicamente collaudate:
Complementare
Colori situati diametralmente opposti sulla ruota dei colori (a 180° di distanza). Crea il massimo contrasto e un'energia di forte impatto.
Analogo
Colori che si trovano l'uno accanto all'altro sulla ruota (separati da 30°). Crea un design sereno, confortevole e dall'aspetto naturale.
Triadico
Tre colori equidistanti attorno alla ruota (a 120° di distanza). Offre un contrasto elevato mantenendo un equilibrio cromatico migliore rispetto agli schemi complementari.
Complementare a Spettro Diviso
Un colore di base più i due colori adiacenti al suo complementare. Offre il forte contrasto visivo dello schema complementare, ma con meno tensione.
Monocromatico
Variazioni di luminosità e saturazione di un'unica tonalità. Produce un aspetto coeso, pulito ed elegante.
3. Verifica del Contrasto WCAG
Creare una palette bellissima è solo metà del lavoro; i colori devono anche essere accessibili a tutti gli utenti. In particolare, il testo deve essere leggibile rispetto ai colori di sfondo.
colorPaletteFinder include una verifica del contrasto integrata in fondo allo strumento. Seleziona due colori generati qualsiasi (ad esempio uno sfondo e un colore del testo) e calcolerà il rapporto di contrasto.
- Standard AA: richiede un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande.
- Standard AAA: lo standard di riferimento per l'accessibilità, che richiede un rapporto di almeno 7:1 per il testo normale.
4. Copiare ed Esportare
Una volta generata la tua palette perfetta, integrarla nel progetto è semplicissimo.
Passa il mouse su qualsiasi campione di colore nella striscia della palette per rivelarne l'esatto codice ESADECIMALE. Cliccando sul campione, il codice ESADECIMALE a sei cifre viene copiato all'istante negli appunti (ad esempio #1A2B3C), pronto per essere incollato direttamente in CSS, configurazioni Tailwind, Figma o Adobe Creative Cloud.