Chi di noi non sa l’importanza che i colori hanno in qualunque cosa, sia che si tratti di un layout di una pagina web, di un’immagine, di un video o di qualunque altro elemento grafico. In sostanza, il colore è unaEsperienza soggettiva che nasce dalla interazione tra la luce, l’occhio e il cervello. Aggiungere colori alla pagina web dà una nuova vita al layout e agli elementi grafici. Nessuno ama visitare pagine web con solo colori bianco, nero e grigio. I colori rendono gli elementi più reali e attrattivi per l’occhio umano.
Non solo teoricamente, la psicologia entra in gioco anche quando usiamo i colori sulle pagine web. È stato dimostrato scientificamente che una certa gamma di colori attiva specifiche emozioni nel cervello umano, come i colori autunnali come arancione e giallo che rappresentano la gioia o la felicità, il colore rosso per le feste, e il blu considerato come calmo e affidabile. Inoltre, avrete notato che molte aziende alimentari spesso usano rosso e giallo sulle loro pagine web, le aziende farmaceutiche tendono a usare verde nei loro siti, le aziende fitness a volte usano arancione, e così via.
Crea una interfaccia utente include diverse cose, tra cui layout di pagina web in CSS, elementi, posizionamento CSS, navigazione, testo e così via. Un’altra cosa che influenza l’interfaccia utente è il colore HSL in CSS. I colori CSS hanno anche importanza nell’interfaccia utente, che è uno dei fattori che la maggior parte delle persone evita.
Non solo sviluppatori di siti web, ma anche fotografi e videoeditor professionali usano questo gioco di colori molto. Creare un’immagine perfetta è il loro lavoro, e per questo usano molto il contrasto colore. Quindi, scegliere il set ideale di colori per gli elementi è davvero importante.
CSS ha molte proprietà, tra cui background-color, color, linear-gradient e così via, che consentono agli utenti di aggiungere o riempirsi del colore desiderato ai Collegamenti. Tutte queste proprietà aiutano anche gli utenti a rendere il testo colorato o persino aggiungere qualche bel motivo colore ai testi e ai Collegamenti.
tutte le proprietà del colore di CSS richiedono un metodo di colore per definire il colore e poi riempirselo nell’elemento specificato. CSS ha alcuni metodi di colore integrati, come HSL, RGB, HSLA, Esadecimale e così via. comunque, questi metodi di colore richiedono una raccolta di valori interi in unità differenti per recuperare il colore.
anche se molti blog e tutorial si concentrano sugli metodi RGB e Esadecimale, c’è bisogno di coprire gli aspetti integrali del metodo HSL. In questo blog, scopriremo in profondità il ruolo dei colori HSL in CSS, coprendo tutte le sfumature intorno al metodo HSL e come differisce dagli altri metodi.
prima di saltare direttamente al metodo HSL, fate un salto alla discussione degli altri due metodi di colore di CSS – RGB e Esadecimale, e perché abbiamo i colori HSL in CSS.
Differenza tra RGB e Hex
Il metodo RGB funziona considerando che ogni colore è una miscela di rosso, verde e blu. questo metodo richiede tre valori decimali assegnati all’interno dell’intervallo 0-255 nella funzione rgb(). questi valori specificano il livello di intensità per ognuno dei tre colori, rappresentando il valore 0 come livello minimo di intensità e 255 come livello massimo di intensità.
Ecco alcuni esempi di combinazioni di colore RGB a diverse intensità:
Prendiamo un esempio per capire il funzionamento del metodo RGB.
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}Output:
Ora passiamo al metodo Hexadecimale. Anche questo funziona sulla base del concetto che ogni colore è una miscela di rosso, verde e blu. Il metodo Hexadecimale richiede tre numeri Hex a due cifre e inizia con il segno ‘#’. Questi tre valori Hex specificano rispettivamente il livello di intensità del rosso, del verde e del blu.
Poiché vi è l’involgimento di valori Hexadecimali, e la base Hexadecimale si trova nell’intervallo dei valori 0-15, dove i valori nell’intervallo 10-15 sono rappresentati dalle lettere A-F. Perciò 00 dà il colore con l’intensità più bassa, mentre FF produce il livello di intensità più alto.
Ecco alcuni colori Hex comuni con i codici:
Prendiamo un esempio per capire il funzionamento del metodo Hex.
.container1{
background-color:#91D8E4;
}Output:
Lavorare con i metodi RGB e Hexadecimale è comodo e ci può davvero dare tutto ciò che vogliamo. Ma non è proprio così. Lavorare con questi due metodi non è così facile come sembra. Vediamo come.
Problemi associati ai codici di colore RGB e Hexadecimali.
Uno dei problemi significativi che queste due metodologie portano è che non sono intuitive. Significa che non funzionano secondo come il cervello umano riconosce i colori. Quando una persona vede un colore, il cervello umano non lo separa in rosso, verde e blu. Per questo, diventa difficile per noi riconoscere i colori tramite i loro numeri RGB e Hexadecimali o decimali.
Tra queste difficoltà, un caso che può emergere nella vita quotidiana degli sviluppatori o dei testatori è la necessità di conversione RGB in Hex o viceversa per una migliore comprensione e comunicazione umana.
Quando si crea un’interfaccia utente, designer UI e web developer hanno bisogno di diverse sfumature di un colore particolare per mantenere una tematica costante lungo tutta l’interfaccia. Per esempio, 30 sfumature di blu, 20 sfumature di verde, 10 sfumature di arancione, ecc., a seconda delle necessità. Può creare confusione se usiamo le variabili CSS per contenere queste variazioni di colore così numerose. Quando notiamo che i valori RGB di tutte queste variazioni sono non correlati, le cose peggiorano.
Ma questi svantaggi delle metodologie RGB e Hexadecimal possono essere eliminati con i colori HSL in CSS. Ora perché noi capiamo il ruolo dei colori HSL in CSS cominciando a discutere di cosa rappresenta il metodo HSL, come funziona e come supera i limiti delle metodologie RGB e Hexadecimal.
Cos’è HSL?
HSL sta per tonalità di colore, saturazione e luminosità. In altre parole, HSL è composto da tre fattori di misura: tonalità di colore, saturazione e luminosità. Come gli altri due metodi discussi sopra, anche il metodo HSL funziona sulla osservazione che ogni colore è una miscela di rosso, verde e blu.
Dato che i colori primari nell’HSL sono il rosso, il verde e il blu, il cerchio colore RGB è il concetto centrale dietro gli HSL Colors in CSS.
Il cerchio colore RGB (Rosso Verde Blu) rappresenta prevalentemente colori riempiti all’interno di un cerchio. Questo cerchio mostra la relazione tra i colori primari, secondari e terziari. Tuttavia, esistono tre tipi di cerchi colore: RGB (Rosso Verde Blu), CMY (Ciano Magenta Giallo) e RYB (Rosso Giallo Blu).
Il diagramma allegato rappresenta il cerchio colore RGB. Osservate che il rosso è a 0 gradi, il verde a 120 gradi e il blu a 240 gradi. Scavate più a fondo in queste tre caratteristiche e capite cosa succede dietro le quinte quando usate i colori HSL in CSS.
Tonalità di colore
La tonalità di colore è il primo valore assegnato in questo metodo quando si usano i colori HSL in CSS. È la misura dell’angolo del colore sul cerchio colore. Il valore di angolo definito è calcolato dalla linea x positiva in direzione antioraria, e il colore a quell’angolo è restituito. Poiché è la misura di un angolo, il suo valore predefinito è in unità di grado. Tuttavia, questo metodo ci permette di definire i valori di angolo in altre unità, inclusi rad, grad e turn.
Il valore dell’unità dell’angolo si trova in un range di 0–360 gradi.rosso a 0 gradi, verde a 120 gradi e blu a 240 gradi. Per il rad, il range dei valori è da 0–6,28 rad. Le unità di valore più comunemente usate negli HSL Colors in CSS sono i valori in gradi.
Prendiamo un esempio per capire il funzionamento dell’Hue.
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}Output:
Anche se i valori angolari sono limitati tra 0-360, può accettare valori inferiori a 0 gradi e superiori a 360 gradi. Quando il valore è superiore a 360, viene convertito al valore del range sottraendo 360. Nel caso di valori inferiori a 0 o valori negativi, il valore viene aggiunto a 360, e il valore risultante viene utilizzato per recuperare il colore.
background-color: hsl(400deg, 39%, 49%);Output:
background-color: hsl(-120deg, 39%, 49%);Output:
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}Output:
Se consideriamo in termini di valori angolari, allora 60 gradi e 420 gradi (420 – 360 = 60) entrambi i valori sono gli stessi. Perciò otteniamo lo stesso colore di sfondo in entrambi i contenitori, come osservato negli esempi precedenti.
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}Output:
Anche qui, potete osservare che 90 gradi e -270 gradi danno il medesimo risultato per la stessa ragione del precedente esempio. 90 gradi e -270 gradi, entrambi i valori sono gli stessi se li considerate in termini di valori angolari.
Ora, passiamo al secondo carattere dell’ metodo HSL, ovvero la Saturazione.
Saturazione
La saturazione definisce il livello di purezza del colore e quanto il colore sarà saturato o non saturato. In altre parole, la caratteristica di saturazione manipola il livello di intensità del colore. La misura di saturazione accetta un valore intero espresso in percentuale per definire la saturazione del colore.
Prendiamo un esempio per capire come funziona la saturazione.
.container{
background-color:hsl(60, 45%,49%);
}Output:
Se il valore della caratteristica di saturazione è alto, allora l’intensità del colore è anche alta, e la quantità di gradazioni di grigio in quel colore sarà minore. Perciò, un valore del 100% della saturazione ci darà un colore puro, un valore del 50% risulterà in metà colore e metà gradazioni di grigio, e il 0% risulterà in gradazioni di grigio complete.
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}Output:
Nell’esempio sopra, puoi vedere la differenza che otteniamo nel colore di sfondo dei contenitori incrementando il valore della caratteristica di saturazione da 0% a 100%. Al valore del 0%, otteniamo il colore grigio puro nel contenitore 1, e man mano che il valore aumenta, l’intensità del colore aumenta anche. Alla fine, l’intensità è massima al 100% nel contenitore 5.
Poiché la caratteristica di saturazione accetta un valore in percentuale, il valore ottenuto rientra nel range tra 0% e 100%. In qualche modo, l’utente può anche passare valori superiori a 100% e inferiori a 0% nella caratteristica di saturazione.
Ma proprio come nella caratteristica del tono, non c’è nessun beneficio nell’inserire valori esterni ai limiti perché se l’utente inserisce un valore superiore al 100%, l’intensità del colore rimane uguale a 100%. Per valori inferiori a 0% (valori negativi), l’intensità rimane uguale a 0%.
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}Output:
Qui, potete osservare che abbiamo assegnato i valori di saturazione 0% e -25%, e in entrambi i contenitori otteniamo lo stesso colore di sfondo.
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}Output:
In questo esempio, abbiamo inizializzato i valori 100% e 200% per la caratteristica di saturazione, e per questi due valori diversi, otteniamo lo stesso colore di sfondo in entrambi i contenitori.
Ora, il momento è per l’ultima caratteristica del metodo HSL utilizzato negli HSL Colors in CSS, cioè la Luminosità.
Luminosità
Come suggerisce il nome, la caratteristica di Luminosità controlla la quantità di luce nel colore. In altri termini, la luminosità può anche essere descritta come la proprietà che controlla quanto quel colore sarà, chiaro o scuro. Come la caratteristica di saturazione, la caratteristica di luminosità richiede anche un valore intero in unità di percentuale.
Prendiamo un esempio per capire il funzionamento della Luminosità.
.container {
background-color: hsl(60, 39%, 49%);
}Output:
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
Output:
Qui, potete osservare che a 0% di luminosità, il colore di sfondo è nero puro nel Container 1, e man mano che il valore di luminosità aumenta, la luminosità del colore aumenta, e a 100% di luminosità è piena; quindi, il colore di sfondo nel Container 5 è bianco puro.
Come la caratteristica di saturazione, la caratteristica di luminosità accetta valori superiori a 100% e inferiori a 0%. Ma i valori superiori a 100% funzionano allo stesso modo di 100%, e i valori inferiori a 0% (valori negativi) funzionano allo stesso modo di 0%. Vediamo questo in azione.
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}Output:
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}Output:
In questo esempio, potete notare che anche se abbiamo assegnato un valore di luminosità del 100% in Container 1 e un valore del 200% in Container 2, il risultato sullo sfondo è lo stesso.
Stiamo discutendo sugli tre caratteri delle colori HSL in CSS, ma non è finita. Un’altra caratteristica sotto i colori HSL in CSS è la “A”, abbreviazione di “alpha”. È il quarto carattere. La caratteristica alpha specifica l’opacità del colore. In altre parole, la caratteristica alpha semplicemente regola il livello di trasparenza del colore. In HSL, per usare le caratteristiche alpha, si utilizza il metodo HSLA.
A differenza di altre caratteristiche dei colori HSL in CSS, che richiedono un valore composto da unità, la caratteristica alpha non richiede un valore con unità. La caratteristica alpha richiede un valore senza unità tra 0 e 1. A 0, il colore è invisibile o nascosto; a 1, la caratteristica alpha raggiunge il suo massimo e il colore è totalmente visibile.
.container{
background-color:hsla(60, 39%,49%, 0);
}Output:
.container{
background-color:hsla(60, 39%,49%, 1);
}Output:
Qui, avendo assegnato la caratteristica alpha con un valore di 1, il colore dello sfondo del contenitore diventa visibile e possiamo iniziare il colore dello sfondo.
Richiedere un valore senza unità non è l’unica cosa che distingue le caratteristiche alpha. Una caratteristica alpha può accettare qualsiasi valore tra 0 e 1, anche i valori decimali (0.1, 0.2, 0.01), che non funzionano nelle altre caratteristiche dei colori HSL in CSS.
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}Output:
In questo esempio, come potete osservare, abbiamo assegnato un valore di 0.5 (metà) alla caratteristica alpha. Perciò, come risultato, otteniamo il colore di sfondo con metà trasparenza nel contenitore. Non solo valori decimali a una cifra, le caratteristiche alpha accettano anche valori a due cifre. Questo offre un completo controllo sul grado di trasparenza del colore.
Ecco un esempio che lo mostra.
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}Output:
Qui, abbiamo passato un valore di 0.25, che è un valore a due cifre, alla caratteristica alpha.
Vantaggi dell’Uso dei Colori HSL in CSS
I colori HSL (Hue, Saturation, Lightness) sono una aggiunta relativamente recente al modulo del colore CSS, offrendo un modo più intuitivo e flessibile per specificare i colori nella web development. Confrontati con i codici di colore RGB o Hexadecimali tradizionali, i colori HSL in CSS forniscono un range di vantaggi per designer e sviluppatori.
In questa sezione, esploreremo i benefici dell’uso di colori HSL in CSS in dettaglio e discuteremo come possono essere utilizzati per creare design visivi e accessibili per pagine web e applicazioni.
Riguardo all’applicazione pratica, i colori HSL in CSS sono considerati a molti livelli professionali per l’uso a causa dei loro vantaggi.
Ci sono diversi vantaggi dell’uso di colori HSL, elencati qui sotto:
- Migliora l’intero flusso di lavoro rendendolo molto più fluido
- Eccellentemente utile quando si ottengono diversi colori mantenendo il colore di base standard
- Un metodo potente e semplice che offre una vasta possibilità di colori.
- La presente descrizione dell’utilizzo dei colori in base all’HSL è scritta in modo chiaro e facile da capire, rendendola veloce da imparare e da leggere
- I colori generati tramite il metodo HSL sono chiaramente espressi, rendendo facile immaginare il risultato finale.
Un altro vantaggio significativo dell’uso dei colori HSL in CSS è che essi funzionano anche come alternativa agli RGB e possono essere facilmente convertiti in RGB. Poiché sia il metodo RGB che l’HSL richiedono una collezione di valori numerici per funzionare, si può sfruttare la facilità di conversione dei valori numerici dei colori HSL nel metodo RGB, che utilizza valori frazionari.
Per renderla ancora più semplice, diversi convertitori online per i colori possono convertire i metodi da uno a un altro. Tutte queste caratteristiche rendono i colori HSL in CSS il metodo preferito per la definizione dei colori nei progetti. E ci sono molte altre ragioni per cui il numero di sviluppatori che sceglie di usare i colori HSL in CSS invece degli altri sta aumentando costantemente. benché la maggior parte degli esperti in CSS preferisca ancora l’uso degli HEX o degli RGB rispetto all’HSL, quest’ultimo sta guadagnando sempre più attenzione.
Applicazioni dell’Uso dei Colori HSL in CSS
I colori HSL in CSS forniscono un modo versatile e intuitivo per specificare i colori e hanno numerose applicazioni nella realizzazione di siti web. Ecco alcune delle principali applicazioni dell’uso dei colori HSL in CSS:
Colori Tintati
A livello professionale, per creare un tema costante nell’interfaccia, il tema del sito è progettato utilizzando differenti sfumature di un determinato colore in diverse sezioni dell’interfaccia. Il metodo HSL è molto utile in questi scenari.
In questo esempio, abbiamo considerato due schemi di layout di sito web base. In entrambi questi, la sezione intestazione è riempita con un colore di sfondo, e la sezione contenuto ha lo stesso colore di sfondo ma una sfumatura molto più chiara. Per ottenere questo effetto, abbiamo tenuto il valore caratteristico della luminosità basso nella sezione intestazione e alto nella sezione contenuto.
Sperimentando con il valore caratteristico della luminosità a differenti valori, possiamo ottenere sfumature scure e chiare dello stesso colore da utilizzare nei temi del sito web.
Sfumature di colore scuro in hover
Potreste aver notato che alcuni elementi nell’interfaccia del sito web cambiano colore quando l’utente passa sopra di essi. Il loro colore diventa da sfumatura chiara a scura. In questo posto, i colori HSL in CSS entra in gioco per fornire le sfumature chiare e scure dello stesso colore.
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
Qui, potete osservare che nel pulsante in alto, il colore è di sfumatura chiara, per questo abbiamo tenuto il valore della caratteristica luminosità a 70%. E dopo il hover, il colore del pulsante diventa di sfumatura scura, come potete notare nel pulsante in basso. Per ottenere questo effetto, abbiamo assegnato un valore di 50% alla caratteristica luminosità, che è inferiore al pulsante in alto.
Sfumature del colore bianco
Molto spesso, abbiamo bisogno di usare il bianco come colore del testo per rendere il testo leggermente diverso dall’interfaccia del sito web complessiva. Ma l’uso dello stesso sfumatura di bianco per ogni testo rende l’esperienza utente noiosa. Per evitare questo, possiamo usare diverse sfumature di bianco per rendere il testo evidente e mantenerlo interessante.
I colori HSL in CSS ci possono aiutare a ottenere diverse sfumature di colore bianco. possiamo aggiungere valori differenti alla caratteristica di luminosità nell’HSL per ottenere diverse sfumature di bianco.
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}Output:
Nell’esempio seguente, si può notare che in tutti e quattro i contenitori, il testo non è il bianco base. Usiamo diverse sfumature di bianco per dargli un aspetto interessante e mantenerlo bianco. Per questo, abbiamo manipolato il valore della caratteristica di luminosità per il colore del font.
Tipi di pulsante
I colori HSL in CSS sono anche molto utili quando abbiamo due sfumature differenti dello stesso colore per i pulsanti. Assegnare diverse sfumature dello stesso colore rende facile per l’utente identificare velocemente quali sono il pulsante primario e quale è il pulsante secondario.
Nella vita reale, i colori scuri sono usati per i pulsanti primari, e i colori tenui per i pulsanti secondari. Per ottenere le sfumature chiare e scure dello stesso colore, passiamo valori alti e bassi alla caratteristica di luminosità nell’HSL.
Vediamo questo in azione considerando un esempio.
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}Output:
Nell’esempio seguente, il pulsante in alto è il primario, e quello in basso è il secondario. Il colore scuro è usato nel pulsante primario con un valore basso di luminosità, e il colore chiaro è usato nel pulsante secondario con un valore alto di luminosità.
Colori del tema scuro
L’utilizzo di un corretto contrasto colore è essenziale nell’interfaccia utente. Soprattutto quando l’utente ha abilitato il tema scuro sul sito web. Secondo studi condotti nel 2022, il 81,9% degli utenti utilizza il tema scuro sui propri smartphone. Da questo, potete immaginare l’importanza del contrasto colore nei temi scuri delle interfacce utente.
Secondo i criteri di accessibilità WCAG, deve essere mantenuto almeno un rapporto di 4:5:1 per il testo del corpo rispetto ai superfici scuri. E per rispettare questa regola, si evita l’uso di colori saturi nei temi scuri. L’uso di colori saturi incrementa anche lo sforzo oculare se utilizzati con uno sfondo scuro.
Nell’immagine soprastante, è ovvia la facilità di lettura del testo con un valore di saturazione basso rispetto al testo con un valore di saturazione alto. Per questo, viene sempre consigliato l’uso di colori non saturi contro uno sfondo scuro.
Come Scegliere il migliore Specificatore di Colore
I tre metodi che abbiamo discusso hanno le loro risorse e i loro svantaggi. dipende dalla casistica di utilizzo quale specificatore di colore si dimostra il migliore. Non c’è un fattore comune su cui confrontare tutti e tre i specificatori di colore, ma esaminiamo ognuno di questi.
Hexadecimal
Se non siete impegnati in nessuna area del design e nella creazione di progetti per uso personale, allora potreste dover utilizzare il metodo esadecimale per specificare i colori. Molti sviluppatori preferiscono il metodo esadecimale perché è semplice, non include troppa complessità, contrariamente agli RGB e agli HSL Colors in CSS.
Copia il codice esadecimale del colore desiderato e inseriscilo nel tuo programma. Ma si presentano sfide quando è necessario manipolare l’opacità del colore. Il metodo esadecimale non dà ai utenti il controllo dell’opacità del colore.
RGB
Ora, per capire quando scegliere il metodo RGB: questo metodo è utile per tutti i professionali sviluppatori e designer negli ambiti di editing e progettazione fotografici. Un’altra ragione è che il metodo RGB è il formato di specificazione del colore più comunemente usato in molti software di progettazione popolari, inclusi CorelDraw, PhotoShop e Illustrator. Ma il metodo RGB fallisce quando c’è bisogno di offrire diverse sfumature dello stesso colore senza diventare troppo complesso.
HSL
Ora, considera il metodo HSL. I web developer professionali e i designer dell’interfaccia utente tendono a mantenere un tema comune attraverso l’interfaccia. In questa situazione, l’uso dei colori HSL in CSS diventa una mano amica grazie alla sua capacità di cambiare l’intensità del colore modificando i valori delle caratteristiche di saturazione e luminosità. Alla fine, tutto si riduce alla preferenza individuale. Puoi scegliere qualsiasi di questi tre formatti per svolgere il tuo lavoro.
Compatibilità browser
Non serve specificare colori se i colori definiti non forniscono l’output desiderato nei browser. Per evitare questa situazione, il formato di specificazione del colore usato nel design dell’interfaccia dovrebbe essere compatibile con ogni browser.
Fortunatamente, il funzionamento dei colori HSL in CSS è del tutto indipendente dai browser. Il metodo HSL è completamente compatibile con i browser. Quindi, non importa qual browser l’utente utilizza, sarà sempre diretto alla pagina web con i colori definiti correttamente.
Tuttavia, puoi eseguire test multipla browser per assicurarti che i colori HSL in CSS diano il risultato desiderato su ogni browser. I platform di test di qualità continua (ad esempio, LambdaTest) ti aiutano a eseguire test di compatibilità multipla browser su diversi browser reali, dispositivi e combinazioni OS. Controlla se i colori CSS specificati funzionano correttamente nei browser e nei dispositivi.
Chiudiamo!
Questo blog ci ha insegnato il ruolo dei colori HSL in CSS e come differiscono dalle altre metodologie di colore. Abbiamo anche discusso le applicazioni dei colori HSL in CSS e i loro benefici. Abbiamo anche imparato come i colori HSL in CSS forniscano maggiore flessibilità e precisione nell’specificare i colori nella progettazione web.
Usando i colori HSL in CSS, i designer possono avere più controllo sulla saturazione e la luminosità dei colori, ottenendo una gamma più ampia di tonalità e sfumature da utilizzare nei siti web e negli applicativi per corrispondere all’identità o alla visione estetica della brand.
I colori HSL in CSS permettono una maggiore accessibilità alle persone con disabilità; semplicemente regolando la luminosità e la saturazione dei colori, creando maggiore contrasto e leggibilità per il testo e altri elementi di design, rendendo più facile per gli utenti navigare e comprendere il contenuto. In generale, i colori HSL in CSS forniscono una potente strumentazione per i web designer e gli sviluppatori per creare schema cromatici vivaci e accessibili nei loro progetti web.
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css