Generatore di palette di colori
Parti da un colore e ottieni palette abbinate, ogni campione con i suoi valori HEX e RGB e il suo contrasto con il bianco e con il nero.
Funziona interamente nel tuo browser
Palette casuale
Cinque colori dal generatore di numeri casuali del browser. Blocca quelli che vuoi tenere, poi estrai di nuovo. Premi la barra spaziatrice per estrarre quando nessun campo di testo ha il focus.
Esporta
Le palette sono costruite nello spazio colore OKLCH e mostrate come HEX sRGB, quindi i colori troppo vividi per uno schermo vengono attenuati nella cromaticità. I valori di contrasto usano la formula WCAG 2, che misura solo il contrasto di luminosità.
Come creare una palette di colori
- Scegli un colore di base con il selettore, oppure digita un valore come
#1636a3of60nel campo HEX. - Leggi le palette di armonie sotto. Ogni campione mostra il suo HEX, il suo RGB e se il testo nero o bianco supera WCAG AA o AAA su di esso.
- Scegli una palette sotto Esporta e copiala o scaricala come proprietà personalizzate CSS, array JSON o elenco semplice. Usa Palette casuale e i pulsanti di blocco per esplorare.
Come sono costruite le armonie
Un'armonia di colori è un insieme di colori le cui tonalità si trovano ad angoli fissi sulla ruota dei colori. I colori analoghi sono vicini, a 30 gradi di distanza. Un colore complementare è a 180 gradi, una coppia complementare divisa si trova a 150 e 210 gradi, una triade è distanziata di 120 gradi e una tetrade usa quattro tonalità distanziate di 90 gradi. La palette monocromatica mantiene la tonalità e fa variare la luminosità da tinte chiare a sfumature scure.
La ruota usata qui è OKLCH, la forma cilindrica dello spazio OKLab di Björn Ottosson. La conversione va da sRGB alla luce lineare, poi attraverso le matrici OKLab, e torna indietro con un controllo della gamma. Se un colore ruotato cade fuori da ciò che sRGB può mostrare, la sua cromaticità viene ridotta a piccoli passi finché rientra, così luminosità e tonalità scelte vengono mantenute.
Il contrasto è indicato per ogni campione sia contro il bianco sia contro il nero, perché la prima domanda su un colore di una palette di solito è quale testo ci possa stare sopra. Il rapporto e la dicitura AA o AAA sono sempre scritti per esteso, così l'informazione non dipende dal vedere i colori.
Suggerimenti
- Ti serve lo stesso colore in HSL, CMYK o come nome CSS? Usa il Convertitore di colori e contrasto.
- Trasforma due colori della palette in uno sfondo con il Generatore di gradienti CSS.
- Vuoi un colore preso da una foto anziché da una ruota? Prova il Selettore colore da immagine.
Domande frequenti
Perché OKLCH invece di HSL?
In HSL, un giallo e un blu con lo stesso valore di luminosità appaiono molto diversi in luminosità. OKLCH è costruito in modo che passi di luminosità uguali sembrino uguali, il che mantiene i campioni di una palette di peso uniforme. La tonalità è l'angolo usato per le armonie, quindi un colore complementare si trova a 180 gradi dal tuo colore di base in OKLCH, non in HSL.
Cosa succede quando un colore non può essere mostrato su uno schermo?
Ruotare una tonalità mantenendo luminosità e cromaticità a volte finisce fuori dall'intervallo sRGB che uno schermo normale può mostrare. Lo strumento allora riduce la cromaticità, mantenendo luminosità e tonalità, finché il colore rientra. Per questo un campione ruotato può apparire un po' meno vivido del colore di base.
Cosa significano le etichette AA e AAA?
Indicano il rapporto di contrasto WCAG 2 del testo bianco o nero su quel campione. Un rapporto di 4,5 o più è AA per il testo normale, 7 o più è AAA, e da 3 a 4,5 supera AA solo per il testo grande. Un campione che non supera né il nero né il bianco è un cattivo sfondo per il testo.
Come funziona la palette casuale?
Cinque colori vengono estratti con il generatore di numeri casuali sicuro del browser: tonalità distribuite sulla ruota, con luminosità e cromaticità casuali in un intervallo che evita quasi-nero e quasi-bianco. Blocca un campione per tenerlo, poi premi Palette casuale o la barra spaziatrice per sostituire gli altri.
Quale formato di esportazione devo usare?
Le proprietà personalizzate CSS si incollano direttamente nel blocco :root di un foglio di stile. L'array JSON si adatta ai design token o agli script, e l'elenco semplice è un HEX per riga per gli strumenti che accettano colori incollati. Tutti e tre usano i valori HEX visualizzati.
Gestisce l'HEX abbreviato e le lettere maiuscole?
Sì. #abc, abc, #AABBCC e aabbcc vengono tutti letti. I valori con una coppia alfa, come quelli a otto cifre, non sono accettati qui; usa prima il Convertitore di colori e contrasto per eliminare l'alfa.