HTML/CSS Farbcodes

Farben lassen sich in HTML ganz einfach per hexadezimalem Farbcode aufrufen.

Allgemein sieht ein Aufruf von Farben so aus:

#RRGGBB;

R: Rot/Red

G: Grün/Green

B: Blau/Blue

Wie aus dem allgemeinem Code ersichtlich ist, arbeitet man also mit den drei Grundfarben und kann diese beliebig mischen. Für jede Farbe stehen zwei Stellen zu Verfügung, die durch hexadezimales Ausfüllen mit einem Wertebereich von je 00 bis FF (Hex), also 00 bis 255 (Dez) belegt werden können.

(Wenn Sie Hilfe zum Hexadezimalsystem brauchen, lesen Sie hier weiter: Kurze Einführung ins Hexadezimalsystem) 

Dadurch ergeben sich 256^3 = 16 777 216 mögliche Farbkombinationen.

Farbbeispiele

Den Farbcode versteht man am besten, wenn man sich einige Farbbeispiele ansieht.

Als Beispiel das Farbschema von Computer-Masters.de:

© Computer-Masters.de

Aus der Tabelle wird ersichtlich, dass man Graustufen, sowie Schwarz und Weiß erhält, indem man bei allen drei Grundfarben jeweils die gleichen Werte einträgt. Die Extremwerte davon sind #000000; für Schwarz und #ffffff; für Weiß. Des weiteren gilt: je höher die Werte, desto heller und je niedriger, desto dunkler die Farbe.

Wie die Farben genau im HTML Code aufgerufen werden können Sie verstehen, indem Sie den Code der obigen Tabelle ansehen:

<table style="width: 300px; border: 1px solid #2a2a2a;">
<tbody>
<tr>
<td style="color: #ffffff; background-color: #000000;">#000000;</td>
</tr>
<tr>
<td style="color: #000000; background-color: #ffffff;">#FFFFFF;</td>
</tr>
<tr>
<td style="color: #000000; background-color: #7f7f7f;">#7f7f7f;</td>
</tr>
<tr>
<td style="color: #000000; background-color: #4a4a4a;">#4a4a4a;</td>
</tr>
<tr>
<td style="color: #ffffff; background-color: #2a2a2a;">#2a2a2a;</td>
</tr>
<tr>
<td style="color: #000000; background-color: #2d8c2a;">#2d8c2a;</td>
</tr>
<tr>
<td style="color: #000000; background-color: #0a8f0f;">#0a8f0f;</td>
</tr>
</tbody>
</table>
<p>
<em>&copy; Computer-Masters.de</em></p>

Die Farben werden in style-Bereich mit ‚color‘ für Textfarbe und ‚background-color‘ für Hintergrundfarbe aufgerufen. Elemente wie Tabellen können außerdem mit dem Attribut ‚border‘ einen farbigen Rahmen erhalten. Die Farbcodes können ebenso in CSS benutzt werden.

Farben ohne Codes

Viele Farben können auch ohne den hexadezimalen Code aufgerufen werden, hier einige Beispiele:

Der Code für diese Tabelle sieht dann so aus:

<table style="width: 300px; border: 1px solid #2a2a2a;">
<tbody>
<tr>
<td style="color: white; background-color: black;">black;</td>
</tr>
<tr>
<td style="color: black; background-color: white;">white;</td>
</tr>
<tr>
<td style="color: black; background-color: green;">green;</td>
</tr>
<tr>
<td style="color: white; background-color: blue;">blue;</td>
</tr>
<tr>
<td style="color: black; background-color: yellow;">yellow;</td>
</tr>

Allerdings sind hier nicht alle 16 777 216 möglichen Farbkombinationen abgedeckt.