Generatore di tavolozze
Palette Generator
Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.
Prende un colore e ne ruota la tonalità secondo una regola di armonia, tenendo ferme luminosità e croma OKLCH, così una triade non torna indietro con un membro visibilmente più scuro degli altri. La stessa regola è disegnata sotto anche in HSL, che è il modo più rapido di vedere perché la cosa conti. Prima dell’esportazione verifica se due campioni collassano l’uno sull’altro sotto un deficit della visione dei colori e se ciascuno di essi può reggere del testo.
Colore di base
Qualunque notazione CSS. L’armonia tiene ferme la luminosità e il croma OKLCH di questo colore e ruota la tonalità.
Armonia
Vicine, a 30° per lato. Si legge come un’unica famiglia di colori; per la gerarchia serve una differenza di contrasto, perché le tonalità non la reggono.
OKLCH
#0094c3L 62,3 C 0,188 H 230
#3b82f6L 62,3 C 0,188 H 260
#886ceeL 62,3 C 0,188 H 290
La stessa regola in HSL, per confronto
#3be0f6L 83,3 C 0,132 H 209
#3b82f6L 62,3 C 0,188 H 260
#523bf6L 51,4 C 0,260 H 278
Le due strisce ruotano la tonalità degli stessi angoli. La riga OKLCH tiene costante la luminosità percepita: la sua ampiezza è 0,0000, mentre quella della riga HSL è 0,3191, perché la «luminosità» di HSL non è percettiva. Il giallo puro e il blu puro dichiarano entrambi 50% e distano più di 65 punti di L*. Questa differenza non è un artefatto di rendering; è una rampa di luminosità che nessuno ha chiesto, incorporata in ogni armonia HSL.
Ampiezza di luminosità
0,0000
Fuori da sRGB
1 su 3
1 campione non è riuscito a tenere il croma di base dentro sRGB e ne ha ceduto 0,064. I valori esadecimali sono le versioni rimappate; i valori oklch() nell’export sono quello che uno schermo a gamut ampio mostra davvero.
Regge davvero?
La coppia più vicina per ogni tipo di visione simulata, in ΔE OKLab
- Protanopia0,026— questi due si confondono
- Deuteranopia0,021— questi due si confondono
- Tritanopia0,012— questi due si confondono
- Acromatopsia0,013— questi due si confondono
Contrasto WCAG su bianco e su nero
- su bianco 3,49·su nero 6,02usabile per il testo su uno dei due
- su bianco 3,68·su nero 5,71usabile per il testo su uno dei due
- su bianco 3,87·su nero 5,43usabile per il testo su uno dei due
Una coppia che si confonde sotto una simulazione è una coppia che non può essere l’unica differenza fra due cose: aggiungi una forma, un’etichetta o uno scalino di luminosità. La verifica del contrasto dà il verdetto APCA completo per una coppia precisa.
Esporta
Le forme CSS e Tailwind emettono oklch() con l’esadecimale come commento: buttare via la precisione in fase di export annullerebbe il motivo stesso di calcolare in OKLCH, e un browser a cui arriva oklch() disegna il colore a gamut ampio dove può.
Ti serve una rampa intera da 50 a 950 a partire da uno di questi, invece di un insieme di tonalità? La scala di tinte e ombre ne costruisce una, ancorata a una curva di luminosità misurata.
Come si usa
Inserire il colore che si ha già
Di solito il colore del marchio, in qualunque notazione CSS. Tutto il resto è derivato dalla sua tonalità, dalla sua luminosità e dal suo croma, quindi è questa l’unica decisione che dà forma all’intero insieme.
Scegliere la regola, poi regolarne l’ampiezza
La complementare è una sola tonalità opposta; l’analoga sono le vicine; la triadica sono tre a 120°; la complementare divisa ammorbidisce una coppia complementare. Il cursore dell’ampiezza scala quegli scarti: 1 è la spaziatura da manuale, e sotto quel valore l’insieme si legge come una sola famiglia. La monocromatica e le sfumature chiedono invece un numero di passi, perché fanno variare la luminosità e non la tonalità.
Confrontare le due strisce
Sotto la riga OKLCH lo scarto di luminosità è vicino a zero per costruzione. La riga HSL ruota degli stessi angoli e il suo scarto non lo è, perché la lightness dell’HSL non è percettiva: il giallo puro e il blu puro dichiarano entrambi 50%. Se per questo particolare colore di base le due strisce sembrano uguali, lo sono, e va bene sceglierne una qualsiasi.
Leggere il pannello «reggerà?» prima di esportare
Riporta la coppia più ravvicinata sotto ciascun tipo di visione simulata, in ΔE OKLab, e il contrasto WCAG di ogni campione contro il bianco e contro il nero. Una coppia segnata come collassata non deve essere l’unica cosa che distingue due stati: va aggiunta una forma, un’etichetta o un salto di luminosità.
Esportare con il prefisso usato dal codice
Variabili CSS, un blocco `@theme` di Tailwind, SCSS, token JSON oppure un foglio di campioni SVG. Le forme CSS emettono `oklch()` con accanto l’esadecimale come commento.
Domande frequenti
Nell’esportazione l’esadecimale e l’oklch() sono colori diversi. Quale è giusto?
Entrambi, per schermi diversi. Quando tenere il croma di base porterebbe un campione fuori dall’sRGB, l’esadecimale è la versione riportata nel gamut — con il croma ceduto per rientrare — e il valore `oklch()` è il colore effettivamente calcolato, che uno schermo a gamut esteso mostrerà. Il pannello dice quanto croma ha perso ogni campione tagliato.
Una regola di armonia garantisce che la tavolozza sarà bella?
No. Queste sono angolazioni su una ruota delle tonalità, e la geometria non è il gusto. Quello che una regola dà è un insieme di partenza difendibile, con una ragione dietro ogni tonalità, e vale più di tre colori scelti uno alla volta. Il giudizio sulle proporzioni — quale sia la grande superficie e quale l’accento al 5% — qui non c’è affatto.
Posso incollare una tavolozza che ho già e farla verificare?
Non qui: questa pagina parte da un colore e ricava gli altri. Per una coppia specifica, la verifica del contrasto prende i due colori e dà il verdetto completo. Per una scala a partire da uno di questi campioni, la costruisce la scala di tinte e ombre.
Che cosa conta come «questi due collassano»?
Un ΔE OKLab sotto 0,06 dopo la simulazione, che è più o meno il punto in cui due riempimenti smettono di essere distinguibili a colpo d’occhio. La simulazione stessa segue l’approccio a matrici di tipo Brettel: è un modello dei deficit più comuni, non la misura di una persona in particolare, e non dice nulla sui tipi più rari né sulla perdita della vista acquisita.
Può ricevere da
Estrarre la tavolozza da un’immagine
Palette Extractor
Tira fuori da un’immagine una tavolozza di N colori e la esporta in esadecimale, come variabili CSS o come campionario ASE.
Simulatore di daltonismo
Colour Blindness Simulator
Ridisegna un’immagine come la vedrebbe chi ha protanopia, deuteranopia o tritanopia, oppure in scala di grigi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.
Generatore di gradienti CSS
CSS Gradient Builder
Costruisce gradienti lineari, radiali e conici trascinando i punti di arresto ed esporta il CSS in sRGB o in OKLCH.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Scala di tinte e ombre
Tint & Shade Scale
Genera da un colore solo una scala di luminosità da 50 a 950 con passi percettivamente regolari, pronta come insieme di token.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.
Estrattore di token CSS
CSS Token Extractor
Tira fuori da un foglio di stile colori, spaziature, raggi e caratteri e propone un insieme di proprietà personalizzate.
Estrarre la tavolozza da un’immagine
Palette Extractor
Tira fuori da un’immagine una tavolozza di N colori e la esporta in esadecimale, come variabili CSS o come campionario ASE.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.