Selettore colori e generatore di palette

Ogni colore sullo schermo si può descrivere in tre modi diversi, e questo strumento li tiene tutti sincronizzati: l'HEX è la notazione abbreviata usata in CSS e negli strumenti di design, l'RGB indica quanta luce rossa, verde e blu si combina per ottenere il colore, e l'HSL — tonalità, saturazione, luminosità — lo descrive come lo pensa davvero una persona: che tinta è, quanto è vivace, quanto è chiara o scura. Trascina il campione colore nativo, digita un codice HEX o modifica direttamente un campo R/G/B o H/S/L, e tutti gli altri campi si aggiornano all'istante: puoi passare da un modo di ragionare sul colore all'altro senza fare i calcoli.

La ruota dei colori è la base di sei classiche regole di armonia, tutte generate automaticamente a partire dal colore di base che scegli. La complementare abbina un colore al suo opposto per il massimo contrasto; l'analoga sceglie i colori vicini sulla ruota per un aspetto calmo e coeso; la triadica e la tetradica distribuiscono tre o quattro colori in modo uniforme sulla ruota per una palette vivace ma equilibrata; la complementare divisa ammorbidisce la coppia complementare usando i due colori accanto all'opposto invece dell'opposto stesso; la monocromatica resta su un'unica tonalità variando solo la luminosità, spesso la scelta più sicura per un'interfaccia che ha bisogno di un unico colore di marca in più tonalità.

Non tutte le buone palette partono dalla teoria del colore: a volte vuoi solo vedere cosa viene fuori. Il generatore di palette casuali (premi la barra spaziatrice o clicca su Genera) produce cinque colori alla volta, con tonalità e luminosità calibrate per evitare risultati spenti o troppo pastello. Clicca sul lucchetto di un campione che vuoi tenere e genera di nuovo: cambiano solo i colori sbloccati, così costruisci la palette un po' alla volta, come negli strumenti tipo Coolors. Clicca su un campione per copiarne il codice HEX, oppure usa i pulsanti sotto la palette per copiare l'intero set come proprietà personalizzate CSS, variabili SCSS, frammento di config Tailwind o array JSON, oppure esporta un file di campioni Adobe .ase per Illustrator e Photoshop. Puoi anche estrarre una palette da qualsiasi immagine (elaborata in locale, mai caricata) e salvare nel browser le palette che ti piacciono per usarle più tardi.

Scegliere un bel colore non significa sceglierne uno utilizzabile: un testo con una luminosità troppo vicina a quella dello sfondo può risultare illeggibile, e le Web Content Accessibility Guidelines (WCAG) fissano soglie precise: un rapporto di contrasto di almeno 4,5:1 per il testo normale per superare il livello AA e 7:1 per il più severo livello AAA. Il controllo del contrasto calcola il rapporto esatto tra il colore scelto e il testo bianco e nero con la stessa formula di luminanza relativa definita dalle specifiche WCAG, e indica se ogni combinazione è superata, così puoi accorgerti di un pulsante o di un titolo con poco contrasto prima della pubblicazione e non dopo.