Convertitore di colori

Quale formato di colore usare

• HEX (#2563eb): il più compatto, quello che esportano Figma e quasi tutti gli strumenti di design. Con 8 cifre include la trasparenza: #2563eb80 è lo stesso blu al 50%.
• RGB (rgb(37, 99, 235)): gli stessi tre canali in decimale. Utile quando ti serve la trasparenza a parte, in rgba().
• HSL (hsl(221, 83%, 53%)): tonalità, saturazione e luminosità. È facile da ritoccare a mano: per una tonalità più scura dello stesso colore, abbassa solo l’ultimo valore.
• OKLCH (oklch(54.6% 0.215 262.9)): luminosità, croma e tonalità in uno spazio percettivamente uniforme. Due colori con la stessa L sembrano chiari allo stesso modo, cosa che in HSL non succede.

Perché OKLCH va di moda

In HSL, un giallo e un blu con luminosità 50% non si somigliano affatto in chiarezza. In OKLCH sì, e questo permette di creare scale di colore coerenti (100, 200… 900) cambiando solo la L, e sfumature senza la zona grigia al centro. Inoltre può descrivere colori più vivaci di sRGB per gli schermi P3; quando succede, lo strumento ti avvisa e mostra in HEX e RGB il colore rappresentabile più vicino. Tutti i browser attuali capiscono oklch().

I colori negli URL di ximg.es

Il generatore di placeholder riceve il colore di sfondo e quello del testo nell’URL stesso, in esadecimale senza cancelletto: /600x300/2563eb/fff. Accetta 3, 4, 6 e 8 cifre (quelli a 4 e 8 includono la trasparenza in PNG, WebP e AVIF), le scorciatoie a 1 e 2 cifre (c è cccccc) e i 148 nomi CSS: /600x300/tomato/white. L’ultima riga del convertitore ti dà l’URL con il testo bianco o nero, quello con il contrasto migliore.

Nomi dei colori CSS

Il CSS ha 148 nomi, da aliceblue a yellowgreen. Se il colore non ha un nome proprio, lo strumento cerca quello più simile alla vista (la distanza si misura in OKLab, non in RGB), comodo per dare un nome alle variabili o per descrivere un colore in una conversazione.