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.
Legge qualunque colore CSS — esadecimale, `rgb()`, `hsl()`, `lab()`, `oklch()`, una parola chiave — e lo mostra in tutte le notazioni insieme, su un fondo chiaro e su uno scuro. Dice anche quando un colore sta fuori dall’sRGB e qual è il più vicino raggiungibile.
Letto come HEX · la parola chiave più vicina è mediumslateblue (#7b68ee), ΔEok 0,050
Su chiaro
Testo di questo colore
Testo normale accanto, per confronto.
Su scuro
Testo di questo colore
Testo normale accanto, per confronto.
| HEX | #5b6cffQuello che copia qualunque strumento di design. | |
|---|---|---|
| RGB | rgb(91 108 255)I canali così come li riceve uno schermo. | |
| HSL | hsl(233.78 100% 67.84%)Un riordino di sRGB. La sua «luminosità» non è percettiva. | |
| HWB | hwb(233.78 35.69% 0%)La stessa ruota descritta come tonalità più bianco e nero. | |
| LAB | lab(50.851% 29.157 -76.75)CIE L*a*b*, riferito a D50 come lo definisce il CSS. | |
| LCH | lch(50.851% 82.102 290.8)L*a*b* in forma polare. Il croma arriva fino a circa 150. | |
| OKLAB | oklab(60.153% 0.0114 -0.2164)OKLab rettangolare. Qui la distanza euclidea è distanza percettiva. | |
| OKLCH | oklch(60.153% 0.2167 273.01)Quello che conviene mettere come predefinito — vedi la nota qui sotto. |
Perché conviene partire da OKLCH
- L’interpolazione resta satura. In sRGB una retta fra due colori passa vicino all’asse dei grigi, così una sfumatura dal blu al giallo diventa grigia a metà strada. In OKLCH il percorso gira intorno alla ruota delle tonalità e il punto di mezzo tiene il suo croma. È la differenza visibile più grande, ed è il motivo per cui il CSS si è dotato di
in oklch. - Luminosità vuol dire luminosità. Due colori HSL al
50%possono differire di un fattore tre nella luminosità percepita:hsl(60 100% 50%)è giallo ehsl(240 100% 50%)è blu notte. La L di OKLCH è tarata sulla percezione, quindi una scala da 50 a 950 costruita su di essa procede a passi uguali invece di crollare a metà. - La distanza vuol dire differenza. La distanza euclidea in OKLab è un ΔE utilizzabile, ed è quello che fa dare al «colore con nome più vicino» qui sopra risposte sensate là dove una distanza RGB chiama un viola profondo
darkslateblue.
Questo colore è L 60,2%, C 0,2167, H 273,0°. Tieni fermi L e H e muovi solo C: ottieni la scala di tinte; tieni fermi L e C e muovi H: ottieni una palette armonica. In HSL non funziona né l’una né l’altra cosa.
Come si usa
Incollare il colore
In qualunque notazione. La riga sotto il riquadro dice in quale è stato letto e indica la parola chiave CSS più vicina, con la distanza percettiva che le separa.
Guardare entrambi i fondi
Un colore è specificato solo a metà finché non si sa su quale superficie sta. Un blu medio che su bianco suona deciso, su un fondo scuro suona spento, e nessuna notazione lo mostra.
Copiare la notazione che serve
Ogni riga ha il proprio pulsante di copia e una frase che dice a che cosa serve quello spazio. La riga che corrisponde a quanto è stato inserito è evidenziata.
Domande frequenti
Perché la pagina continua a consigliare OKLCH?
Per tre ragioni verificabili. L’interpolazione resta satura, quindi un gradiente da blu a giallo non passa dal grigio a metà strada. La sua luminosità è percettiva, quindi una scala 50–950 ha passi regolari. E la distanza al suo interno è differenza percepita, che è ciò che rende sensate le risposte alla domanda «qual è il colore con nome più vicino».
Che cosa vuol dire che il mio colore sta «fuori dall’sRGB»?
Che il colore esatto richiede valori di canale sotto 0 o sopra 1, che uno schermo non sa produrre. Il campione mostra il colore più vicino che riesce a produrre, trovato tenendo luminosità e tonalità e abbassando il croma: si rinuncia così soltanto alla saturazione che lo schermo non ha mai avuto. Uno schermo P3 ne mostra una parte maggiore.
La lightness di HSL è la stessa cosa della luminosità OKLCH?
No, ed è qui la trappola. `hsl(60 100% 50%)` è un giallo brillante e `hsl(240 100% 50%)` è un blu notte: stessa «lightness», luminosità percepita diversa di un fattore tre. L’HSL è un riordino dell’sRGB, non uno spazio percettivo.
LAB e OKLAB sono la stessa cosa?
Sono spazi diversi con la stessa idea dietro. Il CIE L*a*b* risale al 1976 e ha non uniformità note, in particolare nei blu, dove al variare della luminosità compare uno slittamento di tonalità. L’OKLab è stato costruito su dati più recenti proprio per correggere quello, ed è per questo che è quello che conviene usare.
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.
Colore medio e dominante
Average & Dominant Colour
Restituisce un colore rappresentativo dell’immagine — medio, mediano o più frequente — come valore di colore.
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.
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.
Convertitore di colori per la stampa
Print Colour Converter
Converte da RGB a CMYK con la formula elementare (niente profili ICC né carta) e segnala i colori saturi che una quadricromia spegnerà.
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.
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.
Colore Tailwind più vicino
Nearest Tailwind Colour
Trova la voce della tavolozza Tailwind più vicina a un colore qualsiasi e mostra la distanza percepita.
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 tavolozze
Palette Generator
Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.