HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

HTML HSL- und HSLA-Farben


HSL steht für Farbton, Sättigung und Helligkeit.

HSLA-Farbwerte sind eine Erweiterung von HSL mit einem Alpha-Kanal (Deckkraft).


HSL-Farbwerte

In HTML kann eine Farbe mithilfe von Farbton, Sättigung und Helligkeit (HSL) in der Form angegeben werden:

hsl( Farbton , Sättigung , Helligkeit )

Der Farbton ist ein Grad auf dem Farbrad von 0 bis 360. 0 ist rot, 120 ist grün und 240 ist blau.

Die Sättigung ist ein Prozentwert, 0 % bedeutet einen Grauton und 100 % die volle Farbe.

Helligkeit ist ebenfalls ein Prozentwert, 0 % ist schwarz und 100 % ist weiß.

Experimentieren Sie, indem Sie die folgenden HSL-Werte mischen:

hsl(0, 100 %, 50 %)

FARBTON

0

SÄTTIGUNG

100%

LEICHTIGKEIT

50%

Beispiel

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)


Sättigung

Sättigung kann als Intensität einer Farbe beschrieben werden.

100 % ist reine Farbe, keine Grauschattierungen

50 % sind 50 % grau, aber Sie können die Farbe noch sehen.

0% ist komplett grau, man sieht die Farbe nicht mehr.

Beispiel

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)


Leichtigkeit

Die Helligkeit einer Farbe lässt sich damit beschreiben, wie viel Licht man der Farbe geben möchte, wobei 0 % kein Licht (schwarz) bedeutet, 50 % 50 % hell (weder dunkel noch hell) bedeutet, 100 % volle Helligkeit (weiß) bedeutet.

Beispiel

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)


Grautöne

Grauschattierungen werden oft definiert, indem Sie den Farbton und die Sättigung auf 0 setzen und die Helligkeit von 0 % bis 100 % anpassen, um dunklere/hellere Schattierungen zu erhalten:

Beispiel

hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)


HSLA-Farbwerte

HSLA-Farbwerte sind eine Erweiterung von HSL-Farbwerten mit einem Alpha-Kanal, der die Deckkraft einer Farbe angibt.

Ein HSLA-Farbwert wird angegeben mit:

hsla ( Farbton, Sättigung , Helligkeit, Alpha )

Der Alpha-Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (überhaupt nicht transparent):

Experimentieren Sie, indem Sie die folgenden HSLA-Werte mischen:

hsla (0, 100 %, 50 %, 0,5)

FARBTON

0

SÄTTIGUNG

100%

LEICHTIGKEIT

50%

ALPHA

0,5

Beispiel

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)