appstoryoAppStoryolapnito.cz s.r.o.blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use/deHEX vs. RGB vs. HSL vs. CMYK: Welches Farbformat wann verwendenLubor Šimůnek21032026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Was ist der Unterschied zwischen HEX, RGB, HSL und CMYK? Erfahren Sie, welches Farbformat für Web, Druck, UI-Design und Social Media passt – mit Praxisbeispielen.
DesignarticleAppStoryoDieselbe Farbe, vier verschiedene SprachenNehmen Sie eine beliebige Farbe – sagen wir ein warmes Korallenrot. Beschreiben Sie sie nun auf vier Arten:
HEX: #E8635A
RGB: rgb(232, 99, 90)
HSL: hsl(4, 75%, 63%)
CMYK: 0, 57, 61, 9
Alle vier beschreiben exakt dieselbe Farbe. Sie sind keine konkurrierenden Standards, sondern unterschiedliche Darstellungen von Farbe, die für unterschiedliche Kontexte optimiert sind. Die Verwirrung entsteht, wenn man nicht weiß, welcher Kontext welches Format verlangt.
Dieser Leitfaden erklärt jedes Format in verständlicher Sprache: was es ist, wie es funktioniert, wann es passt und wann es die falsche Wahl ist. Wenn Sie in irgendeiner Form mit Farbe arbeiten – Design, Entwicklung, Druck, Marketing –, bewahrt Sie das davor, das falsche Format für Ihr Projekt zu wählen.
HEX: der WebstandardWas es istHEX (hexadezimal) ist ein sechsstelliger Code mit vorangestelltem Rautenzeichen: #E8635A. Jedes Zeichenpaar steht für die Kanäle Rot, Grün und Blau in Basis-16-Notation (00 bis FF).
Funktional ist es identisch mit RGB – nur anders geschrieben. #E8635A ist dasselbe wie rgb(232, 99, 90). HEX ist schlicht eine kompaktere Schreibweise für RGB-Werte.
Wann Sie HEX verwenden solltenCSS und Webentwicklung: HEX ist die Standardnotation für Farbe in CSS. Jeder Browser versteht sie. color: #E8635A; ist die gängigste Art, Farbe im Web anzugeben.
Design-Tools: Figma, Sketch, Adobe XD und Canva nutzen HEX als primäre Eingabe. Wenn eine Designerin sagt „das Blau ist #3B82F6“, weiß jeder, was gemeint ist.
Markenrichtlinien: Digitale Styleguides enthalten fast immer HEX-Werte, weil sie kurz, eindeutig und leicht zu kopieren sind.
Schnelle Absprachen: „Nimm #333“ geht in einer Slack-Nachricht schneller als „Nimm rgb(51, 51, 51)“.
Wann Sie HEX NICHT verwenden solltenWenn Sie Transparenz brauchen: Sechsstelliges HEX unterstützt weder Alphakanal noch Deckkraft. Sie brauchen achtstelliges HEX (#E8635A80), das schlechter lesbar ist, oder wechseln zu RGBA.
Wenn Sie Farben programmatisch anpassen wollen: „Mach das 20 % heller“ lässt sich in HEX kaum im Kopf berechnen. Dafür ist HSL weit besser geeignet.
Druckproduktion: Druckereien verwenden kein HEX. Niemals.
PraxisbeispielSie schreiben das CSS für eine Landingpage. Die Designerin übergibt Ihnen einen Styleguide mit den Markenfarben. Sie schreiben:
:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }
HEX ist hier perfekt: kompakt, lesbar und überall unterstützt.
RGB: das Farbmodell für BildschirmeWas es istRGB steht für Rot, Grün, Blau – die drei Lichtfarben, die Bildschirme mischen, um jede sichtbare Farbe zu erzeugen. Jeder Kanal reicht von 0 bis 255. rgb(232, 99, 90) bedeutet 232 Einheiten Rot, 99 Einheiten Grün und 90 Einheiten Blau.
RGB ist die Grundlage aller digitalen Farbe. HEX ist nur RGB in anderer Notation. HSL ist eine menschenfreundliche Umrechnung von RGB. Alles auf Ihrem Bildschirm wird letztlich zu RGB-Werten, die an die Pixel gehen.
Wann Sie RGB verwenden solltenWenn Sie Transparenz brauchen: RGBA ergänzt einen Alphakanal: rgba(232, 99, 90, 0.5) für 50 % Deckkraft. Das ist sauberer als achtstelliges HEX und wird in CSS, Design-Tools und Programmiersprachen breit unterstützt.
Programmierung und App-Entwicklung: Swift, Kotlin, Flutter, React Native – App-Frameworks arbeiten intern typischerweise mit RGB-/RGBA-Werten.
LED und Beleuchtung: Smarte Leuchten (Philips Hue, LED-Streifen) nutzen RGB-Werte. Wer für physische Lichtinstallationen gestaltet, arbeitet mit RGB als nativem Format.
Farbmathematik: Farben mischen, Verläufe interpolieren oder Farbe programmatisch erzeugen ist in RGB unkompliziert.
Wann Sie RGB NICHT verwenden solltenDruck: Bildschirme senden Licht aus (additive Mischung), Papier reflektiert es (subtraktive Mischung). RGB kann nicht zuverlässig abbilden, was aus einem Drucker kommt.
Helligkeit oder Sättigung anpassen: „Mach diese Farbe 30 % weniger gesättigt“ ist in RGB nicht intuitiv. Sie müssten erst nach HSL umrechnen.
PraxisbeispielSie bauen eine React-Native-App und brauchen ein halbtransparentes Overlay:
backgroundColor: 'rgba(0, 0, 0, 0.6)'
RGB mit Alphakanal ist die natürliche Wahl: direkt, lesbar und nativ für die Render-Engine.
HSL: das Designer-FormatWas es istHSL steht für Hue, Saturation, Lightness – Farbton, Sättigung, Helligkeit:
Farbton (0°–360°): die Farbe selbst, als Position auf dem Farbkreis. 0° ist Rot, 120° ist Grün, 240° ist Blau.
Sättigung (0 %–100 %): wie kräftig die Farbe ist. 0 % ist Grau, 100 % die reinste Form des Farbtons.
Helligkeit (0 %–100 %): wie hell oder dunkel. 0 % ist Schwarz, 100 % ist Weiß, 50 % ist die „echte“ Farbe.
hsl(4, 75%, 63%) bedeutet: ein rötlicher Farbton (4°), sehr kräftig (75 % Sättigung) und leicht aufgehellt (63 %).
Wann Sie HSL verwenden solltenDesignsysteme und Themes: HSL ist das beste Format für konsistente Farbskalen. Sie möchten 10 Abstufungen Ihrer Primärfarbe? Farbton beibehalten, Helligkeit von 10 % bis 95 % variieren. Sie möchten eine gedämpfte Variante? Sättigung reduzieren. In HEX oder RGB ist das intuitiv kaum machbar.
Dark Mode / Light Mode: Ein Theme-Wechsel bedeutet, Helligkeit und Sättigung anzupassen – genau die Parameter von HSL. Tailwind CSS, Radix Colors und viele moderne Designsysteme bauen auf HSL auf.
Programmatische Farberzeugung: Hover-Zustände, deaktivierte Zustände, Hintergründe und Rahmen aus einer einzigen Basisfarbe abzuleiten ist in HSL trivial: hsl(4, 75%, 73%) für eine hellere Variante, hsl(4, 75%, 43%) für eine dunklere.
Barrierefreiheit: Kontrastprüfungen werden nachvollziehbarer, wenn man die Helligkeit direkt sehen und anpassen kann.
Wann Sie HSL NICHT verwenden solltenAbstimmung zwischen Teams: Die meisten Menschen denken nicht in Grad und Prozent. „Der Button ist hsl(4, 75%, 63%)“ ist bei einer Design-Übergabe weniger klar als „Der Button ist #E8635A“.
Druck: Wie RGB ist auch HSL ein Bildschirm-Farbmodell.
PraxisbeispielSie bauen ein Designsystem in Tailwind CSS und brauchen eine konsistente Farbskala:
--brand-50: hsl(4, 75%, 95%); --brand-100: hsl(4, 75%, 90%); --brand-200: hsl(4, 75%, 80%); --brand-500: hsl(4, 75%, 63%); --brand-700: hsl(4, 75%, 43%); --brand-900: hsl(4, 75%, 25%);
Gleicher Farbton, gleiche Sättigung, unterschiedliche Helligkeit. Eine perfekte Skala in 30 Sekunden. Versuchen Sie das mal in HEX.
CMYK: das DruckformatWas es istCMYK steht für Cyan, Magenta, Yellow, Key (Schwarz). Es beschreibt Farbe als Mischung von Druckfarbe auf weißem Papier. Jeder Wert reicht von 0 % bis 100 %: 0, 57, 61, 9 bedeutet 0 % Cyan, 57 % Magenta, 61 % Gelb und 9 % Schwarz.
Anders als RGB (das Licht hinzufügt, um Farben zu erzeugen) zieht CMYK Licht vom weißen Papier ab. Mehr Farbe = dunkleres Ergebnis. Deshalb spricht man von einem subtraktiven Farbmodell.
Wann Sie CMYK verwenden solltenDruckdesign: Visitenkarten, Broschüren, Verpackungen, Plakate, Magazine. Jede Datei, die an eine Druckerei geht, sollte im Farbmodus CMYK vorliegen.
Druckdaten in InDesign oder Illustrator vorbereiten: Diese Programme erlauben das Arbeiten im CMYK-Modus, um vorab zu sehen, wie Farben auf Papier wirken (stets weniger leuchtend als am Bildschirm).
Farbprüfung: Prüfen, ob die Farben Ihres Entwurfs in CMYK reproduzierbar sind. Manche sehr kräftigen RGB-Farben (besonders Neongrün und Elektroblau) lassen sich physikalisch nicht in CMYK drucken – sie liegen „außerhalb des Farbraums“.
Wann Sie CMYK NICHT verwenden solltenAlles, was auf einem Bildschirm erscheint: Websites, Apps, Social Media, Präsentationen, E-Mails. Bildschirme nutzen RGB. CMYK für eine Website anzugeben ist, als würde man eine Wegbeschreibung in Seemeilen geben – technisch eine Entfernung, aber für die Fahrt nutzlos.
Fotobearbeitung: In RGB bearbeiten und erst beim finalen Export für den Druck nach CMYK konvertieren.
PraxisbeispielSie haben ein Plakat in Illustrator gestaltet. Vor dem Versand an die Druckerei stellen Sie das Dokument auf den Farbmodus CMYK um (File → Document Color Mode → CMYK Color), prüfen die Farbraum-Warnungen und korrigieren die Elektroblautöne, die ins trübe Petrol gekippt sind. Das finale PDF wird in CMYK mit dem ICC-Profil der Druckerei gespeichert.
Die Kurzübersicht| Format | Am besten für | Wertebereich | Unterstützt Transparenz | Menschlich lesbar | Drucktauglich |
|---|
| HEX | Web, CSS, Markenrichtlinien | #000000 – #FFFFFF | Nur achtstellig (#RRGGBBAA) | Mittel | Nein |
| RGB | Bildschirme, Apps, Verläufe | 0–255 pro Kanal | Ja (RGBA) | Mittel | Nein |
| HSL | Designsysteme, Themes | 0°–360°, 0 %–100 %, 0 %–100 % | Ja (HSLA) | Hoch | Nein |
| CMYK | Druck, Verpackung | 0 %–100 % pro Kanal | Nein | Gering | Ja |
Der Spickzettel: welches Format für welche Aufgabe| Ihr Projekt | Dieses Format nutzen | Warum |
|---|
| Website-CSS | HEX oder HSL | HEX für Einfachheit; HSL für Designsysteme mit Themes |
| Mobile App (iOS/Android) | RGB/RGBA | Native Frameworks arbeiten intern mit RGB |
| Figma-/Sketch-Designdatei | HEX | Standardeingabe in Design-Tools |
| Designsystem / Tokens | HSL | Skalen und Varianten sind in HSL trivial |
| Social-Media-Grafiken | HEX oder RGB | Rein digital; Canva und Photoshop akzeptieren beides |
| Visitenkarte / Broschüre | CMYK | Geht an eine physische Druckerei |
| Produktverpackung | CMYK + Pantone | Druck plus konsistente Markenfarbe |
| E-Mail-Template | HEX | E-Mail-Clients unterstützen HEX zuverlässig |
| Smarte Leuchten / LEDs | RGB | LED-Hardware nutzt RGB nativ |
| Markenrichtlinien-Dokument | Alle vier | Verschiedene Teams brauchen verschiedene Formate |
Kann man zwischen ihnen umrechnen?Ja – mit Einschränkungen.
HEX ↔ RGB: verlustfrei, es sind dieselben Daten in anderer Notation.
RGB ↔ HSL: verlustfrei, es ist eine mathematische Umrechnung.
RGB → CMYK: verlustbehaftet. Manche RGB-Farben (kräftige Blautöne, Neonfarben, leuchtendes Grün) lassen sich in CMYK nicht reproduzieren. Die Umwandlung verschiebt sie auf das nächstgelegene druckbare Äquivalent, das oft matter wirkt.
CMYK → RGB: technisch möglich, aber das Ergebnis hängt vom verwendeten ICC-Profil ab. Zwei Konverter können für dieselbe CMYK-Eingabe leicht abweichende RGB-Werte liefern.
Für schnelle Umrechnungen unterwegs ist ein Farbwähler auf dem Smartphone, der alle vier Formate gleichzeitig anzeigt, der schnellste Weg. Color Picker Camera: HEX RGB macht genau das: Kamera auf eine beliebige Farbe richten und HEX, RGB, HSL und CMYK nebeneinander ablesen. Ein Tippen kopiert den gewünschten Wert. Verfügbar für iPhone und Android.
Häufige Fehler1. Druckdesign in RGB anlegenDas ist der klassische Anfängerfehler. Sie gestalten ein leuchtendes Plakat in Photoshop im RGB-Modus, schicken es in den Druck – und das Ergebnis wirkt ausgewaschen, besonders bei Grün- und Blautönen. Konvertieren Sie vor dem Druckexport immer nach CMYK und prüfen Sie die Farbraum-Warnungen.
2. HEX nutzen, obwohl Transparenz nötig istWenn Ihr Entwurf halbtransparente Overlays, Schatten oder Glassmorphism-Effekte verlangt, wechseln Sie zu RGBA oder HSLA. Sechsstelliges HEX transportiert keine Deckkraft-Information, und achtstelliges HEX wird selten genutzt, weil es schwer zu lesen ist.
3. Ein Designsystem in HEX aufbauen„#3B82F6, aber 20 % heller“ verlangt Umrechnung, Berechnung und Rückumrechnung. In HSL: Helligkeit um 20 % erhöhen. Design-Tokens, Theme-Generatoren und moderne CSS-Custom-Properties funktionieren in HSL deutlich besser.
4. CMYK für das Web nach HEX umrechnen und dieselbe Farbe erwartenEine Marke, die in CMYK für den Druck definiert wurde, sieht nach naiver Umrechnung in HEX fürs Web anders aus. Der richtige Weg: die Farbe am Bildschirm visuell an die gedruckte Version angleichen und dann eigene HEX-Werte für den digitalen Einsatz festlegen. Die Markenrichtlinien sollten beides enthalten.
FAQWas ist der Unterschied zwischen HEX und RGB?Farblich keiner – nur in der Schreibweise. HEX notiert dieselben Rot-/Grün-/Blau-Werte im Basis-16-System. #FF0000 ist identisch mit rgb(255, 0, 0). HEX ist kürzer zu tippen; RGB lässt sich leichter programmatisch verändern und unterstützt einen Alphakanal (RGBA).
Wann sollte ich CMYK statt RGB verwenden?Immer dann, wenn das Endergebnis auf ein physisches Material gedruckt wird – Papier, Karton, Stoff, Kunststoff. Bleibt es auf dem Bildschirm, nutzen Sie RGB (oder HEX/HSL). Wird es gedruckt, wechseln Sie beim Export zu CMYK.
Ist HSL besser als HEX?Für Designsysteme, Themes und Farbmanipulation: ja. Für schnelle Absprachen und das Einfügen in Tools ist HEX praktischer. Beide beschreiben dieselben Farben; HSL ordnet die Information nur so an, wie Menschen über Farbe denken (Farbton → Kräftigkeit → Helligkeit).
Kann mein Smartphone alle vier Formate gleichzeitig anzeigen?Ja. Color Picker Camera: HEX RGB erfasst eine Farbe über die Kamera oder aus einem Foto und zeigt HEX, RGB, HSL und CMYK gleichzeitig an. Tippen Sie auf einen Wert, um ihn zu kopieren. Die App arbeitet wie ein Farbformat-Rechner für die reale Welt: eine Aufnahme, vier Formate.
Das FazitHEX für Web und schnelle Absprachen. RGB für App-Entwicklung und Transparenz. HSL für Designsysteme und Farbmanipulation. CMYK für den Druck.
Sie müssen sich nicht für eines entscheiden – Sie müssen für jeden Kontext das richtige wählen. Und wenn Sie zwischen ihnen umrechnen oder eine reale Farbe in allen vier Formaten auf einmal erfassen möchten, ist ein Farbwähler auf dem Smartphone das schnellste verfügbare Werkzeug.
Color Picker Camera für iPhone laden | Für Android laden