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

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.9	a = 0.8	a = 0.7	a = 0.6	a = 0.5	a = 0.4	a = 0.3	a = 0.2	a = 0.1	a = 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,l	a = 1.0	a = 0.9	a = 0.8	a = 0.7	a = 0.6	a = 0.5	a = 0.4	a = 0.3	a = 0.2	a = 0.1	a = 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

 

weitere Themen

• Fenstergestaltung
• Film
• Sprache
• Tiere
• Träume
• Themen A-Z

weitere

• Farben aufnehmen
• Wellness
• Werbung
• Sternfarben
• Lernverhalten
• HexCodes Farbspektrum

Service

• Links
• Sitemap
• Impressum
• Copyright/Haftung 

Facebook & Co.

• Datenschutzhinweise 
•  
• 
• ©2000-2024 Marlene Stadler / aktualisiert am 12.06.2024