Web Farben
Farben im Web werden durch ihre RGB Nummern oder hexadezimal Zahlenreihen angegeben.
Farbwirkungen
Farben nehmen Einfluss auf unser Empfinden, sie geben einer Website eine Grundstimmung und heben durch Kontrast Elemente hervor, sei es als Hintergrund, Rahmen oder Titel.
Farben sind aber nicht für alle Betrachtenden gleich, es sind Farbblindheit zu berücksichtigen,
die Unfähigkeit rot und grün zu unterscheiden oder sonstige Sehschwächen.
Auch kulturelle Unterschiede in der Interpretation müssen miteinbezogen werden,
was für die einen die Farbe der Ökobewegung markiert, signalisiert für andere freie Fahrt oder
die Kriegsflagge.
Also muss ich mir sehr gut überlegen, für wen ich eine Website farblich abstimme!
RGB
rgb(255,255,255)
Im System für Lichtfarben gibt es die drei Farbkanäle RGB: rot, grün, blau. Die Absenz von Farben (farbigem Licht) bedeutet Schwarz, alle drei Farben zusammen erscheinen Weiss. Jeder Kanal kann mehr oder weniger Anteil an der Mischfarbe haben, die Angabe erfolgt entweder in Prozenten oder in einer Range von 0 bis 255.
background-color: rgb(255,255,255); bedeutet alle Kanäle sind voll offen, das Resultat ist weiss.
Hexadezimal
#fff
Einige Browser kennen nur 256 Farben, 216 Farben werden auf Windows und Mac Computern ziemlich gleich angezeigt.
Browser runden die Werte auf die ihnen nächstbekannte Zahlenreihe, was zu Veränderungen der Farben führt.
Die sogenannten 'websicheren Farben' werden als Hexadezimale Zahlenreihe angegeben,
die hat je 2 Stellen für sechs Farbwerte: 00, 33, 66, 99, CC und FF (websichere Farben).
Da jede zweite Stelle der ersten entspricht, kann die Farbe auch gekürzt angegeben werden. #336699 ist die selbe Farbe wie #369.
| #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 |
| #000000 | #111111 | #222222 | #333333 | #444444 | #555555 |
| #666666 | #777777 | #888888 | #999999 | #CCCCCC | #FFFFFF |
Farbnamen
| white #ffffff |
red #ff0000 |
orange #ffA500 |
aqua #00ffff |
maroon #800000 |
navy #000080 |
| silver #c0c0c0 |
green #008000 |
yellow #ffff00 |
fuchsia #ff00ff |
olive #808000 |
black #000000 |
| gray #808080 |
blue #0000ff |
purple #800080 |
lime #00ff00 |
teal #008080 |
Obige Farbnamen sind im CSS 2 gültig, darüber hinaus wurden eine Fülle von Nuancen von den grossen Browsern einigermassen übereinstimmend benannt. Ich beschränke mich auf Hell- und Pastelltöne:
| Farbname | Hexadezimalzahl | Beispiel |
| ivory | #FFFFF0 | |
| floralwhite | #FFFAF0 | |
| lightyellow | #FFFFE0 | |
| lightgoldenrodyellow | #FAFAD2 | |
| lemonchiffon | #FFFACD | |
| cornsilk | #FFF8DC | |
| beige | #F5F5DC | |
| mintcream | #F5FFFA | |
| azure | #F0FFFF | |
| honeydew | #F0FFF0 | |
| lightcyan | #E0FFFF | |
| snow | #FFFAFA | |
| ghostwhite | #F8F8FF | |
| whitesmoke | #F5F5F5 | |
| aliceblue | #F0F8FF | |
| lavender | #E6E6FA | |
| seashell | #FFF5EE | |
| oldlace | #FDF5E6 | |
| lavenderblush | #FFF0F5 | |
| linen | #FAF0E6 | |
| papayawhip | #FFEFD5 | |
| blanchedalmond | #FFEBCD | |
| antiquewhite | #FAEBD7 | |
| navajowhite | #FFDEAD |
Check den Code.