Scegli un colore e questo strumento ti mostra il suo complementare e una scala di tinte e ombre. Sono punti di partenza utili. Sono anche prodotti da aritmetica su HSL, e HSL mente sulla luminosità in un modo che plasma ogni palette costruita su di esso — vale la pena capirlo prima di fidarti dell'output.
La lightness di HSL non è la luminosità
Ecco la misura che spiega parecchia frustrazione. Prendi sei colori completamente saturi, tutti a lightness HSL 50%: giallo, verde, ciano, blu, rosso, magenta. HSL sostiene che siano ugualmente luminosi. Non lo sono, e non ci va nemmeno vicino.
Misurato come luce realmente emessa, il giallo a hsl(60, 100%, 50%) raggiunge il 92,8% del bianco. Il blu a hsl(240, 100%, 50%) raggiunge il 7,2%. Il giallo emette tredici volte la luce del blu mentre entrambi sono etichettati con la stessa luminosità. Il verde sta al 71,5%, il rosso al 21,3%.
Il motivo è che HSL è stato progettato negli anni Settanta per essere facile da calcolare, non per modellare la vista. Il suo asse di lightness è il punto medio tra il canale RGB più grande e il più piccolo: un pezzo di aritmetica che non ha niente a che vedere con come risponde l'occhio. Il verde contribuisce circa il 71% della luminosità percepita e il blu circa il 7%, e HSL non ne sa nulla.
La conseguenza pratica: una palette costruita tenendo la lightness costante e ruotando la tinta sembrerà selvaggiamente irregolare. Il tuo giallo abbaglierà e il tuo blu sparirà. Ogni designer che ha costruito un set di colori di stato in HSL e si è chiesto perché il giallo abbia bisogno di un caso speciale ha incontrato questo.
Cos'è davvero il complementare
Il colore complementare qui è la tinta ruotata di 180 gradi: il blu dà giallo, il rosso dà ciano. È la definizione standard ed è un punto di partenza genuinamente utile, perché le tinte opposte creano davvero il massimo contrasto di tinta possibile.
Due avvertenze. La prima è che è un punto di partenza, non una risposta: due tinte opposte completamente sature messe una contro l'altra raramente sono un design, sono un segnale d'allarme. La mossa abituale è prendere il complementare e poi desaturarlo e schiarirlo pesantemente, così funziona come accento invece che come concorrente.
La seconda è che "complementare" in senso di ruota dei colori non dice niente sul contrasto in senso di accessibilità. Blu e giallo sono complementari e per caso arrivano a 8:1, che va bene per il testo. Rosso e ciano sono complementari anche loro, e atterrano molto più in basso. Se stai scegliendo una coppia per testo su sfondo, la ruota non è lo strumento: lo è un rapporto di contrasto.
Tinte e ombre, e perché i passi sembrano sbagliati
Una tinta è il colore mescolato verso il bianco, un'ombra verso il nero. Generare una scala facendo passi uguali sul valore di lightness è l'approccio ovvio, e produce una scala i cui passi non sembrano uguali: l'estremità chiara si accalca e quella scura si allarga, o il contrario, a seconda della tinta.
È lo stesso problema di sopra: passi uguali in HSL non sono passi uguali nella percezione. La cosa conta se stai costruendo un design system, dove una scala di colori deve funzionare come una scala — dove "il 500 è due passi più scuro del 300" deve significare la stessa cosa per il tuo blu e per il tuo giallo.
La risposta moderna è Oklch, uno spazio colore costruito apposta perché il suo asse di luminosità sia percettivamente uniforme. Aggiungere dieci punti di luminosità in Oklch sembra un passo della stessa ampiezza indipendentemente dalla tinta. Il CSS ora lo supporta direttamente, e se stai generando una scala via codice invece che a occhio, vale il pomeriggio che serve a impararlo.
Domande frequenti
Viene inviato qualcosa a un server?
No. Questo strumento è marcato "client": la matematica dei colori gira nella scheda del tuo browser e non viene trasmesso niente.
Perché il mio giallo sembra molto più luminoso del mio blu a parità di lightness?
Perché lo è davvero: misurato, tredici volte più luminoso. La lightness di HSL è una formula sui canali RGB, non una misura di luce. L'occhio è molto più sensibile al verde e al giallo che al blu, e HSL non lo modella affatto. Se ti servono colori che sembrino ugualmente luminosi, ti serve uno spazio percettivo come Oklch, oppure devi aggiustare a occhio e accettare che i numeri non saranno ordinati.
Posso usare il complementare come colore del testo sulla base?
Controlla il rapporto di contrasto prima di farlo. Complementare significa opposto sulla ruota, il che riguarda la tinta e non dice niente sul fatto che uno sia leggibile sull'altro. Alcune coppie complementari superano le WCAG comodamente e altre falliscono di brutto. È un controllo da due secondi ed è l'unica cosa che risponde alla domanda.
Come faccio a prendere un colore dal mio schermo?
Non con questo strumento: una pagina web non può leggere pixel fuori da sé stessa, che è un confine di sicurezza e non una funzionalità mancante. Chrome ed Edge espongono un'API EyeDropper che qualche sito usa, ma la risposta affidabile è il tuo sistema operativo: macOS ha Misuratore Colore Digitale, Windows ha il selettore in PowerToys, e ogni strumento di design ne ha uno integrato.
Perché lo stesso hex sembra diverso sul mio telefono?
Un codice hex non dice niente su quale spazio colore intenda; il web presume sRGB. Gli schermi moderni dei telefoni possono mostrare una gamma più ampia, e come trattino un colore sRGB non marcato varia: alcuni lo mappano fedelmente, altri lo stirano verso la loro gamma più larga rendendolo più saturo di quanto intendessi. Aggiungi luminosità, luce ambientale e qualsiasi filtro notturno, e che numeri identici raggiungano occhi diversi è il caso normale, non l'eccezione.