I colori sono i componenti più importanti usati per dare un aspetto migliore a qualsiasi applicazione o sito Web. È possibile aggiungere colori agli elementi HTML utilizzando diverse proprietà CSS. In CSS, ci sono tre metodi avanzati, come RGB, codice esadecimale e HSL, che possono essere utilizzati per specificare i colori agli elementi HTML.

Questo post ti guiderà sui metodi di colore HSL e HSLA. Quindi, immerciamoci!

Quali sono i colori HTML HSL?

I colori HTML possono essere utilizzati specificando la tonalità, la saturazione e la leggerezza usando il metodo HSL (). Il formato della funzione che utilizziamo per indicare che il colore HSL è menzionato di seguito:

HSL (tonalità, saturazione, leggerezza)

Discutiamoli uno per uno!

• "tinta": Hue è il colore di base sulla ruota dei colori. È selezionato dalla ruota specificando il grado da 0 a 360 sulla ruota dei colori. Ad esempio, 0 indica il rosso, 120 rappresenta il verde e 240 produce il colore blu.
• "saturazione": L'intensità del colore è nota come saturazione. È il valore percentuale in cui il 100% indica il colore puro, il 50% indica che il colore ha una tonalità del 50% di grigio e lo 0% rappresenta il grigio pieno, il che significa che non possiamo vedere alcun colore.
• "leggerezza": La leggerezza mostra quanta luce vogliamo aggiungere al colore. È anche un valore percentuale in cui la leggerezza al 100% definisce il bianco, lo 0% definisce il colore nero e il 50% definisce il colore normale.

Esempio

Nel file HTML, in primo luogo, aggiungi un div e aggiungi un titolo e un paragrafo al suo interno:

Nome argomento: squadra

Siamo una squadra. Lavoriamo per una missione comune.

Ora, modelleremo nel modo seguente:

• IL "larghezza"Il valore della proprietà del div è impostato come"100%".
• "altezza" COME "200px".
• Assegna il "colore di sfondo"Proprietà come"HSL (233, 63%, 89%)", Dove 233 indica Hue, il 63% rappresenta la saturazione e l'89% rappresenta la leggerezza.
• IL "dimensione del fontIl valore "è impostato come"30px".
• IL "allineamento"Il valore della proprietà è impostato come"centro".

div
larghezza: 100%;
Altezza: 200px;
Background-color: HSL (233, 63%, 89%);
Font-size: 30px;
Testo-align: centro;

Ora, stile il

tag fornendo il colore HSL ad esso. Per applicare il colore al testo, utilizzeremo il “colore"Valore della proprietà come"HSL (273, 99%, 28%)":

H1
Colore: HSL (273, 99%, 28%);

Assediamo un colore HSL diverso al

etichetta. Per farlo, il "colore"Il valore della proprietà è impostato come"HSL (12, 94%, 25%)":

P
Colore: HSL (12, 94%, 25%);

Ecco un risultato dei colori HSL aggiunti:

C'è un'estensione del metodo di colore HSL noto come HSLA.

Quali sono i colori HSLA?

I colori HSLA possono essere definiti come il modello di colore HSLA, in quanto è un'estensione di HSL. La sintassi della funzione HSLA () è data come segue:

HSLA (tonalità, saturazione, leggerezza, alfa)

Qui, il valore Alpha ha un intervallo tra "0.0" A "1.0", Dove 0.0 produce completamente trasparente e 1.0 produce completamente opaco.

Esempio

Facciamo un esempio per applicare i colori HSLA alle intestazioni aggiunte:

HSLA (89, 100%, 64%, 0.5)

HSLA (89, 100%, 64%, 1)

Quindi, applica i colori HSLA come sfondo sulle intestazioni aggiunte con "0.5" E "1"Valori alfa, rispettivamente. Si noti che i valori degli altri parametri sono gli stessi:

.Heading1
Background-color: HSLA (89, 100%, 64%, 0.5);

.Heading2
Background-color: HSLA (89, 100%, 64%, 1);

L'immagine seguente rappresenta i due stessi colori con diversi valori alfa:

Abbiamo compilato le informazioni essenziali relative ai colori HTML HSL e HSLA.

Conclusione

Usando il metodo HSL (), i colori HTML HSL possono essere applicati specificando il valore della tonalità, della saturazione e della leggerezza. Tuttavia, HSLA è un'estensione di HSL con il canale Alpha. Questo modello di colore può essere applicato con l'aiuto della funzione HSLA (). Questo blog ha spiegato quali sono i colori HTML HSL e HSLA e come applicarli ai componenti HTML.