Was Sind Farbmodelle?
Farbmodelle sind mathematische Systeme, die Farben als Zahlen-Tupel beschreiben. Anstatt "dieses warme Orange-Rot" zu sagen, kann ein Designer #FF4500, rgb(255, 69, 0) oder hsl(16, 100%, 50%) mitteilen—eindeutig, reproduzierbar und über Tools, Teams und Medien hinweg übertragbar.
Das Bedürfnis nach präziser Farbbeschreibung ist alt. Im Jahr 1666 ließ Isaac Newton weißes Sonnenlicht durch ein Glasprisma und erzeugte ein Regenbogenspektrum, womit er nachwies, dass "weißes" Licht alle sichtbaren Farben enthält. Ein Spektrum allein erklärt aber nicht, wie man Farben mischt oder systematisch spezifiziert.
Das erste praktische Farbordnungssystem entwickelte Albert H. Munsell 1905. Er ordnete Farben auf drei Achsen an—Farbton (Hue), Helligkeit (Value) und Chroma—in einer wahrnehmungsbasierten Baumstruktur. Sein System war der direkte Vorläufer von HSL und HSV.
Die moderne wissenschaftliche Grundlage wurde 1931 gelegt, als die Internationale Beleuchtungskommission (CIE) den Farbraum CIE 1931 XYZ veröffentlichte—die erste mathematisch strenge, geräteunabhängige Beschreibung der menschlichen Farbwahrnehmung, abgeleitet aus Experimenten mit menschlichen Beobachtern. Alle in der Computertechnik verwendeten Farbmodelle gehen letztlich auf diesen Standard zurück.
Das Digitalzeitalter brachte hardwaregetriebene Modelle. CRT-Monitore mischen rote, grüne und blaue Phosphorpunkte (RGB). Tintenstrahldrucker versprühen Cyan-, Magenta-, Gelb- und Schwarztinte (CMYK). Jedes Medium brauchte sein eigenes Modell, und die Notwendigkeit, zwischen ihnen zu konvertieren, hat Tools wie das von Ihnen verwendete hervorgebracht.
RGB —— Die Sprache der Bildschirme
RGB (Rot, Grün, Blau) ist ein additives Farbmodell. Das Hinzufügen von Licht erhöht die Helligkeit; alle drei Kanäle auf Maximum (255, 255, 255) ergibt Weiß; alle auf null ergibt Schwarz. Dies entspricht der Funktionsweise von Monitoren, Fernsehern und Smartphone-Bildschirmen—Millionen von Pixeln, jedes ein Cluster aus roten, grünen und blauen Subpixeln, die mit unterschiedlicher Intensität leuchten.
Jeder Kanal reicht von 0 bis 255 (8 Bit, 256 Stufen). Das ergibt 256³ = 16.777.216 verschiedene Farben—gemeinhin als "24-Bit-Echtfarbe" bezeichnet. Für HDR-Displays werden 10 Bit pro Kanal (1024 Stufen) zum Standard.
RGB ist die native Sprache von CSS, Canvas-APIs, WebGL-Shadern und Bildverarbeitungsbibliotheken. Sein Schwachpunkt ist die fehlende Wahrnehmungsintuition—wenn Sie ein leicht helleres Blau möchten, wissen Sie nicht, welche Zahlen Sie anpassen sollen.
HEX —— Die kompakte Farbnotation des Webs
HEX ist einfach RGB in hexadezimaler Notation kodiert. Jeder Kanal (0–255 dezimal) wird zu einer zweistelligen Hexadezimalzeichenkette (00–FF). Die vollständige Farbe erhält das Präfix #.
255 dezimal = FF hex
128 dezimal = 80 hex
0 dezimal = 00 hex
rgb(255, 128, 0) wird zu #FF8000. Das Format ist kompakt, kopierfreundlich und allgegenwärtig in HTML, CSS und Design-Tool-Swatches.
Es gibt eine Kurzform, wenn beide Ziffern jedes Kanals identisch sind: #FF8800 → #F80. CSS unterstützt auch das 8-stellige Format #RRGGBBAA für Farben mit Alpha-Transparenz (z.B. #FF800080 = 50% transparentes Orange).
HEX ist für Entwickler praktisch, bietet aber keine größere semantische Klarheit als RGB—das Anpassen eines Wertes ist ohne Color-Picker nach wie vor Trial-and-Error.
HSL —— Für Menschen Entworfen
HSL (Farbton, Sättigung, Helligkeit) ordnet den Farbraum so, dass er der menschlichen Intuition entspricht:
- Farbton H: Der Farbkreiswinkel, 0°–360°. Rot = 0°, Gelb = 60°, Grün = 120°, Cyan = 180°, Blau = 240°, Magenta = 300°, zurück zu Rot = 360°.
- Sättigung S: 0%–100%. Bei 0% werden alle Farben grau; bei 100% ist die Farbe vollständig kräftig.
- Helligkeit L: 0%–100%. 0% ist immer Schwarz; 100% ist immer Weiß; 50% ist der "reine" Farbton.
Dies macht Designoperationen natürlich: "Diese Farbe 20% heller machen" ist nur L: 50% → 70%. CSS hsl() wird in Design-Systemen weit verbreitet verwendet, da es komponentenübergreifende Farbanpassungen durch einfache Arithmetik ermöglicht.
HSL hat eine wahrnehmungsmäßige Schwäche: hsl(60, 100%, 50%) (Gelb) wirkt viel heller als hsl(240, 100%, 50%) (Blau), obwohl beide denselben L-Wert von 50% haben. Für Wahrnehmungsgleichförmigkeit nutzen Sie Lab oder oklch.
HSV / HSB —— Photoshops Modell
HSV (Farbton, Sättigung, Wert) —auch HSB (Hue, Saturation, Brightness) genannt— ist strukturell ähnlich wie HSL, ersetzt aber Helligkeit durch Wert (Value):
- Wert V: 0%–100%. Bei 0% ist die Farbe immer Schwarz, unabhängig von H und S. Bei 100% ist die Farbe bei maximaler Helligkeit (aber nicht unbedingt Weiß).
Der praktische Unterschied: In HSL liegt eine reine Farbe bei L=50%; in HSV bei V=100%, S=100%. Das Erhöhen von L über 50% in HSL fügt Weiß hinzu (Aufhellung); HSV hat kein natives Aufhellen—man verringert S, um Weiß hinzuzufügen.
Adobe Photoshop, Illustrator und die meisten professionellen Color-Picker verwenden HSV/HSB, weil sein "Vollhelligkeit"-Modell beim Auswählen kräftiger Farben natürlich wirkt. Designer bevorzugen oft HSV für die Palettenerstellung, während Entwickler HSL für CSS-Manipulationen bevorzugen.
CMYK —— Das Druckmodell
CMYK (Cyan, Magenta, Gelb, Schlüssel/Schwarz) ist ein subtraktives Farbmodell. Im Gegensatz zum additiven RGB (Licht hinzufügen ergibt Weiß) arbeiten subtraktive Modelle mit Tinte auf Papier—jede Tinte absorbiert (subtrahiert) bestimmte Wellenlängen, und das reflektierte Licht ist das, was wir sehen.
- Cyan absorbiert Rot; reflektiert Blau+Grün
- Magenta absorbiert Grün; reflektiert Rot+Blau
- Gelb absorbiert Blau; reflektiert Rot+Grün
- Schlüssel (Schwarz) verbessert Schattendetails und spart Tintenkosten (CMY-Mischungen erzeugen selten echtes Schwarz)
Jeder Kanal wird als Prozentsatz von 0–100% ausgedrückt. CMYK ist der Standard für Offsetdruck, Verpackungen, Zeitschriften und alles, was als physische Tinte auf Papier endet.
Eine kritische Warnung: RGB und CMYK sind nicht vollständig austauschbar. Viele kräftige RGB-Farben (Neongrün, Elektrischblau) liegen außerhalb der CMYK-Farbskala und werden gedämpfter gedruckt. Überprüfen Sie immer in CMYK, bevor Sie Dateien an die Druckerei schicken.
CIE L*a*b* —— Wahrnehmungsgleichförmigkeit
Lab (oder CIELAB) ist ein geräteunabhängiger Farbraum, der so gestaltet ist, dass gleiche numerische Abstände gleichen wahrgenommenen Farbunterschieden entsprechen. Er wurde 1976 von der CIE entwickelt, um die Wahrnehmungsungleichmäßigkeit früherer Modelle zu beheben.
- L*: Helligkeit, 0 (Schwarz) bis 100 (Weiß)
- a*: Grün (negativ) bis Rot (positiv), ungefähr −128 bis +127
- b*: Blau (negativ) bis Gelb (positiv), ungefähr −128 bis +127
Lab ist der Goldstandard für Farbwissenschaft, Bildbearbeitung (Photoshops Lab-Modus) und Farbdifferenzberechnungen (ΔE). ΔE < 1 ist für das menschliche Auge nicht wahrnehmbar; ΔE < 3 ist für die meisten Druckarbeiten akzeptabel.
Lab ist die Grundlage für das moderne CSS oklch(), das Lab in Polarkoordinaten (Helligkeit, Chroma, Farbton) umpackt.
RGBA und HSLA —— Transparenz Hinzufügen
Sowohl RGB als auch HSL unterstützen einen Alpha-Kanal—einen vierten Wert von 0 (vollständig transparent) bis 1 (vollständig opak)—und bilden damit RGBA und HSLA.
rgba(255, 99, 71, 0.5) /* Tomate bei 50% Deckkraft */
hsla(9, 100%, 64%, 0.7) /* gleiche Farbe, 70% opak */
Modernes CSS akzeptiert auch die Schrägstrich-Syntax: rgb(255 99 71 / 50%).
Mathematische Konvertierungsformeln
RGB ↔ HEX
// RGB zu HEX Konvertierung
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(v).toString(16).padStart(2, '0'))
.join('');
}
// HEX zu RGB
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
RGB ↔ HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // achromatisch
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}
Farbräume und Profile
Ein Farbraum definiert, welche Teilmenge aller sichtbaren Farben ein Gerät oder eine Datei darstellen kann:
| Farbraum | Gamut-Abdeckung | Einsatzgebiet |
|---|---|---|
| sRGB | ~35% des Sichtbaren | Web, Standardmonitore, JPEG |
| Adobe RGB | ~50% des Sichtbaren | Profi-Fotografie, Druck |
| Display P3 | ~45% des Sichtbaren | iPhone, Mac, moderne Displays |
| ProPhoto RGB | ~90% des Sichtbaren | RAW-Fotobearbeitung |
| Rec. 2020 | ~75% des Sichtbaren | HDR-Video, 4K-Rundfunk |
Webdesigner arbeiten überwiegend in sRGB, dem angenommenen Farbraum von CSS, PNG und JPEG. Safari und Chrome unterstützen jedoch jetzt die CSS-Funktion color() mit display-p3 für Weitwinkel-Gamut-Displays sowie die oklch()-Funktion, die Farben außerhalb von sRGB referenzieren kann.
Farbprofile (ICC-Profile) sind Datendateien, die Software mitteilen, wie Farbzahlen auf reales Licht gemappt werden. Wenn Sie ein Bild "mit eingebettetem Profil" exportieren, sorgt das ICC-Profil für einheitliches Rendering auf verschiedenen Geräten.
CSS-Farbnutzung
CSS hat sich von einfachen Hexadezimalwerten zu einem reichhaltigen Farb-Ökosystem entwickelt:
/* Moderne CSS-Farbnutzung */
:root {
--primary: #3B82F6;
--primary-hsl: hsl(217, 91%, 60%);
/* oklch für P3-Weitwinkelgamut */
--accent: oklch(70% 0.2 250);
}
/* WCAG-Kontrastprüfungshilfe */
.text-accessible {
color: #1a1a1a; /* Kontrast 16,1:1 auf Weiß — AAA */
background: #ffffff;
}
Benannte Farben: CSS definiert 140 benannte Farben, von aliceblue bis yellowgreen. Sie sind lesbar, aber für systematisches Design unflexibel.
Moderne Funktionen:
rgb(255 99 71)— leerraumgetrennte moderne Syntaxhsl(9deg 100% 64%)— lesbar und anpassbaroklch(70% 0.2 250)— wahrnehmungsgleichmäßig, weitgamutigcolor(display-p3 1 0.389 0.279)— explizites Weitwinkelgamut
CSS-Benutzereigenschaften (Variablen) sind der Grundstein moderner Theming-Systeme. Mit HSL-basierten Variablen ist die Generierung einer vollständigen Farbskala aus einem einzigen Farbton durch einfache Arithmetik unkompliziert.
Barrierefreiheit und Kontrastverhältnisse
Die WCAG (Richtlinien für zugängliche Webinhalte) legen Mindestkontrastverhältnisse für lesbaren Text fest:
- Stufe AA: 4,5:1 für normalen Text, 3:1 für großen Text (18pt oder 14pt fett)
- Stufe AAA: 7:1 für normalen Text, 4,5:1 für großen Text
Das Kontrastverhältnis wird aus der relativen Luminanz berechnet:
Kontrast = (L1 + 0.05) / (L2 + 0.05)
wobei L1 die hellere und L2 die dunklere Luminanz ist.
Häufige sichere Kombinationen: Schwarz (#000000) auf Weiß (#ffffff) = 21:1 (perfektes AAA); Grau #767676 auf Weiß = genau 4,5:1 (AA bestanden).
Design-Tools und Farbhandhabung
Figma: Speichert Farben intern als RGB. Der Color-Picker bietet HEX, RGB, HSL, HSB und CSS-Notation. Design-Tokens (Variablen) können über Figmas Variables API in Code veröffentlicht werden.
Sketch: Verwendet RGB mit benannten Swatches und geteilten Farbbibliotheken. Unterstützt CMYK-Exporthinweise für Drucklieferables. Plugins wie Stark fügen WCAG-Kontrastprüfung hinzu.
Adobe Photoshop / Illustrator: Adobe-Tools unterstützen nativ CMYK, Lab und farbprofilbewusste Workflows. Der Color-Picker in Photoshop verwendet standardmäßig HSB (HSV).
Anwendungsfälle: Marke, Tokens und medienübergreifende Konsistenz
Markenrichtlinien definieren den kanonischen Farbsatz einer Organisation. Eine gut spezifizierte Markenfarbe könnte so aussehen:
Pantone 286 C
CMYK: 100 / 72 / 0 / 18
RGB: 0 / 84 / 166
HEX: #0054A6
Diese Mehrformat-Spezifikation stellt sicher, dass Blau korrekt aussieht, ob es auf ein T-Shirt siebgedruckt, in eine Broschüre gedruckt oder auf einer Website angezeigt wird.
Design-Tokens sind benannte Variablen, die semantische Rollen auf Farbwerte mappen. Tools wie Style Dictionary transformieren Tokens in plattformspezifische Dateien: CSS-Variablen für Web, Swift-Konstanten für iOS, XML-Ressourcen für Android.
Vergleich: HSL vs HSV, sRGB vs Weitwinkelgamut
HSL vs HSV: Beide leiten sich von RGB ab; keines ist wahrnehmungsgleichmäßig. Die reine Farbe in HSL liegt bei L=50%; in HSV bei V=100%, S=100%. HSV eignet sich besser für Color-Picker-UIs; HSL eignet sich besser für CSS-Manipulationen. Für echte Wahrnehmungsgleichmäßigkeit nutzen Sie oklch/Lab.
sRGB vs Weitwinkelgamut: sRGB deckt etwa 35% der CIE-1931-Kurve ab—ausreichend für die meiste Webarbeit. Display P3 deckt ~45% ab und ermöglicht lebendigere Grün- und Rottöne auf modernen Apple/Samsung-Bildschirmen. CSS @media (color-gamut: p3) ermöglicht Progressive Enhancement.
Best Practices für Farbmanagement
- Farbraum frühzeitig festlegen: sRGB als Standard verwenden; P3-Verbesserungen schrittweise hinzufügen.
- HSL für CSS-Variablen verwenden, um mathematische Farbskalen und Themes zu ermöglichen.
- Farben stets in mehreren Formaten spezifizieren für Markenrichtlinien.
- WCAG-Kontrast prüfen für jede Text-Hintergrund-Kombination vor dem Launch.
- ICC-Profile in exportierte Bilder einbetten für geräteübergreifende Konsistenz.
- Semantische Tokens statt roher Hex-Werte in Design-Systemen bevorzugen.
- Im Dunkelmodus testen: HSL-basierte Variablen erleichtern Darkmode-Theming erheblich.
- Nicht annehmen, CMYK entspricht RGB: Für kritische Druckfarben immer eine Druckerei einbeziehen.
- oklch für modernes CSS einsetzen, wenn lebhafte, weitgamutige Farben mit Wahrnehmungsgleichmäßigkeit benötigt werden.
- Farbentscheidungen dokumentieren: Begründung für Zugänglichkeit, Markengeschichte und emotionale Absicht festhalten.
Häufig Gestellte Fragen
F1: Was ist der Unterschied zwischen HEX und RGB?
Sie stellen dieselbe Information unterschiedlich dar. #FF8000 und rgb(255, 128, 0) sind identische Farben—HEX verwendet lediglich hexadezimale Notation. HEX ist kompakter; RGB ist bei großen Zahlen besser lesbar.
F2: Warum sieht meine RGB-Farbe im Druck anders aus? Bildschirme sind additiv (Licht); Druck ist subtraktiv (Tinte). Viele kräftige Bildschirmfarben—insbesondere Elektrischblau und Neongrün—können nicht mit Tinte reproduziert werden und werden auf den nächsten druckbaren Äquivalent "gamut-gemappt", was gedämpfter wirkt.
F3: Wann sollte ich HSL statt HSV verwenden? Verwenden Sie HSL beim Schreiben von CSS oder beim Erstellen von Design-Tokens—es integriert sich natürlich in modernes CSS. Verwenden Sie HSV bei der Arbeit in Photoshop/Illustrator-Color-Pickern oder beim Erstellen eigener Color-Picker-Komponenten.
F4: Was ist oklch und warum ist es besser als HSL?
oklch ist eine CSS-Farbfunktion, die den Oklab-Wahrnehmungsfarbraum verwendet. Im Gegensatz zu HSL behält es über Farbtöne hinweg eine konsistente wahrgenommene Helligkeit bei und unterstützt auch Weitwinkelgamut-Display-P3-Farben.
F5: Wie prüfe ich, ob zwei Farben genügend Kontrast haben?
Berechnen Sie die relative Luminanz jeder Farbe und wenden Sie an: (heller + 0.05) / (dunkler + 0.05). Das Ergebnis muss ≥ 4,5 für WCAG AA sein. Unser Farbkonverter enthält einen integrierten Kontrastprüfer.
F6: Ist die RGB→CMYK-Konvertierung in diesem Tool genau? Die mathematische Konvertierung ist eine geräteunabhängige Annäherung. Für professionelle Druckarbeiten erfordert genaues CMYK ICC-Farbprofile, die spezifisch für Drucker und Papier sind. Verwenden Sie das Tool für Schätzungen; testen Sie immer mit Ihrem Druckdienstleister.
F7: Kann ich CSS oklch() heute verwenden?
Ja—oklch() wird in Chrome 111+, Firefox 113+, Safari 16.4+ und Edge 111+ vollständig unterstützt. Für ältere Browser einen Fallback angeben: color: hsl(250, 80%, 55%); color: oklch(55% 0.18 250);.