Farben im Webdesign moderne Browser, einfache Farbangaben  

RGBA,HSLA und CSS 3 opacity gibt Transparenz – Wie aus einer Farbe, ganz einfach 10 werden können

Aquarellkasten
Nach der Erweiterung des RGB Farbmodell um einen (vierten) Alphawert zu RGBA, werden im CSS Color Module Level 3 des W3C zwei neue Möglichkeiten der Farbangabe definiert. Mittels opacity kann nun Deckkraft und Transparenz einer Farbe bestimmt werden. Für opacity können Werte zwischen 0.0 (völlige Transparenz) und 1.0 (völlige Deckkraft) verwendet werden.

Was bedeutet das A in RGBA und HSLA?

Das (A) steht für einen vierten Alphakanal, der bestimmt wie durchsichtig das Pixel sein soll. Die zusätzliche (a) Angabe zum RGB Wert oder HSL Wert, bestimmt die Deckkraft der Farbe ( a/ 0.0 = transparent, a/ 1.0 = opak, Werte von 0.0 - 1.0 können verwendet werden).
Dies ist eine interessante und einfache Option zur Definition einer Farbe im Webdesign, der RGB oder HSL Wert wird einfach um eine Ziffer ergänzt.

WICHTIG: Falls in den Darstellungen unten keine Farben erkennbar sind - liegt es am Browser, der RGBA u. HSLA noch nicht darstellen kann.

Darstellung von RGBA und HSLA

  rgba(255,100,20,1)   Wie diese Beispiele zeigen lässt sich mit RGBA und HSLA auf einfache Weise eine harmonische Farbreihe erstellen     hsla(120,100%,50%,1)
 rgba(255,100,20,0.8)  hsla(120,100%,50%,0.8)
 rgba(255,100,20,0.5)  hsla(120,100%,50%,0.5)
 rgba(255,100,20,0.2)  hsla(120,100%,50%,0.2)
 rgba(255,100,20,0.1)  hsla(120,100%,50%,0.1)


Wie definiert man Farben mit RGBA oder HSLA?

