Farben beim Webseiten Design mit HTML und CSS nutzen
Posted in Allgemeines, CSS, Grundlagen, HTML, Webdesign on 08/01/2010 09:42 by Hoegerl_KarlBei der Erstellung von Webseiten wird durch die Style Guides das Webdesign festgelegt. Die festgelegten Regeln werden dann mit HTL und Cascading Style Sheets ( CSS ) umgesetzt. An verschiedenen Stellen muss eine Definition von Farben angegeben werden, wie zum Beispiel bei der Hintergrundfarbe einer Webseite.
Webseite mit definierter Hintergrundfarbe in HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hintergrundfarbe einstellen mit HTML</title>
</head>
<body background="#ccccff">
Der Berufene hat kein eigenes Herz.
Er macht das Herz der Leute zu seinem Herzen.
Zu den Guten bin ich gut,
zu den Nichtguten bin ich auch gut;
denn das Leben ist die Güte.
Zu den Treuen bin ich treu,
zu den Untreuen bin ich auch treu;
denn das Leben ist die Treue.
Der Berufene lebt in der Welt ganz still
und macht sein Herz für die Welt weit.
Die Leute alle blicken und horchen nach ihm.
Und der Berufene nimmt sie alle an als seine Kinder.
Laotse
</body>
</html>Mit dem Attribut background wird die Farbe eingestellt. Bei Webseiten wird die additive Farbmischung angewendet. Daher werden die Farben der Webseite aus den Grundfarben Rot, Grün und Blau zusammengesetzt und RGB Farbmischung genannt.
Da Computer Digital funktionieren gibt es keine stufenlose Farbmischung, sondern pro Grundfarbe 256 Farbstufen. Somit stehen bei drei Grundfarben ca. 16,7 Mio. Farben zur Verfügung.
Wenn alle drei Grundfarbe den Wert 0 haben, dann hat die Webseite einen schwarzen Hintergrund. Rot, Grün und Blau haben die volle Farbintensität bei 255. Somit wird bei dieser Einstellung der drei Grundfarben ein weisser Hintergrund angezeigt.
Farbwahl mit dem Hexadezimalsystem
Computer können nicht gut mit unserem Dezimalsystem arbeiten. Daher wird das Hexadezimalsystem verwendet.
Dezimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Hexadezimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Wir benutzen im Hexadezimalsystem 2 Stellen um die 256 Stufen pro Grundfarbe einstellen zu können.
Farbe | Rot | Grün | Blau | Attribut "background" |
69 | ff | 69 | #69ff69 | |
00 | 00 | cc | #0000cc | |
ff | 66 | 66 | #ff6666 |
Hier ein Beispiel mit dem kompletten Tag <body background=”#ff6666″>…</body>
Der Farbauswahl wird immer das Nummernzeichen # vorangestellt. Damit wird die hexadezimale Angabe der Farbwerte gekennzeichnet.
Webseite mit definierter Hintergrundfarbe in HTML und CSS
Heute werden Cascading Style Sheets ( CSS ) zur Trennung von Inhalt und Design genutzt. Dann sieht der Quellcode folgendermassen aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hintergrundfarbe einstellen mit HTML und CSS</title>
<!-- Farbeinstellung mit CSS -->
<style type="text/css">
body { background-color:#ccccff; }
</style>
</head>
<body>
Der Sinn erzeugt.
Das Leben nährt.
Die Umgebung gestaltet.
Die Einflüsse vollenden.
Darum ehren alle Wesen den Sinn
und schätzen das Leben.
Der Sinn wird geehrt,
das Leben wird geschätzt
ohne äußere Ernennung, ganz von selbst.
Also: der Sinn erzeugt, das Leben nährt,
läßt wachsen, pflegt,
vollendet, hält,
bedeckt und schirmt.
Laotse
</body>
</html>
Dies ist eine von drei Möglichkeiten, die CSS bietet.
Reine Webfarben
Wenn Gif Grafiken auf farbige Hintergründe gesetzt werden, dann gibt es je nach Browser Version einen Farbsaum wenn die gleiche Farbe in der Grafik verwendet wird. Dann sieht das Design unprofessionell aus!
Dies kann durch die Nutzung von sogenannten reinen Webfarben vermieden werden. Reine Webfarben sind alle Farben deren Hexadezimal Wert pro Stelle durch 3 teilbar ist. Bei beidenDiese Zahlen haben in der Tabelle oben einen hellblauen Hintergrund. Zudem muss bei beiden Stellen des Farbwerts die gleiche Zahl stehen.
Beispiel:
- Grundfarbe Rot
- Auswahl von “3″ aus der Tabelle.
- Ergänzung auf zwei Stellen = “33″
- Grundfarbe Grün
- Auswahl von “c” aus der Tabelle
- Ergänzung auf zwei Stellen = “cc”
- Grundfarbe Blau
- Auswahl von “f” aus der Tabelle
- Ergänzung auf zwei Stellen = “ff”
- Zusammensetzen der Farbe R+G+B = “#33ccff”
Die Ursache für dieses Phänomen ist die Tatsache, dass jedes Betriebssystem 40 Farben für eigene Zwecke nutzt. Somit bleiben 216 Farben bei 8 Bit Grafiken übrig. Teilt man nach dem obigen Schema die Hexadezimal Zahlen dann werden 216 Farben ausgewählt.
Farbtabelle der 216 reinen Webfarben
| #000000 | #000033 | #000066 | #000099 | #0000cc | #0000ff |
| #003300 | #003333 | #003366 | #003399 | #0033cc | #0033ff |
| #006600 | #006633 | #006666 | #006699 | #0066cc | #0066ff |
| #009900 | #009933 | #009966 | #009999 | #0099cc | #0099ff |
| #00cc00 | #00cc33 | #00cc66 | #00cc99 | #00cccc | #00ccff |
| #00ff00 | #00ff33 | #00ff66 | #00ff99 | #00ffcc | #00ffff |
| #330000 | #330033 | #330066 | #330099 | #3300cc | #3300ff |
| #333300 | #333333 | #333366 | #333399 | #3333cc | #3333ff |
| #336600 | #336633 | #336666 | #336699 | #3366cc | #3366ff |
| #339900 | #339933 | #339966 | #339999 | #3399cc | #3399ff |
| #33cc00 | #33cc33 | #33cc66 | #33cc99 | #33cccc | #33ccff |
| #33ff00 | #33ff33 | #33ff66 | #33ff99 | #33ffcc | #33ffff |
| #660000 | #660033 | #660066 | #660099 | #6600cc | #6600ff |
| #663300 | #663333 | #663366 | #663399 | #6633cc | #6633ff |
| #666600 | #666633 | #666666 | #666699 | #6666cc | #6666ff |
| #669900 | #669933 | #669966 | #669999 | #6699cc | #6699ff |
| #66cc00 | #66cc33 | #66cc66 | #66cc99 | #66cccc | #66ccff |
| #66ff00 | #66ff33 | #66ff66 | #66ff99 | #66ffcc | #66ffff |
| #990000 | #990033 | #990066 | #990099 | #9900cc | #9900ff |
| #993300 | #993333 | #993366 | #993399 | #9933cc | #9933ff |
| #996600 | #996633 | #996666 | #996699 | #9966cc | #9966ff |
| #999900 | #999933 | #999966 | #999999 | #9999cc | #9999ff |
| #99cc00 | #99cc33 | #99cc66 | #99cc99 | #99cccc | #99ccff |
| #99ff00 | #99ff33 | #99ff66 | #99ff99 | #99ffcc | #99ffff |
| #cc0000 | #cc0033 | #cc0066 | #cc0099 | #cc00cc | #cc00ff |
| #cc3300 | #cc3333 | #cc3366 | #cc3399 | #cc33cc | #cc33ff |
| #cc6600 | #cc6633 | #cc6666 | #cc6699 | #cc66cc | #cc66ff |
| #cc9900 | #cc9933 | #cc9966 | #cc9999 | #cc99cc | #cc99ff |
| #cccc00 | #cccc33 | #cccc66 | #cccc99 | #cccccc | #ccccff |
| #ccff00 | #ccff33 | #ccff66 | #ccff99 | #ccffcc | #ccffff |
| #ff0000 | #ff0033 | #ff0066 | #ff0099 | #ff00cc | #ff00ff |
| #ff3300 | #ff3333 | #ff3366 | #ff3399 | #ff33cc | #ff33ff |
| #ff6600 | #ff6633 | #ff6666 | #ff6699 | #ff66cc | #ff66ff |
| #ff9900 | #ff9933 | #ff9966 | #ff9999 | #ff99cc | #ff99ff |
| #ffcc00 | #ffcc33 | #ffcc66 | #ffcc99 | #ffcccc | #ffccff |
| #ffff00 | #ffff33 | #ffff66 | #ffff99 | #ffffcc | #ffffff |
- Grundfarbe Grün
- Auswahl von “c” aus der Tabelle
- Ergänzung auf zwei Stellen = “cc”
Zuletzt aktualisiert von .
