In HTML könnt ihr Farben einfügen um z.B. Schriftzüge und Texte in verschiedenen Farben darzustellen. Im folgenden Artikel erklären wir euch, welche Befehle ihr dazu benötigt. Außerdem findet ihr eine Farbtabelle, die euch die wichtigsten Farben für HTML im Überblick zeigt.
HTML: Farben einfügen - Einfache Methode
Bis zu HTML Version 4 konnte man Farben einfach mit dem HTML-Tag <font color=> und der entsprechenden Farbe (siehe Farbtabelle unten) einfügen. Um einen Text in blau darzustellen, schreibt man also
</font color= „blue“>Beispieltext</font>
Die markierte Textstelle erscheint dann in der ausgewählten Farbe: Beispieltext.
Hinweis: Farben mittels <font color= > einzufügen entspricht nicht mehr dem neuesten Stand der Webseitengestaltung - inzwischen werden Farben meistens mit CSS in das HTML-Dokument eingebunden (lest zum Unterschied zwischen HTML und CSS auch den Artikel Was ist HTML? Und was hat das mit CSS zu tun?) Für Anfänger ist die HTML-Einfärbung trotzdem eine gute Methode zum Lernen, vor allem wenn nur einzelne Textstellen in einer anderen Farbe markiert werden sollen.
HTML: Farben einfügen - Alternative Methode
Weitere HTML-Tags um die Farbe des HTML-Dokuments zu ändern sind (Statt „Farbe“ fügt ihr einfach die gewünschte Farbe ein - die ausgewählte Stelle erscheint dann genau wie bei dem Tag<font color> in der entsprechenden Farbe):
Hintergrundfarbe der gesamten Webseite ändern
<body style=“background“:Farbe>Text</body>
Einzelne Textstellen farblich markieren (analog zu <font>)
<span style=“color:Farbe“>Text</span>
Tabellen-Hintergrundfarbe ändern
<table style=“background:Farbe“>Text</table>
Farbe eines Links ändern
<a style=“color:Farbe“>Text</span>
HTML-Farbtabelle
Hier noch die Tabelle mit den am häufigsten verwendeten Farben für HTM-Dokumente. Wichtig: Ihr könnt die Farben entweder mit ihrer Bezeichung ausschreiben oder den entsprechenden Hexacode verwenden. Nur beides zusammen geht nicht! Lest auch den Artikel CSS Background Image: Befehle, Positionen und mehr, um zu erfahren, wie ihr ein Hintergrundbild in eure Webseite einbaut.
Farbe | Hexacode |
aliceblue | #f0f8ff |
antiquewhite | #faebd7 |
aqua | #00ffff |
aquamarine | #7fffd4 |
azure | #f0ffff |
beige | #f5f5dc |
bisque | #ffe4c4 |
blanchedalmond | #ffebcd |
blue | #0000ff |
blueviolet | #8a2be2 |
brown | #a52a2a |
burlywood | #deb887 |
cadetblue | #5f9ea0 |
chartreuse | #7fff00 |
chocolate | #d2691e |
coral | #ff7f50 |
cornflowerblue | #6495ed |
cornsilk | #fff8dc |
crimson | #dc143c |
cyan | #00ffff |
darkblue | #00008b |
darkcyan | #008b8b |
darkgoldenrod | #b8860b |
darkgreen | #006400 |
darkkhaki | #bdb76b |
darkmagenta | #8b008b |
darkolivegreen | #556B2f |
darkorange | #ff8c00 |
darkorchid | #9932cc |
darkred | #8b0000 |
darksalmon | #e9967a |
darkseagreen | #8fbc8f |
darkslateblue | #483d8b |
darkslategray | #2f4f4f |
darkturquoise | #00ced1 |
darkviolet | #9400d3 |
deeppink | #ff1493 |
deepskyblue | #00bfff |
dodgerblue | #1e90ff |
firebrick | #b22222 |
floralwhite | #fffaf0 |
forestgreen | #228b22 |
fuchsia | #ff00ff |
ghostwhite | #f8f8ff |
gold | #ffd700 |
goldenrod | #daa520 |
green | #008000 |
greenyellow | #adff2f |
honeydew | #f0fff0 |
hotpink | #ff69b4 |
indianred | #cd5c5c |
indigo | #4b0082 |
ivory | #fffff0 |
khaki | #f0e68c |
lavender | #e6e6fa |
lavenderblush | #fff0f5 |
lawngreen | #7cfc00 |
lemonchiffon | #fffacd |
lightblue | #add8e6 |
lightcoral | #f08080 |
lightcyan | #e0ffff |
lightgoldenrodyellow | #fafad2 |
lightgreen | #90ee90 |
lightpink | #ffb6c1 |
lightsalmon | #ffa07a |
lightseagreen | #20b2aa |
lightskyblue | #87cefa |
lightslategray | #778899 |
lightsteelblue | #b0c4de |
lightyellow | #ffffe0 |
lime | #00ff00 |
limegreen | #32cd32 |
linen | #faf0e6 |
magenta | #ff00ff |
maroon | #800000 |
mediumaquamarine | #66cdaa |
mediumblue | #0000cd |
mediumorchid | #ba55d3 |
mediumpurple | #9370db |
mediumseagreen | #3cb371 |
mediumslateblue | #7b68ee |
mediumspringgreen | #00fa9a |
mediumturquoise | #48d1cc |
mediumvioletred | #c71585 |
midnightblue | #191970 |
mintcream | #f5fffa |
mistyrose | #ffe4e1 |
moccasin | #ffe4b5 |
navajowhite | #ffdead |
navy | #000080 |
oldlace | #fdf5e6 |
olive | #808000 |
olivedrab | #6b8e23 |
orange | #ffa500 |
orangered | #ff4500 |
orchid | #da70d6 |
palegoldenrod | #eee8aa |
palegreen | #98fb98 |
paleturquoise | #afeeee |
palevioletred | #db7093 |
papayawhip | #ffefd5 |
peachpuff | #ffdab9 |
peru | #cd853f |
pink | #ffc0cb |
plum | #dda0dd |
powderblue | #b0e0e6 |
purple | #800080 |
red | #ff0000 |
rosybrown | #bc8f8f |
royalblue | #4169e1 |
saddlebrown | #8b4513 |
salmon | #fa8072 |
sandybrown | #f4a460 |
seagreen | #2e8b57 |
seashell | #fff5ee |
sienna | #a0522d |
skyblue | #87ceeb |
slateblue | #6a5acd |
slategray | #708090 |
snow | #fffafa |
springgreen | #00ff7f |
steelblue | #4682b4 |
tan | #d2b48c |
teal | #008080 |
thistle | #d8bfd8 |
tomato | #ff6347 |
turquoise | #40e0d0 |
violet | #ee82ee |
wheat | #f5deb3 |
whitesmoke | #f5f5f5 |
yellow | #ffff00 |
yellowgreen | #9acd32 |
white | #ffffff |
gainsboro | #dcdcdc |
lightgrey | #d3d3d3 |
silver | #c0c0c0 |
darkgray | #a9a9a9 |
gray | #808080 |
dimgray | #696969 |
black | #000000 |
Mit diesen Farben, solltet ihr fürs erste genügend Auswahlmöglichkeiten für eure Webseite haben. Falls ihr noch mehr Farben wollt, werdet ihr auf der folgenden Übersichtsseite fündig.
Bildquelle: Soulart
