Farbenlehre
Farben spielen im Webdesign eine zentrale Rolle, da sie die Wirkung einer Website massgeblich beeinflussen. Sie schaffen Atmosphäre, lenken Aufmerksamkeit und helfen dabei, Informationen zu strukturieren. Neben gestalterischen Aspekten wie Farbpsychologie oder Kontrasten ist es im technischen Bereich wichtig zu verstehen, wie Farben digital dargestellt werden.
Im Internet werden Farben nicht mit Farbstiften oder Pigmenten erzeugt, sondern durch Licht. Das bedeutet, dass digitale Farben auf Bildschirmen nach dem additiven Farbsystem dargestellt werden – dem sogenannten RGB-System.
Das RGB-Farbsystem
Additives Farbsystem
RGB steht für die drei Grundfarben des Lichts: Red (Rot), Green (Grün) und Blue (Blau).
Alle Farben, die ein Bildschirm darstellen kann, entstehen durch das Mischen dieser drei Lichtfarben in unterschiedlichen Intensitäten.
Jede der drei Farben erhält einen Wert zwischen 0 und 255 – dieser gibt an, wie stark das jeweilige Licht leuchtet.
Fun Facts
Die Werte 0 bis 255 ergeben insgesamt 256 Abstufungen pro Farbkanal. Diese Zahl stammt aus der digitalen Darstellung im Computer, der intern mit 8 Bit pro Farbkanal arbeitet. Ein 8-Bit-Wert kann genau 256 Zustände darstellen (weil 2⁸ = 256).
Da das RGB-System drei solcher Farbkanäle verwendet (Rot, Grün, Blau), ergibt sich:
256 × 256 × 256 = 16’777’216 Farben
Das ist der Standard für alle modernen Bildschirme – man nennt es 24-Bit-Farbtiefe (3 × 8 Bit).
HEX-Farbcodes
Im Webdesign werden Farben oft als HEX-Codes angegeben. Ein HEX-Code ist nur eine andere Schreibweise des RGB-Werts. Er besteht aus einer Raute (#) und sechs Zeichen (0–9, A–F). Jedes Paar steht für einen Farbanteil: Rot – Grün – Blau.
Beispiel Orange:
Orange = RGB(255, 159, 0)
So funktioniert die Umrechnung:
Das Hexadezimalsystem zählt von 0–15 (0–9, A=10 … F=15).
Zwei HEX-Zeichen bilden einen Wert von 0–255 (8 Bit).
Darum entsprechen FF = 255, 9F = 159, 00 = 0.
HEX: #FF9F00
Warum HEX?
- Kompakt (6 Zeichen),
- standardisiert in CSS,
- vom Browser direkt verstanden – und es deckt wie RGB 16,7 Mio. Farben ab (3×8 Bit).
Hinweis:
Die Kurzform #RGB ist nur möglich, wenn beide Zeichen eines Paares identisch sind (z. B. #FF9900 → #F90). Für #FF9F00 gibt es keine Kurzform.
Der Zusammenhang zwischen RGB und HEX
RGB und HEX sind zwei verschiedene Darstellungsformen desselben Farbsystems.
Beide beruhen auf der additiven Farbmischung von Rot, Grün und Blau, unterscheiden sich jedoch in der Art der Notation:
RGB nutzt dezimal (0–255),
HEX nutzt hexadezimal (00–FF).
Ein Farbwert wie RGB(255, 128, 0) kann also auch als #FF8000 angegeben werden – beide bedeuten exakt die gleiche Farbe.
In der Praxis kann man RGB und HEX frei austauschen, da moderne Webbrowser beide Formate verstehen. Welches System man verwendet, hängt oft vom Arbeitsablauf ab:
RGB wird eher in Designprogrammen wie Photoshop oder Figma eingesetzt.
HEX wird meist im CSS-Code einer Website verwendet.
Bedeutung für die Gestaltung
Das Verständnis von RGB und HEX ist wichtig, um Farben gezielt und konsistent einzusetzen.
Eine durchdachte Farbwahl unterstützt die Lesbarkeit, die Orientierung und die Stimmung einer Website.
Mit klar definierten Farbwerten bleibt das Design auf allen Geräten gleich – egal ob am Monitor, Tablet oder Smartphone.
So wird sichergestellt, dass Farben nicht zufällig wirken, sondern bewusst geplant sind und zum Gesamteindruck der Website beitragen.
Farben sind damit nicht nur ein gestalterisches Mittel, sondern auch ein technisches Werkzeug, das das visuelle Erscheinungsbild einer Website präzise steuert.
Farben und Accessibility
Farben spielen auch eine wichtige Rolle für die Barrierefreiheit (Accessibility) einer Website. Nicht alle Menschen nehmen Farben gleich wahr – insbesondere Personen mit einer Sehbehinderung oder Farbschwäche.
Deshalb ist es wichtig, dass wichtige Informationen nicht nur über Farbe vermittelt werden. Texte, Symbole oder Kontraste sollten zusätzlich durch Formen, Beschriftungen oder Helligkeitsunterschiede unterstützt werden.
Ein gutes Beispiel:
Fehlerfelder sollten nicht nur rot, sondern auch mit einem Symbol oder Text („Fehler“) gekennzeichnet sein.
Links sollten nicht nur farblich, sondern auch unterstrichen sein.
Zudem sollte der Farbkontrast zwischen Text und Hintergrund ausreichend hoch sein, damit Inhalte auch bei eingeschränktem Sehvermögen gut lesbar bleiben.
Tools wie der „Contrast Checker“ (z. B. von WebAIM.org) helfen, diese Kontrastwerte zu prüfen.
