Farben HSL

Was sind HSL-Farben?

Das HSL-Farbmodell (Hue, Saturation, Lightness) ist eine Methode zur Beschreibung von Farben, die auf drei Merkmalen basiert:

• Farbton: Dies ist die Primärfarbe. Bestimmt die Art der Farbe, ihre Position auf dem Farbkreis (von rot nach violett). Sie wird in Grad (von 0 bis 360) gemessen.
• Sättigung: Bezeichnet die Intensität einer Farbe, ihre Reinheit. Er wird in Prozent gemessen (von 0 % bis 100 %). Je höher die Sättigung, desto heller die Farbe. Wenn die Sättigung = 0 % ist, wird die Farbe Grau. Wenn Sättigung = 100 %, wird die Farbe so hell (gesättigt) wie möglich sein.
• Helligkeit: Bestimmt, wie hell oder dunkel die Farbe ist. Er wird in Prozent gemessen (von 0 % bis 100 %). 0 % ist schwarz, 100 % ist weiß und 50 % Farbe wird so rein und gesättigt wie möglich sein.

Wo wird HSL eingesetzt?

• Webdesign und Grafik: HSL ist praktisch zum Erstellen von Farbschemata, Anpassen von Helligkeit und Farbsättigung.
• Bildbearbeitung: HSL wird verwendet, um Farben zu korrigieren, Farbton, Sättigung und Helligkeit von Bildern zu ändern.
• Videobearbeitung: HSL hilft Ihnen, Farbeffekte zu erstellen und die Farben einzelner Objekte im Video zu ändern.

HSL vermittelt ein natürlicheres Farbgefühl als andere Modelle wie RGB.

Vorteile von HSL

• Intuitiv: HSL ist einfacher zu verstehen und zu verwenden als andere Farbmodelle wie RGB oder HEX.
• Einfach anzupassen: Einfaches Ändern einzelner Farbparameter (Farbton, Sättigung, Helligkeit), ohne andere zu beeinflussen.
• Große Auswahl an Farben: Mit HSL können Sie viele verschiedene Schattierungen und Farbkombinationen erstellen.

Nachteile von HSL

• Nicht immer konsistent mit der Wahrnehmung: HSL spiegelt nicht immer genau wider, wie eine Person Farbe wahrnimmt.
• Kann auf verschiedenen Geräten unterschiedlich sein: Die HSL-Farbe kann auf verschiedenen Bildschirmen und Geräten leicht unterschiedlich aussehen.
• Nicht immer in allen Anwendungen unterstützt: Obwohl HSL im Webdesign beliebt ist, wird es nicht von allen Software-Tools unterstützt.

HSL-Anwendungsfälle

• Webdesign: In CSS können Sie HSL verwenden, um einzelne Elemente zu gestalten:

  Beispiel

  Verwenden von HSL-Farben beim Formatieren einer Webseite:

  p {
    color: hsl(120, 100%, 50%);
  }

  Es wird grün (120°) sein, mit maximaler Sättigung (100%) und mittlerer Helligkeit (50%).
• Erstellung von Farbverläufen: Mit HSL können Sie fließende Übergänge zwischen verschiedenen Farben erstellen.
• Grafik: In Grafikeditoren wie Photoshop können Sie die Farben mit HSL anpassen, um die gewünschten Farbtöne zu erstellen.
• Erstellen von Farbfiltern: HSL wird verwendet, um verschiedene Farbfilter für Fotos und Videos zu erstellen.

Wie bekommt man HSL-Farbe?

Um eine HSL-Farbe zu erhalten, können Sie einen HSL-Rechner verwenden.

HSL-Farben

HSL-Farbwerte werden in IE9+, Firefox, Chrome, Safari und Opera 10+ unterstützt.

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

HSL-Farbwerte werden angegeben mit: hsl(hue, saturation, lightness).

Hue / Farbton

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

Saturation / Sättigung

Die Sättigung ist ein Prozentwert; 0 % bedeutet einen Grauton und 100 % ist die Vollfarbe.

Lightness / Leichtigkeit

Helligkeit ist auch ein Prozentsatz: 0 % ist schwarz, 100 % ist weiß.

Probieren Sie es selbst aus

HSL-Farbwerte werden in allen gängigen Browsern unterstützt.