Farben sind die wichtigsten Komponenten, mit denen jeder Anwendung oder Website ein besseres Erscheinungsbild verleiht und ein besseres Gefühl verleiht. Sie können den HTML -Elementen mit verschiedenen CSS -Eigenschaften Farben hinzufügen. In CSS gibt es drei erweiterte Methoden wie RGB, HEX -Code und HSL, die verwendet werden können, um Farben für HTML -Elemente anzugeben.

In diesem Beitrag führen Sie die Farbmethoden HSL und HSLA. Also lasst uns eintauchen!

Was sind HTML -HSL -Farben??

Die HTML -Farben können verwendet werden, indem Farbtöne, Sättigung und Leichtigkeit unter Verwendung der HSL () -Methode angegeben werden. Das Funktionsformat, mit dem wir die HSL -Farbe angeben, wird unten erwähnt:

HSL (Farbton, Sättigung, Leichtigkeit)

Lassen Sie uns sie nacheinander besprechen!

• “Farbton: Hue ist die grundlegende Farbe am Farbrad. Es wird aus dem Rad ausgewählt, indem der Grad von 0 bis 360 am Farbrad angegeben wird. Zum Beispiel zeigt 0 rot an, 120 repräsentiert grün und 240 erzeugt die blaue Farbe.
• “Sättigung”: Die Farbintensität wird als Sättigung bezeichnet. Es ist der prozentuale Wert, bei dem 100% die reine Farbe angibt, 50% angeben, dass die Farbe einen Graustatten von 50% aufweist und 0% das volle Grau darstellen, was bedeutet, dass wir keine Farbe sehen können.
• “Leichtigkeit”: Leichtigkeit zeigt, wie viel Licht wir der Farbe hinzufügen möchten. Es ist auch ein prozentualer Wert, bei dem 100% Leichtigkeit Weiß definiert, 0% die schwarze Farbe und 50% die normale Farbe definiert.

Beispiel

Fügen Sie in der HTML -Datei zunächst einen Div hinzu und fügen Sie eine Überschrift und einen Absatz darin hinzu:

Themenname: Team

Wir sind ein Team. Wir arbeiten für eine gemeinsame Mission.

Jetzt werden wir die folgende Weise stylen:

• Der "BreiteDer Eigenschaftswert des DIV wird als "festgelegt"100%”.
• “Höhe" als "200px”.
• Zuweisen Sie die “HintergrundfarbeEigentum als "HSL (233, 63%, 89%)”, Wobei 233 Hue anzeigen, 63% repräsentieren Sättigung und 89% repräsentieren die Leichtigkeit.
• Der "Schriftgröße"Wert wird als" festgelegt "30px”.
• Der "Textausrichtung"Eigenschaftswert wird als" festgelegt "Center”.

div
Breite: 100%;
Höhe: 200px;
Hintergrundfarbe: HSL (233, 63%, 89%);
Schriftgröße: 30px;
Text-Align: Mitte;

Jetzt style the

Tag, indem Sie die HSL -Farbe zur Verfügung stellen. Um die Farbe auf den Text anzuwenden, werden wir das verwendenFarbe"Eigenschaftswert als"HSL (273, 99%, 28%)”:

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

Lassen Sie uns dem eine andere HSL -Farbe zuweisen

Schild. Um dies zu tun, die “Farbe"Eigenschaftswert wird als" festgelegt "HSL (12, 94%, 25%)”:

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

Hier ist ein Ergebnis der zusätzlichen HSL -Farben:

Es gibt eine Erweiterung der HSL -Farbmethode, die als HSLA bekannt ist.

Was sind HSLA -Farben??

Die HSLA -Farben können als HSLA -Farbmodell definiert werden, da es sich um eine Erweiterung von HSL handelt. Die Syntax der HSLA () -Funktion ist wie folgt angegeben:

HSLA (Farbton, Sättigung, Leichtigkeit, Alpha)

Hier hat der Alpha -Wert einen Bereich zwischen “0.0" Zu "1.0”, Wo 0.0 erzeugt vollständig transparent und 1.0 produziert voll undurchsichtig.

Beispiel

Nehmen wir ein Beispiel, um HSLA -Farben auf die zusätzlichen Überschriften anzuwenden:

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

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

Wenden Sie als nächstes die HSLA -Farben als Hintergrund auf die zusätzlichen Überschriften mit “an0.5" Und "1”Alpha -Werte jeweils. Beachten Sie, dass die Werte der anderen Parameter gleich sind:

.Überschrift 1
Hintergrundfarbe: HSLA (89, 100%, 64%, 0.5);

.HODING2
Hintergrundfarbe: HSLA (89, 100%, 64%, 1);

Das folgende Bild repräsentiert die beiden gleichen Farben mit unterschiedlichen Alpha -Werten:

Wir haben die wesentlichen Informationen zu HTML HSL- und HSLA -Farben zusammengestellt.

Abschluss

Mit der HSL () -Methode können die HTML -HSL -Farben angewendet werden, indem der Wert des Farbton, der Sättigung und der Leichtigkeit angegeben wird. HSLA ist jedoch eine Erweiterung von HSL mit dem Alpha -Kanal. Dieses Farbmodell kann mit Hilfe der HSLA () -Funktion angewendet werden. In diesem Blog wurde erläutert, welche HTML -HSL- und HSLA -Farben sind und wie sie auf die HTML -Komponenten anwenden können.