Da HSL a HEX

Confronta HSL con HEX

CSS 3 introduce un altro modo per definire il colore usando HSL (dall'inglese. Hue, Saturation, Lightness). è un modello in cui il colore è determinato da tre parametri: tonalità, saturazione e luminosità. Diamo un'occhiata a ciascun parametro separatamente. Il vantaggio principale di HSL è la capacità di specificare le caratteristiche del colore indipendentemente l'una dall'altra. Questo apre enormi opportunità per te. Puoi facilmente rendere il colore più luminoso, più scuro, più saturo o desaturato. E pur mantenendo la sua ombra. O viceversa: cambia le tonalità senza modificarne la saturazione o la luminosità. Spesso, i preprocessori vengono utilizzati per utilizzare tali funzionalità, ma è possibile senza di essi. La funzione hsl () viene utilizzata per specificare i colori HSL. La funzione accetta tre valori, separati da una virgola: Tonalità, Saturazione e Luminosità. Modificando i valori di saturazione e luminosità, è possibile ottenere tonalità adiacenti per un colore particolare.

Nella maggior parte dei casi, è possibile riconoscere un colore da un codice esadecimale, tenendo conto solo delle prime cifre delle coppie. Nell'esempio seguente, è chiaro che il colore è mescolato con molto rosso, un po 'di blu e nessun verde. Capire il colore per codice esadecimale consente a un web designer di navigare nel codice della pagina più velocemente e, inoltre, puoi sempre impressionare colleghi o clienti dicendo Ah, che meravigliosa sfumatura di bordeaux. Puoi anche cambiare facilmente la luminosità, la tonalità o la saturazione di un colore modificando solo il suo codice esadecimale. Nel primo esempio di seguito, una delle coppie viene modificata con incrementi del 10%, mentre la luminosità del colore aumenta. Nel secondo esempio, la luminosità aumenta, ma la saturazione diminuisce. I valori RGB possono anche essere specificati utilizzando valori di colore esadecimali (HEX) nella forma: #RRGGBB, dove RR (rosso), GG (verde) e BB (blu) sono valori esadecimali da 00 a FF (lo stesso di decimale 0- 255). Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16.