Die Farbsysteme im Überblick
| System | Werte | Wofür |
|---|---|---|
| HEX | #000000 bis #FFFFFF | Web, CSS, Design-Werkzeuge – die kompakteste Schreibweise |
| RGB | 0–255 je Kanal | Bildschirm, Kameras, Bildbearbeitung |
| HSL | Farbton 0–360°, Sättigung, Helligkeit | Web und CSS, praktisch für Farbvarianten |
| HSV/HSB | Farbton, Sättigung, Hellwert | Grafikprogramme, Farbwähler |
| CMYK | Cyan, Magenta, Yellow, Key in % | Vierfarbdruck |
RGB, HEX, HSL und HSV beschreiben alle dieselben Bildschirmfarben, nur anders sortiert – die Umrechnung dazwischen ist exakt und verlustfrei. CMYK ist die Ausnahme: Dort wechselt man das Medium, und dabei geht Farbe verloren.
Warum HSL beim Gestalten hilft
In RGB ist schwer zu sagen, wie man eine Farbe „etwas heller" macht – alle drei Werte müssten passend verschoben werden. In HSL geht genau das mit einer Zahl:
- Gleicher Farbton, andere Helligkeit ergibt eine harmonische Abstufung für Hover-Zustände, Rahmen und Hintergründe.
- Gleiche Helligkeit, anderer Farbton ergibt Farben, die nebeneinander gleich stark wirken.
- Sättigung reduzieren ergibt gedeckte Varianten für Flächen, auf denen Text stehen soll.
Das Gold dieser Website ist beispielsweise hsl(42, 48%, 57%). Die dunklere Variante für Text ist derselbe Farbton bei geringerer Helligkeit, die helle Fläche dahinter derselbe Farbton mit reduzierter Sättigung.
Kontrast ist kein Geschmacksthema
Ob Text auf einer Farbe lesbar ist, lässt sich berechnen. Die WCAG-Richtlinien setzen dafür feste Schwellen:
| Verhältnis | Bedeutung |
|---|---|
| ab 3:1 | genügt für große Schrift ab 18,5 pt oder 14 pt fett |
| ab 4,5:1 | Mindestwert für normalen Fließtext (Stufe AA) |
| ab 7:1 | Stufe AAA, auch bei kleiner Schrift und schwierigem Licht komfortabel |
Das ist keine akademische Übung: Kontraste unterhalb dieser Werte sind auf Mobilgeräten bei Sonnenlicht schlicht nicht mehr lesbar – und für Menschen mit eingeschränktem Sehvermögen dauerhaft nicht. Seit dem Barrierefreiheitsstärkungsgesetz betrifft das ab Juni 2025 auch viele private Anbieter.
Von der Bildschirmfarbe zum Druck
Wer eine Hausfarbe sowohl auf der Website als auch auf Geschäftspapier und einer Wandkarte einsetzt, wird drei leicht unterschiedliche Ergebnisse sehen. Dagegen hilft nur, den Weg umzudrehen: erst die Druckfarbe festlegen – idealerweise als Sonderfarbe –, dann die Bildschirmvariante daraus ableiten.
Bei großformatigen Drucksachen wie Wandkarten und Plänen begleitet die p17 Gruppe genau diesen Schritt: Die Landkarten-Manufaktur liefert Karten gedruckt, laminiert oder gerahmt, und der Landkarten-Shop führt fertige Karten.
Verwandte Werkzeuge
- Bildmaße für den Druck: DPI-Rechner
- Papierformate: DIN-Formate
- Bilder proportional skalieren: Bildgröße berechnen