Wenn Sie jemals versucht haben, eine Website zu entwerfen, ein Logo zu erstellen oder eine Visitenkarte zu drucken, sind Sie sofort in die verwirrende Buchstabensuppe der Farbcodes geraten: HEX, RGB, HSL und CMYK. Warum gibt es so viele Möglichkeiten, einen einfachen Blauton zu beschreiben?
Die Wahrheit ist, dass Computer und Drucker Licht auf grundlegend unterschiedliche Weise „sehen“. Darüber hinaus entspricht die Art und Weise, wie Computer Licht verarbeiten, nicht unbedingt der Art und Weise, wie das menschliche Gehirn Farben interpretiert. Das Verständnis dieser Formate ist nicht nur Theorie – es erspart Ihnen die Bereitstellung von Websites mit unzugänglichen Kontrastverhältnissen oder die Zahlung von Tausenden von Dollar für Marketingflyer, die beim Ausdrucken schlammig und dunkel aussehen.
Additives vs. subtraktives Licht
Bevor wir uns mit dem Code befassen, müssen wir den physikalischen Unterschied zwischen Bildschirmen und Papier feststellen.
- Bildschirme geben Licht ab (additiv). Wenn Sie alle Pixel ausschalten, ist der Bildschirm schwarz. Um Weiß zu erzeugen, feuert ein Bildschirm rotes, grünes und blaues Licht mit maximaler Intensität ab.
- Papier reflektiert Licht (subtraktiv). Ein leeres Blatt Papier ist bereits weiß (es reflektiert alles Licht). Um Schwarz zu erzeugen, schichtet ein Drucker Tinte aus Cyan, Magenta und Gelb übereinander, um das gesamte Licht zu absorbieren.
1. RGB (Rot, Grün, Blau)
RGB ist die Muttersprache Ihres Computermonitors. Es definiert eine Farbe, indem es dem Bildschirm genau mitteilt, wie viel rotes, grünes und blaues Licht er aussenden soll. Jeder Kanal wird durch eine Ganzzahl von 0 (aus) bis 255 (maximale Intensität) dargestellt.
Reines Rot ist beispielsweise rgb(255, 0, 0). Reines Weiß ist rgb(255, 255, 255).
Am besten geeignet für: Bildbearbeitung (Photoshop) und digitale Fotografie. Es manipuliert direkt Hardwarepixel.
2. HEX (Hexadezimal)
HEX-Codes wie #FF5733 sind genau dasselbe wie RGB. Der einzige Unterschied ist die Mathematik. Anstelle von Zahlen zur Basis 10 (0-255) werden Hexadezimalzahlen zur Basis 16 (00 bis FF) verwendet. Die ersten beiden Buchstaben bestimmen Rot, die mittleren beiden Grün und die letzten beiden Blau.
Warum verwenden Webentwickler HEX? Weil es kürzer ist. Das Schreiben von #FFF ist für einen CSS-Entwickler viel schneller als das Schreiben von rgb(255, 255, 255).
Am besten geeignet für: Festkodierung von Markenfarben in CSS. Es ist prägnant und lässt sich leicht zwischen Design-Tools wie Figma und Code-Editoren kopieren und einfügen.
Konvertieren Sie Farbcodes sofort
Verschwenden Sie keine Zeit mit Hexadezimalrechnungen im Kopf. Nutzen Sie unser Offline-Tool, um mit einer visuellen Vorschau sofort zwischen HEX, RGB, HSL und CMYK zu übersetzen.
Öffnen Sie den Farbkonverter3. HSL (Farbton, Sättigung, Helligkeit)
RGB und HEX sind für den Menschen schrecklich. Wenn ich Ihnen den Code #4A90E2 zeige, können Sie nicht leicht erraten, welche Farbe es hat. Wenn ich Sie bitte, „das Blau um 20 % dunkler zu machen“, ist die Berechnung in HEX nahezu unmöglich.
HSL wurde für das menschliche Gehirn entwickelt. Es definiert Farben über einen 360-Grad-Farbkreis.
- Farbton (0–360): Die tatsächliche Farbe. 0 ist Rot, 120 ist Grün, 240 ist Blau.
- Sättigung (0–100 %): Wie intensiv die Farbe ist. 0 % ist grau, 100 % ist lebendig.
- Helligkeit (0-100 %): Wie dunkel oder hell es ist. 0 % ist schwarz, 100 % ist weiß.
Wenn Ihr Markenblau hsl(210, 100%, 50%) ist und Sie einen dunkleren Farbton für einen Button-Hover-Effekt wünschen, ändern Sie einfach die letzte Zahl: hsl(210, 100%, 40%). Es ist magisch für die CSS-Architektur.
4. CMYK (Cyan, Magenta, Gelb, Key/Schwarz)
CMYK ist ausschließlich für die physische Welt bestimmt. Es bestimmt, wie ein Drucker physische Tinte mischt. Da Tinte Licht absorbiert, ist der Farbraum physikalisch kleiner als RGB. Es gibt leuchtende Neongrüntöne, die ein Bildschirm ausgeben kann (in RGB), die ein Drucker physisch nicht drucken kann (in CMYK).
Die goldene Regel: Senden Sie niemals eine RGB-Datei an einen kommerziellen Drucker. Der Drucker wandelt es zwangsweise in CMYK um, was dazu führt, dass Ihre lebendigen Farben trüb und verwaschen wirken. Konvertieren Sie Ihre Designs immer in CMYK, bevor Sie sie an die Druckerei senden.
Vergleichsmatrix
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Häufig gestellte Fragen (FAQ)
Welches Format sollte ich für einen CSS Dark Mode verwenden?
Verwenden Sie für dynamisches Theme immer HSL. Indem Sie den Farbton und die Sättigung konstant halten, können Sie den Helligkeitswert einfach invertieren, um eine Farbe im hellen Modus perfekt in eine Farbe im dunklen Modus umzuwandeln.
Kann ich CMYK auf einer Website verwenden?
Nein. Webbrowser verstehen nur lichtbasierte Farbformate (RGB, HEX, HSL). Wenn Sie ein CMYK-JPEG auf eine Website hochladen, versuchen einige Browser, es wiederzugeben, die Farben erscheinen jedoch gebrochen oder invertiert.
Was ist ein Alphakanal?
Das „A“ in RGBA oder HSLA steht für Alpha, das die Transparenz steuert. Ein Alphawert von 1,0 ist völlig durchsichtig, während 0,5 zu 50 % transparent ist. Modernes CSS ermöglicht jetzt auch Transparenz direkt in HEX-Codes, indem zwei zusätzliche Ziffern hinzugefügt werden (z. B. #FFFFFF80).