HSL Farben, HSL-Farbangaben und HSLA

CSS3 Farb-Transparenz mit RGBA hatte ich schon einmal beschrieben, heute folgt HSL.

HSL ist eine weitere Möglichkeit, Farbangaben in der CSS zu definieren. HSL ist hier die Abkürzung für “Hue, Saturation, Lightness” zu deutsch in etwa “Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit”. Die Angaben erfolgen in der CSS nach dem Muster:

hsl(Farbwinkel, Farbsättigung in %, Farbhelligkeit in %);
hsla(Farbwinkel, Farbsättigung in %, Farbhelligkeit in %, Alpha);

Ich persönlich finde HSL für den Anwender intuitiver, besser und einfacher zu merken. Ich stelle mir einfach einen Kreis mit Winkelangaben von 0 bis 359 Grad vor. Der Wert 0 oder 360 steht für ROT, 120 steht für GRÜN und 240 für BLAU (oder eine Uhr und den Uhrzeiten 3Uhr = 90, 6Uhr = 180, 9Uhr = 270, 12Uhr = 360/0).

hsla(0, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(60, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(120, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(180, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 50%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(300, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

Die Angabe der Farbsättigung tendiert mit Richtung zum Wert 0% zu einem “grau” (je kleiner der Wert, desto mehr grau).

Bei der Angabe von 100% Helligkeit erhält man immer “weiß”, bei 0% Helligkeit “schwarz”. Probiert es aus! Wenn man sich erst einmal “zurecht” gefunden hat, ist das sehr intuitiv.

Hier einmal unterschiedliche “Grauwerte”:
Weiterlesen

Hexadezimal-Farbwerte in rgb (a) umwandeln

Bei meinen aktuellen Layout-Spielereien nutze ich für die Angabe von Farbwerten in meinen CSS-Dateien statt Hexadezimalangaben wie #fff oder #f3f3f3 vermehrt die RGB(A) Farbwerte. In einem früheren Artikel hatte ich bereits ein Online-Werkzeug zum Umwandeln von Farbwerten zu rgba Werten vorgestellt, heute füge ich meiner (Link-)Sammlung hilfreicher Werkzeuge ein weiteres Online-Tool hinzu, welches schnell und einfach zu bedienen ist und genau das tut, was der Name hergibt; HEX-Werte in rgb(a) umwandeln.

Devoth's HEX 2 RGBA Color Calculator

RGB(A)-Werte haben den Vorteil, schnell und unkompliziert eine Transparenz zu erzeugen und auch eine nachträgliche Änderung der Transparenz ist schnell umsetzbar. Also, heutzutage besser gleich rgba!

Mit Devoth’s HEX 2 RGBA Color Calculator ist eine Umwandlung schnell gemacht. Einfach den alten HEX-Farbwert eingeben und den rgba-Wert per “copy and paste” mitnehmen. Fertig!

Übungsbeispiel CSS3 Transparenz

Zur Übung und Anwendung der opacity-Eigenschaft und rgba-Werten folgendes kleines Beispiel. Hättet Ihr das Ergebnis so erwartet?

WE ARE STILL HERE

ein wenig Text in einem Absatz

 
 
Ich verstehe jetzt die Forderungen nach mehr Transparenz. Oder war das in einem anderen Zusammenhang? Ich hätte zumindest etwas mehr Transparenz der Hintergrundfarbe des unteren Textes erwartet! 😀

Weiterlesen

CSS3 Farb-Transparenz mit RGBA

In meinem letzten Beitrag habe ich zur Erzeugung einer Transparenz die CSS3-Eigenschaft opacity verwendet.

Als “Nachteil” (wenn man denn hier überhaupt von einem Nachteil sprechen kann, es ist eine Eigenschaft mit bestimmten Werten und genau das liefert sie!) der Eigenschaft opacity wird oft genannt, das die Transparenz auf alle Kindelemente vererbt wird und somit z. B. auch ein Text innerhalb eines Elementes die Eigenschaft annimmt und dadurch “unlesbar” wird.

Der “Vorteil” (und das muss man dann auch nennen,) ist, das man nicht nur Farben, sondern auch Bildern und Fotos Transparenz zuweisen kann.

Zur Erzeugung einer Farb-Transparenz wurde dem CSS Color-Modul in Level 3 aber auch das “A”, der Alpha-Wert im RGB Farbraum hinzugefügt.
Dieser Alpha-Wert drückt in Werten von 0.0 bis 1 die Transparenz aus.
(0.0 = völlige Transparenz, 1 = keine Transparenz)

Mein Beispiel aus dem Beitrag mit der CSS3-Eigenschaft opacity nun mit den RGBA-Angaben.

orange = RGB 255, 165, 0

Alpha-Wert: 0.1

Alpha-Wert: 0.2

Alpha-Wert: 0.3

Alpha-Wert: 0.4

Alpha-Wert: 0.5

Alpha-Wert: 0.6

Alpha-Wert: 0.7

Alpha-Wert: 0.8

Alpha-Wert: 0.9

Alpha-Wert: 1.0

Weiterlesen