Farben im Webdesign
Farben fürs Web definieren - RGB, RGBa, HSL, HSLa Werte, Hexadezimal Codes für HTML + CSS richtig eingeben
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.
| Kürzel Code | Definition | Verwendung | Browser | HTML/CSS Eingabe Beispiel Darstellung |
|---|---|---|---|---|
|
Links und Quellen: Über das W3C Konsortium, Geschichte, Zukunft, Ziele usw. | ||||
Farbname |
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 |
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
|
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 |
Weitere Themen in der Rubrik Webdesign
- Sicher ist sicher - die 216 websicheren Farben
- Farben fürs Web definieren. RGB, HSL, RGBA oder HSLA, per HTML und CSS ergeben
- Basic's aus der Farbtheorie - eigene Farbpaletten erstellen
- RGBA, HSLA und CSS opacity - gibt Farben Transparenz
- Das Web wird bunt! The Sixteen Named Colors, - die VGA Farbpalette und 16 Grundfarben
- Farben im Webdesign - Das Farbspektrum mit Hex-Codes
- Farbpaletten von eigenen Bildern
Pflanzzeiten 2024
Sep./Okt.
24.09. 20:00 Uhr bis 09.10. 13:00 Uhr
Okt./Nov.
22.10. 04:00 Uhr bis 05.11. 17:00 Uhr
*****
Gründüngung
Tipps aus der Paxis
*****
Serie über Urpflanzen
Algen und Flechten
Die mutigen Landgänger
*****
Moose
die harten Arbeiter, die ständig neuen Lebensraum schaffen
*****
Chlorophyll
Der Stoff aus dem das Leben ist
*****