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.
Sceglie un colore su un campo OKLCH: la luminosità sale lungo il campo, il croma lo attraversa e la tonalità è la striscia sotto. Quella disposizione è tutto il punto: nel familiare quadrato HSV «lo stesso colore, un po’ meno saturo» è uno spostamento in diagonale che nessuno riesce a trovare, mentre qui è uno spostamento orizzontale. Prende anche un colore dallo schermo dove il browser lo consente, e da un’immagine trascinata nella pagina, il che funziona ovunque.
Scegli
La luminosità sale lungo il campo, il croma lo attraversa e la tonalità è la striscia qui sotto. Il tratteggio vuol dire che il colore esiste ma sRGB non riesce a mostrarlo.
Questo colore
L
62,3
C
0,1880
H
259,8°
Notazioni
- hex
#3b82f6 - rgb
rgb(59 130 246) - hsl
hsl(217.22 91.22% 59.8%) - hwb
hwb(217.22 23.14% 3.53%) - lab
lab(54.619% 8.763 -65.791) - lch
lch(54.619% 66.372 277.59) - oklab
oklab(62.308% -0.0332 -0.1851) - oklch
oklch(62.308% 0.188 259.81) - named
#3b82f6
Preleva da un’immagine
Trascina qui uno screenshot o una foto
Clicca in un punto qualsiasi per prendere quel pixel.
Resta tutto in questa scheda. Serve quando l’API EyeDropper non c’è, cioè nella maggior parte dei browser.
Convertire tra notazioni in blocco? Il convertitore di colori fa questo. Costruire una palette intera partendo da questo colore? Il generatore di palette lo fa ruotare in OKLCH.
Come si usa
Impostare prima la tonalità, poi muoversi sul campo
La striscia sceglie la tonalità; il campo mostra poi tutte le luminosità e tutti i croma disponibili a quella tonalità. Farlo nell’ordine inverso significa rincorrere il colore, perché cambiare tonalità ridisegna tutto il campo.
Oppure prenderne uno dallo schermo
«Preleva dallo schermo» apre il contagocce del browser e legge qualunque pixel del desktop, comprese le altre applicazioni. Esiste soltanto nei browser basati su Chromium; altrove il pulsante lo dice invece di fallire in silenzio.
Oppure trascinare una schermata e farci clic sopra
Il pannello dell’immagine in fondo accetta qualunque figura e restituisce il pixel esatto su cui si fa clic. È la strada che funziona in ogni browser, ed è quella da usare quando il contagocce manca.
Copiare nella notazione che vuole il codice
Tutte le notazioni sono elencate insieme, ognuna con il proprio pulsante di copia. Si prende l’esadecimale per un foglio di stile che deve funzionare ovunque, e il valore `oklch()` quando il colore conta più della compatibilità: l’esadecimale è un’approssimazione riportata nel gamut ogni volta che il campione sta fuori dall’sRGB.
Salvare quelli che si stanno confrontando
«Salva questo» tiene fino a dodici campioni in una fila su cui si può tornare con un clic. Vivono soltanto nella pagina: un ricaricamento li cancella.
Domande frequenti
Il pulsante del contagocce sullo schermo non fa niente di utile. Perché?
Perché ha bisogno dell’API EyeDropper, che hanno rilasciato soltanto i browser basati su Chromium — Chrome, Edge, Arc, Brave. Firefox e Safari no, e non esiste alcun polyfill, perché leggere pixel arbitrari dello schermo è un privilegio che la pagina non può concedersi da sola. Basta caricare una schermata nel pannello dell’immagine: dà la stessa risposta.
Perché una parte grande del campo è tratteggiata?
Perché quelle combinazioni di luminosità e croma esistono in OKLCH ma l’sRGB non sa mostrarle a quella tonalità. È una proprietà reale dello spazio, non un difetto, quindi la regione è tratteggiata invece che dipinta con il colore più vicino disponibile: una parete di colore pieno lì sarebbe una bugia su ciò che lo schermo sa fare. «Riporta nell’sRGB» abbassa il croma finché il colore non ci sta, tenendo ferme luminosità e tonalità.
Il contagocce conserva la precisione a gamut esteso?
No. L’API restituisce una stringa esadecimale sRGB, quindi un colore Display P3 sullo schermo è già stato convertito quando arriva a questa pagina. Per un colore P3 di cui si conosce il valore, conviene digitare la forma `oklch()` o `color(display-p3 ...)` nel convertitore di colori.
L’immagine che trascino viene caricata da qualche parte?
No. Viene decodificata in un canvas in questa scheda e letta lì, pixel per pixel. Non esce niente dal browser, e chiudere la scheda la elimina.
Può ricevere da
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.
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.
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 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.
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.
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.
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.
Calcolatrice delle proporzioni
Aspect Ratio Calculator
Ricava il lato mancante per una proporzione data ed elenca i formati standard che le corrispondono.