Willkommen

Farbe dient der visuellen menschlichen Wahrnehmung zur Kontrasterhöhung, aber auch psychologisch wirkt jede einzelne Farbe anders. Farben wecken Gefühle, Farben lassen erinnern, warnen, emotionalisieren. Dabei ist die tatsächliche Bedeutung von Farben jedoch kulturell stark unterschiedlich geprägt. Umso wichtiger ist der bewusste Umgang mit Farben – sowohl im Screendesign, als auch in der Umsetzung des Layouts in CSS und HTML. Farbtabelle.net bietet einen Querschnitt zum Thema Farbe im Internet – von Farbtabellen, Definition von Farben in CSS und HTML hin zur Bedeutung von Farben, einer kleinen Sammlung an Literaturtipps und Informationen über Druckerarten und 3D-Drucker.


HTML Farbtabelle (Web-sichere Farben)

FarbeHex-WertRGB-Wert
#FFFFFFR: 255, G: 255, B: 255
#FFFFCCR: 255, G: 255, B: 204
#FFFF99R: 255, G: 255, B: 153
#FFFF66R: 255, G: 255, B: 102
#FFFF33R: 255, G: 255, B: 51
#FFFF00R: 255, G: 255, B: 0
#FFCC00R: 255, G: 204, B: 0
#FFCC66R: 255, G: 204, B: 102
#FFCC33R: 255, G: 204, B: 51
#CC9933R: 204, G: 153, B: 51
#996600R: 153, G: 102, B: 0
#CC9900R: 204, G: 153, B: 0
#FF9900R: 255, G: 153, B: 0
#CC6600R: 204, G: 102, B: 0
#993300R: 153, G: 51, B: 0
#CC6633R: 204, G: 102, B: 51
#663300R: 102, G: 51, B: 0
#FF9933R: 255, G: 153, B: 51
#FF6600R: 255, G: 102, B: 0
#CC3300R: 204, G: 51, B: 0
#996633R: 153, G: 102, B: 51
#330000R: 51, G: 0, B: 0
#663333R: 102, G: 51, B: 51
#CC6666R: 204, G: 102, B: 102
#FFCCCCR: 255, G: 204, B: 204
#FF9966R: 255, G: 153, B: 102
#FF6633R: 255, G: 102, B: 51
#FF3333R: 255, G: 51, B: 51
#CC3333R: 204, G: 51, B: 51
#FF6666R: 255, G: 102, B: 102
#660000R: 102, G: 0, B: 0
#993333R: 153, G: 51, B: 51
#CC9999R: 204, G: 153, B: 153
#996666R: 153, G: 102, B: 102
#CC9966R: 204, G: 153, B: 102
#FFCCFFR: 255, G: 204, B: 255
#CC6699R: 204, G: 102, B: 153
#993366R: 153, G: 51, B: 102
#660033R: 102, G: 0, B: 51
#990033R: 153, G: 0, B: 51
#FF3366R: 255, G: 51, B: 102
#CC0033R: 204, G: 0, B: 51
#FF0033R: 255, G: 0, B: 51
#FF9999R: 255, G: 153, B: 153
#CC3366R: 204, G: 51, B: 102
#CC3399R: 204, G: 51, B: 153
#FF99CCR: 255, G: 153, B: 204
#FF66CCR: 255, G: 102, B: 204
#FF99FFR: 255, G: 153, B: 255
#FF6699R: 255, G: 102, B: 153
#CC0066R: 204, G: 0, B: 102
#FF0066R: 255, G: 0, B: 102
#FF3399R: 255, G: 51, B: 153
#FF0099R: 255, G: 0, B: 153
#FF33CCR: 255, G: 51, B: 204
#FF00CCR: 255, G: 0, B: 204
#FF66FFR: 255, G: 102, B: 255
#FF33FFR: 255, G: 51, B: 255
#FF00FFR: 255, G: 0, B: 255
#CC0099R: 204, G: 0, B: 153
#990066R: 153, G: 0, B: 102
#CC66CCR: 204, G: 102, B: 204
#CC33CCR: 204, G: 51, B: 204
#CC99FFR: 204, G: 153, B: 255
#CC66FFR: 204, G: 102, B: 255
#CC33FFR: 204, G: 51, B: 255
#993399R: 153, G: 51, B: 153
#CC00CCR: 204, G: 0, B: 204
#CC00FFR: 204, G: 0, B: 255
#9900CCR: 153, G: 0, B: 204
#990099R: 153, G: 0, B: 153
#660066R: 102, G: 0, B: 102
#9933CCR: 153, G: 51, B: 204
#660099R: 102, G: 0, B: 153
#990000R: 153, G: 0, B: 0
#CC0000R: 204, G: 0, B: 0
#FF0000R: 255, G: 0, B: 0
#FF3300R: 255, G: 51, B: 0
#FFCC99R: 255, G: 204, B: 153
#CCCCCCR: 204, G: 204, B: 204
#999999R: 153, G: 153, B: 153
#666666R: 102, G: 102, B: 102
#333333R: 51, G: 51, B: 51
#000000R: 0, G: 0, B: 0
#000033R: 0, G: 0, B: 51
#330033R: 51, G: 0, B: 51
#330066R: 51, G: 0, B: 102
#6600CCR: 102, G: 0, B: 204
#6600FFR: 102, G: 0, B: 255
#663366R: 102, G: 51, B: 102
#996699R: 153, G: 102, B: 153
#CC99CCR: 204, G: 153, B: 204
#663399R: 102, G: 51, B: 153
#6633CCR: 102, G: 51, B: 204
#6633FFR: 102, G: 51, B: 255
#9900FFR: 153, G: 0, B: 255
#9933FFR: 153, G: 51, B: 255
#9966CCR: 153, G: 102, B: 204
#9966FFR: 153, G: 102, B: 255
#9999FFR: 153, G: 153, B: 255
#CCCCFFR: 204, G: 204, B: 255
#3366CCR: 51, G: 102, B: 204
#006699R: 0, G: 102, B: 153
#6699CCR: 102, G: 153, B: 204
#0066CCR: 0, G: 102, B: 204
#336699R: 51, G: 102, B: 153
#0000CCR: 0, G: 0, B: 204
#3333CCR: 51, G: 51, B: 204
#3333FFR: 51, G: 51, B: 255
#3300FFR: 51, G: 0, B: 255
#333366R: 51, G: 51, B: 102
#666699R: 102, G: 102, B: 153
#6666FFR: 102, G: 102, B: 255
#003366R: 0, G: 51, B: 102
#6699FFR: 102, G: 153, B: 255
#99CCFFR: 153, G: 204, B: 255
#0033CCR: 0, G: 51, B: 204
#000099R: 0, G: 0, B: 153
#000066R: 0, G: 0, B: 102
#0000FFR: 0, G: 0, B: 255
#3366FFR: 51, G: 102, B: 255
#0033FFR: 0, G: 51, B: 255
#0066FFR: 0, G: 102, B: 255
#3300CCR: 51, G: 0, B: 204
#330099R: 51, G: 0, B: 153
#333399R: 51, G: 51, B: 153
#6666CCR: 102, G: 102, B: 204
#9999CCR: 153, G: 153, B: 204
#3399CCR: 51, G: 153, B: 204
#66CCFFR: 102, G: 204, B: 255
#0099CCR: 0, G: 153, B: 204
#3399FFR: 51, G: 153, B: 255
#00CCFFR: 0, G: 204, B: 255
#99FFFFR: 153, G: 255, B: 255
#66FFFFR: 102, G: 255, B: 255
#33FFFFR: 51, G: 255, B: 255
#0099FFR: 0, G: 153, B: 255
#33CCFFR: 51, G: 204, B: 255
#00FFFFR: 0, G: 255, B: 255
#00CCCCR: 0, G: 204, B: 204
#003399R: 0, G: 51, B: 153
#009999R: 0, G: 153, B: 153
#669999R: 102, G: 153, B: 153
#99CCCCR: 153, G: 204, B: 204
#CCFFFFR: 204, G: 255, B: 255
#33CCCCR: 51, G: 204, B: 204
#66CCCCR: 102, G: 204, B: 204
#339999R: 51, G: 153, B: 153
#336666R: 51, G: 102, B: 102
#006666R: 0, G: 102, B: 102
#003333R: 0, G: 51, B: 51
#00FFCCR: 0, G: 255, B: 204
#33FFCCR: 51, G: 255, B: 204
#66FFCCR: 102, G: 255, B: 204
#00CC99R: 0, G: 204, B: 153
#33CC99R: 51, G: 204, B: 153
#99FFCCR: 153, G: 255, B: 204
#00FF99R: 0, G: 255, B: 153
#339966R: 51, G: 153, B: 102
#006633R: 0, G: 102, B: 51
#336633R: 51, G: 102, B: 51
#669966R: 102, G: 153, B: 102
#66CC66R: 102, G: 204, B: 102
#66FF66R: 102, G: 255, B: 102
#339933R: 51, G: 153, B: 51
#99FF99R: 153, G: 255, B: 153
#99CC99R: 153, G: 204, B: 153
#CCFFCCR: 204, G: 255, B: 204
#66FF99R: 102, G: 255, B: 153
#33FF99R: 51, G: 255, B: 153
#33CC66R: 51, G: 204, B: 102
#00CC66R: 0, G: 204, B: 102
#66CC99R: 102, G: 204, B: 153
#009966R: 0, G: 153, B: 102
#009933R: 0, G: 153, B: 51
#33FF66R: 51, G: 255, B: 102
#00FF66R: 0, G: 255, B: 102
#00FF33R: 0, G: 255, B: 51
#CCFF99R: 204, G: 255, B: 153
#99FF66R: 153, G: 255, B: 102
#99FF33R: 153, G: 255, B: 51
#33FF33R: 51, G: 255, B: 51
#33CC33R: 51, G: 204, B: 51
#66FF33R: 102, G: 255, B: 51
#00FF00R: 0, G: 255, B: 0
#66CC33R: 102, G: 204, B: 51
#006600R: 0, G: 102, B: 0
#003300R: 0, G: 51, B: 0
#009900R: 0, G: 153, B: 0
#33FF00R: 51, G: 255, B: 0
#66FF00R: 102, G: 255, B: 0
#99FF00R: 153, G: 255, B: 0
#66CC00R: 102, G: 204, B: 0
#00CC00R: 0, G: 204, B: 0
#00CC33R: 0, G: 204, B: 51
#33CC00R: 51, G: 204, B: 0
#339900R: 51, G: 153, B: 0
#99CC66R: 153, G: 204, B: 102
#669933R: 102, G: 153, B: 51
#99CC33R: 153, G: 204, B: 51
#336600R: 51, G: 102, B: 0
#669900R: 102, G: 153, B: 0
#99CC00R: 153, G: 204, B: 0
#CCFF66R: 204, G: 255, B: 102
#CCFF33R: 204, G: 255, B: 51
#CCFF00R: 204, G: 255, B: 0
#999900R: 153, G: 153, B: 0
#CCCC00R: 204, G: 204, B: 0
#CCCC33R: 204, G: 204, B: 51
#333300R: 51, G: 51, B: 0
#666600R: 102, G: 102, B: 0
#999933R: 153, G: 153, B: 51
#CCCC66R: 204, G: 204, B: 102
#666633R: 102, G: 102, B: 51
#999966R: 153, G: 153, B: 102
#CCCC99R: 204, G: 204, B: 153

In HTML gibt es eine Palette sogenannter "websicherer Farben". In Zeiten, als die meisten Monitore nur 256 Farben darstellen konnten, kam diese HTML-Farbtabelle zum Einsatz. Mittlerweile ist die Anzahl der HTML Farben und deren Einsatz schier unbegrenzt.

So werden Farben in HTML eingesetzt

Mit Hilfe von Farbcodes lassen sich zum Beispiel die Farbe des Textes, des Hintergrunds oder einzelner Tabellen festlegen.

Ändern der Farbe des Hintergrunds mit HTML:

< body style="background:#fb0c11">

Ändern der Farbe des Textes mit HTML (Beispiel: rot)

< span style="color:#fb0c11">

Ändern der Farbe einer Tabellenspalte mit HTML Beispiel: rot)

< table style="background:#fb0c11">