Die Definition der RGBA oder HSL-Werte ist einfach. Die bekannten RGB oder HSL Anbaben, werden um eine Ziffer zwischen 0 und 1 ergänzt, mit der die Deckkraft der Farbe ( a/ 0.0 = transparent, a/ 1.0 = opak, der Farbe bestimmt wird. Für die hexadezimale Schreibweise sind keine Transparenz Angaben möglich.
Das Beispiel unten verwendet red als Ausgagsfarbe: rgb(255,0,0) / hsl(0,100%,50%)

So werden Farben mit RGBA oder HSLA definiert

  background-color: rgb(255,0,0) oder hsl(0,100%,50%)
 
  Die transparenten Farbangaben funktionieren für:
   Hintergrund  background-color: rgba(255,0,0, 0.7)
Textfarbe  Textfarbe  color: hsla(0,100%,50%, 0.7
   Rahmen  border-color: rgba(100%,0%,0%, 0.7)


Was ist HSL?

HSL ist die Abkürzung von Hue, Saturation, Luminance (Farbton, Sättigung, Helligkeit), für diese 3 Bereiche werden die Farbwerte wie folgt verwendet:
  • H (hue) - Farbton in Grad auf dem Farbkreis, beginnend mit rot=0°, Grün = 120 °; blau = 240 °
  • S (saturation) - Sättigung in Prozent (0 % = Neutralgrau, 50 % = wenig gesättigte Farbe, 100 % = gesättigte, reine Farbe); entspricht der Zumischung von purem Weiß
  • L (lightness) -Helligkeit in Prozent(0 % = keine Helligkeit/ Schwarz, 50% "normale", 100 % = volle Helligkeit/weiss) entspricht der Zumischung von Schwarz


Können alle Browser RGBA und HSL, HSLA darstellen?

Die aktuellen Browser wie Firefox 3, Safari und Google Crome verstehen RGBA, HSL und HSLA problemlos. Beim Internt Explorer arbeitet man an der Umsetzung. Falls Sie bei den Beispielen oben und der Tabelle unten keine Farben sehen können, wird von HSLA und RGBA von ihrem Browser nicht unterstützt.


RGBa Codes - Beispiele zur Transparenz und Eingabe Werte

Farb-
Color-
Name
rgb(R,G,B)- Dezimal
rgb(R,G,B) - Prozent
Farbmuster rgba(R,G,B,a) Farbmuster - Swatches
   rgb(R,G,B)a = 1.0 a = 0.9a = 0.8 a = 0.7a = 0.6 a = 0.5a = 0.4 a = 0.3a = 0.2 a = 0.1a = 0.0
black rgb(0,0,0)
rgb(0%, 0%, 0%)

text

text

text

text

text

text

text

text

text

text

text

text
navy rgb(0,0,128)
rgb(0%, 0%, 50%)

text

text

text

text

text

text

text

text

text

text

text

text
blue rgb(0,0,255)
rgb(0%, 0%, 100%)

text

text

text

text

text

text

text

text

text

text

text

text
green rgb(0,128,0)
rgb(0%, 50%, 0%)

text

text

text

text

text

text

text

text

text

text

text

text
teal rgb(0,128,128)
rgb(0%, 50%, 50%)

text

text

text

text

text

text

text

text

text

text

text

text
lime rgb(0,255,0)
rgb(0%, 100%, 0%)

text

text

text

text

text

text

text

text

text

text

text

text
aqua rgb(0,255,255)
rgb(0%, 100%, 100%)

text

text

text

text

text

text

text

text

text

text

text

text
maroon rgb(128,0,0)
rgb(50%, 0%, 0%)

text

text

text

text

text

text

text

text

text

text

text

text
purple rgb(128,0,128)
rgb(50%, 0%, 50%)

text

text

text

text

text

text

text

text

text

text

text

text
olive rgb(128,128,0)
rgb(50%, 50%, 0%)

text

text

text

text

text

text

text

text

text

text

text

text
gray rgb(128,128,128)
rgb(50%, 50%, 50%)

text

text

text

text

text

text

text

text

text

text

text

text
silver rgb(192,192,192)
rgb(75%, 75%, 75%)

text

text

text

text

text

text

text

text

text

text

text

text
red rgb(255,0,0)
rgb(100%, 0%, 0%)

text

text

text

text

text

text

text

text

text

text

text

text
fuchsia rgb(255,0,255)
rgb(100%, 0%, 100%)

text

text

text

text

text

text

text

text

text

text

text

text
yellow rgb(255,255,0)
rgb(100%, 100%, 0%)

text

text

text

text

text

text

text

text

text

text

text

text
white rgb(255,255,255)
rgb(100%, 100%, 100%)

text

text

text

text

text

text

text

text

text

text

text

text


HSLa Codes- Beispiele zur Transparenz und Eingabe Werte

Farb-
Color-
Name
hsl(h,s%,l%) Farbmuster hsla(h,s,l,a) Farbmuster - Swatches
   hsl(h,s,la = 1.0 a = 0.9a = 0.8 a = 0.7a = 0.6 a = 0.5a = 0.4 a = 0.3a = 0.2 a = 0.1a = 0.0
black hsl(0,0%,0%)
text

text

text

text

text

text

text

text

text

text

text

text
navy hsl(240,100%,25%)
text

text

text

text

text

text

text

text

text

text

text

text
blue hsl(240,100%,50%)
text

text

text

text

text

text

text

text

text

text

text

text
green hsl(120,100%,25%)
text

text

text

text

text

text

text

text

text

text

text

text
teal hsl(180,100%,25%)
text

text

text

text

text

text

text

text

text

text

text

text
lime hsl(120,100%,50%)
text

text

text

text

text

text

text

text

text

text

text

text
aqua hsl(180,100%,50%)
text

text

text

text

text

text

text

text

text

text

text

text
maroon hsl(0,100%,25%)
text

text

text

text

text

text

text

text

text

text

text

text
purple hsl(300,100%,25%)
text

text

text

text

text

text

text

text

text

text

text

text
olive hsl(60,100%,25%)
text

text

text

text

text

text

text

text

text

text

text

text
gray hsl(0,0%,50%)
text

text

text

text

text

text

text

text

text

text

text

text
silver hsl(0,0%,75%)
text

text

text

text

text

text

text

text

text

text

text

text
red hsl(0,100%,50%)
text

text

text

text

text

text

text

text

text

text

text

text
fuchsia hsl(300,100%,50%)
text

text

text

text

text

text

text

text

text

text

text

text
yellow hsl(60,100%,50%)
text

text

text

text

text

text

text

text

text

text

text

text
white hsl(0,0%,100%)
text

text

text

text

text

text

text

text

text

text

text

text


 

Facebook & Co.