Farben im Webdesign   

Farben fürs Web definieren - RGB, RGBa, HSL, HSLa Werte, Hexadezimal Codes für HTML + CSS richtig eingeben

So viele Wege wie nach Rom führen - so viele Wege gibt es, einem Browser zu sagen, welche Farbe er verwenden soll.
So jung das Medium Internet ist, so komplex sind die technischen Entwicklungen die dieses Medium seit Jahren begleiten. Reichten einem Webdesigner der Anfangstage wenige Farben, so stehen heute Tausende, nein Millionen Farben zur Verfügung. Reichte früher einfaches HTML, zur Programmierung einer Webseite, ist heute die Beherrschung einiger Programmiertechnken notwendig.

Internetbrowser, Hardware, Programmiersprachen, Farbsysteme entwickeln sich in grossen Schritten stetig weiter oder es entstehen völlig neue Techniken. Wer kannte z.B. vor 15 Jahren einen Flatscreen oder ein iphone. Das W3-Konsortium (W3C) entwickelt seit 1994 technische Spezifikationen und Richtlinien z.b. für HTML, CSS, XHTML oder SVG, um die Verknüpfung der unterschiedlichen Technologien, und somit das WWW überhaupt, zu ermöglichen.

Aus alle dem zusammen gibt es viele Möglichkeiten Farben in HTML und CSS fürs Internet zu definieren. Ob man einen Farbnamen, oder den Hexadezimal Code aus einer Farbtabelle wählt, die Farbe sollte korrekt definiert sein und den Standards des entsprechen.
Seit nicht allzu langer Zeit gibt es auch die Möglichkeit die Deckkraft einer Farbe direkt zu dem RGB oder HSL Wert einzugeben. Zu den Wertenangaben für RGB oder HSL, wird ein Parameter (a) für einen zusätzliche Alphakanal eingegeben. Die Deckkraft wir mit Werten von 0.0 - 1.0 geregelt, 0.0 steht für transparent - 1.0 für opak.

Übersicht Farben fürs Web definieren - Farbwerte korrekt eingeben

Kürzel Code Definition Verwendung Browser HTML/CSS Eingabe Beispiel
Darstellung
Links und Quellen:
Über das W3C Konsortium, Geschichte, Zukunft, Ziele usw.

Farbname
(16)

Eine der 16 Grundfarben Farben: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 3.2
HTML 4.01
CSS1
CSS2
CSS current work
Internet
Explorer,
Mozilla,
etc.
<h3 style="color:red">rote Gurke</h3>

rote Gurke

#RRGGBB

 
6-stellige hexdezimale Darstellung, beginnend mit #. Es folgen 3 Paare zur Definition für den Rot-, Grün- oder Blau-Anteil der Farbe, bestehend aus Ziffern (0-9) und/oder Buchstaben (A-F) #RRGGBB HTML 3.2
HTML 4.01 CSS1
CSS2
CSS current work
Internet
Explorer,
Mozilla,
etc.
<h3 style="color:#104E8B">blaue Gurke</h3>

blaue Gurke

rgb(R,G,B)

Für jede Farbe (Rot, Gelb, Blau) wird ein Rotwert;Grünwert;Blauwert (0-255) angebeben CSS1, CSS2, CSS current work Internet
Explorer,
Mozilla
<h3 style="color:rgb(176,48,96)">Maronen sind Esskastanien;/h3>

Maronen sind Esskastanien

rgb(R%,G%,B%)

Angabe in Prozent, ein Rot,Grün,Blau -Wert(0-100 %) CSS1, CSS2, CSS current work Internet
Explorer,
Mozilla
<h3 style="color:rgb(50%,90%,80%)">Frühstück</h3>

Frühstück

#RGB

dreistellige hexadezimale Darstellung, abgekürzte Darstellungsform für Hexadezimal Codes
für den Fall dass sich die beiden Ziffern, jeder (!) der drei (RGB) Farbgruppen gleichen.
Beispiel: aus #FFFFFF (weiß) wird #FFF, aus Rot #CC0000 aus wird #C00.
CSS1, CSS2, CSS current work Internet
Explorer,
Mozilla
<h3 style="color:#ace">Mittagessen</h3>

Mittagessen

Farbname
(SVG)

Farbname, einer aus der der Scalable Vector Graphics (SVG) Specification CSS current work Internet
Explorer
(most),
Mozilla
(all)
<h3 style="color:chocolate">Abendessen</h3>

Abendessen

hsl(H,S%,L%)

Eingabe entsprechend des HSL-Farbraums
  • 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
CSS current work Mozilla,
Google Chrome
<p style="background-color: hsl(125,50%,80%)">-dinner</p>

dinner

rgba(R,G,B,a) oder rgba(R%,G%,B%,a)

(a) zusätzliche Alphakanal Angabe zum RGB-Wert, zur Regelung der Deckkraft der Farbe ( a/ 0.0 = transparent, a/ 1.0 = opak, Werte von 0.0 - 1.0 können verwendet werden) CSS current work Mozilla,
Google Chrome
<p style="background-color: rgba(101,252,203,0.5)"> lunch</p>

lunch

hsla(H,S%,L%,a)

(a) zusätzliche Alphakanal Angabe zum HSL-Wert, zur Regelung der Deckkraft der Farbe( a/ 0.0 = transparent, a/ 1.0 = opak, Werte von 0.0 - 1.0 können verwendet werden) CSS current work Mozilla,
Google Chrome
<p style="background-color: hsla(125,50%,80%,0.5)">breakfast</p>

breakfast


 

Facebook & Co.