HEX vs RGB vs HSL vs CMYK: Welches Farbformat wann verwenden

Gleiche Farbe, vier verschiedene Sprachen

Sieh dir dieses Korallrot an. Es ist exakt dieselbe Farbe, kann aber auf vier verschiedene Arten geschrieben werden:

Jedes Format hat seinen Zweck. Das falsche zu wählen bricht dein Projekt nicht, aber das richtige spart Zeit, vermeidet Konvertierungsfehler und hält deine Marke auf allen Plattformen konsistent.

Dieser Leitfaden erklärt genau, wann du welches verwenden solltest, mit echten Beispielen und Schnellreferenzen.

HEX: Der Web-Standard

Was ist das: Ein 6-stelliger Hexadezimalcode, der Rot-, Grün- und Blauwerte darstellt. Beginnt immer mit #. Beispiel: #FF6F61 bedeutet 255 Rot, 111 Grün, 97 Blau.

Wann HEX verwenden

• CSS-Stylesheets — Das Standardformat, das die meisten Webentwickler verwenden und erwarten.
• Design-Tools — Figma, Sketch und Canva zeigen HEX prominent in ihren Farbwählern.
• Markenrichtlinien — Die meisten Markenrichtlinien listen Farben in HEX, weil es kurz und einfach zu kopieren ist.
• Kommunikation — Wenn du eine exakte Farbe in Slack oder per E-Mail teilen musst, wird HEX universell verstanden.

Wann HEX NICHT verwenden

• Wenn du Transparenz brauchst — HEX unterstützt Alpha nicht nativ. Du kannst 8-stelliges HEX verwenden (#FF6F6180), aber die Unterstützung ist inkonsistent.
• Programmatische Farbmanipulation — Eine HEX-Farbe aufhellen oder abdunkeln erfordert erst eine Konvertierung.
• Design für den Druck — Druck verwendet CMYK. HEX an eine Druckerei zu senden garantiert Farbabweichungen.

Praxisbeispiel: CSS-Variablen

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB: Das Bildschirm-Farbmodell

Was ist das: Drei Zahlen (0–255), die Rot, Grün und Blau darstellen, die tatsächlichen Lichtfarben, die dein Bildschirm aussendet. Beispiel: rgb(255, 111, 97).

Wann RGB verwenden

• Transparenz (RGBA) — rgba(255, 111, 97, 0.5) gibt dir exakte Kontrolle über die Deckkraft. Die am weitesten verbreitete Methode für halbtransparente Farben in CSS.
• App-Entwicklung — Swift, Kotlin und Flutter verwenden intern RGB-Werte. In RGB zu arbeiten vermeidet unnötige Konvertierungen.
• LED-Beleuchtung und IoT — LED-Streifen und smarte Lampen erwarten RGB-Werte.
• Farbmathematik — Zwei Farben mischen oder zwischen ihnen interpolieren ist in RGB einfache Arithmetik.

Wann RGB NICHT verwenden

• Design für den Druck — RGB-Werte entsprechen nicht direkt der Tintenmischung. Konvertiere immer zu CMYK vor dem Senden an die Druckerei.
• Sättigung oder Helligkeit anpassen — Die Sättigung in RGB zu ändern erfordert komplexe Formeln. HSL ist dafür viel einfacher.

Praxisbeispiel: React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL: Das Designer-Format

Was ist das: Drei Werte — Farbton (0–360°, Position auf dem Farbkreis), Sättigung (0–100%%, von Grau bis Leuchtend) und Helligkeit (0–100%%, von Schwarz bis Weiß). Beispiel: hsl(5, 100%%, 69%%).

Wann HSL verwenden

• Design-Systeme — Erstelle eine vollständige Farbskala, indem du Farbton und Sättigung festhältst und nur die Helligkeit änderst.
• Dark Mode — Dunkle Varianten zu erzeugen ist so einfach wie die Helligkeit zu reduzieren. Kein Raten, keine Formeln.
• Programmatische Farberzeugung — Brauchst du 12 gleichmäßig verteilte Farben? Erhöhe den Farbton in 30°-Schritten bei gleicher Sättigung und Helligkeit.
• Barrierefreiheit — Kontrast zu prüfen ist intuitiver, wenn man den Helligkeitswert direkt ablesen kann.

Wann HSL NICHT verwenden

• Teamübergreifende Kommunikation — Die meisten Menschen denken nicht in Farbton/Sättigung/Helligkeit. HEX oder RGB sind in Gesprächen oft klarer.
• Druck-Workflows — HSL hat kein direktes Äquivalent im Druck. Konvertiere zuerst zu CMYK.

Praxisbeispiel: Farbskala mit Tailwind CSS

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK: Das Druckformat

Was ist das: Vier Werte — Cyan, Magenta, Gelb und Schwarz (Key). Anders als RGB (das Licht addiert) ist CMYK subtraktiv — es beschreibt, wie viel Tinte das Licht vom weißen Papier absorbiert. Beispiel: 0, 56, 62, 0.

Wann CMYK verwenden

• Alles, was gedruckt wird — Visitenkarten, Poster, Verpackungen, Zeitschriften. Wenn es durch eine Druckerei geht, muss es CMYK sein.
• InDesign und Druck-Workflows — Designe von Anfang an in CMYK, um Überraschungen mit Farben außerhalb des Druckbereichs zu vermeiden.
• Farbproofs — Bildschirmproofs simulieren die Druckerausgabe, was nur funktioniert, wenn deine Quellfarben bereits in CMYK sind.

Wann CMYK NICHT verwenden

• Bildschirme — Monitore verwenden Licht (RGB). CMYK-Werte müssen konvertiert werden, und die Konvertierung ist immer eine Annäherung.
• Fotobearbeitung — Arbeite während der Bearbeitung in RGB. Konvertiere erst im letzten Schritt zu CMYK, wenn gedruckt wird.

Praxisbeispiel: Export aus Illustrator

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

Schnellreferenz-Tabelle

Spickzettel: Projekttyp → Farbformat

Konvertierungen: Was du wissen musst

• HEX ↔ RGB — Verlustfreie Konvertierung. Es sind verschiedene Darstellungen desselben Farbmodells. #FF6F61 ist exakt rgb(255, 111, 97).
• RGB ↔ HSL — Verlustfreie Konvertierung. Es sind verschiedene mathematische Ausdrücke desselben Farbsatzes.
• RGB → CMYK — Verlustbehaftete Konvertierung. Der Farbumfang von CMYK ist kleiner als der von RGB. Lebhafte Bildschirmfarben werden im Druck oft matt.
• CMYK → RGB — Das Ergebnis hängt vom verwendeten ICC-Profil ab. Derselbe CMYK-Wert kann mit verschiedenen Profilen unterschiedlich aussehen.

Die App Color Picker Camera zeigt alle vier Formate gleichzeitig — richte sie auf eine beliebige Farbe in der realen Welt und erhalte HEX, RGB, HSL und CMYK sofort. Keine manuelle Konvertierung nötig.

Häufige Fehler (und wie man sie vermeidet)

1. RGB an die Druckerei senden

Drucker mischen Tinten, kein Licht. Wenn du eine RGB-Datei sendest, rät die Druckerei-Software die CMYK-Konvertierung und das Ergebnis stimmt selten mit dem überein, was du auf dem Bildschirm siehst. Designe immer von Anfang an in CMYK für den Druck.

2. HEX für Transparenz verwenden

8-stelliges HEX (#FF6F6180) existiert, aber viele Tools erkennen es nicht. Verwende stattdessen rgba() oder hsla() für zuverlässige Transparenz.

3. Ein Design-System nur mit HEX aufbauen

Helle und dunkle Töne aus einem HEX-Code zu erzeugen erfordert Versuch und Irrtum. HSL ermöglicht es, die Helligkeit direkt zu ändern, wodurch Farbskalen vorhersehbar und konsistent werden.

4. CMYK → HEX konvertieren und dieselbe Farbe erwarten

CMYK hat einen kleineren Farbumfang als RGB/HEX. Bei der Rückkonvertierung wird die Farbe angenähert und kann matt oder leicht verändert aussehen. Überprüfe immer visuell.

Häufig gestellte Fragen

Was ist der Unterschied zwischen HEX und RGB?

Keiner in Bezug auf verfügbare Farben. Beide decken exakt die gleichen 16,7 Millionen Farben ab. HEX ist eine kürzere Schreibweise für RGB-Werte in Hexadezimalnotation. #FF6F61 = rgb(255, 111, 97). Der einzige praktische Unterschied ist die Transparenzunterstützung: RGB hat RGBA eingebaut, während 8-stelliges HEX nur begrenzt unterstützt wird.

Wann sollte ich CMYK verwenden?

Immer wenn dein Design physisch gedruckt wird: Visitenkarten, Broschüren, Poster, Verpackungen. Wenn es nur auf einem Bildschirm zu sehen sein wird, bleib bei HEX, RGB oder HSL.

Ist HSL besser als RGB?

Es ist nicht besser, es ist für Designer leichter nachvollziehbar. Wenn du ein Farbschema erstellen, Dark-Mode-Themes generieren oder Barrierefreiheitskontraste prüfen musst, ist HSL intuitiver. Für App-Entwicklung, wo Frameworks RGB-Werte erwarten, verwende RGB.

Gibt es eine App, die alle 4 Farbformate gleichzeitig anzeigt?

Ja. Color Picker Camera lässt dich dein Handy auf jede beliebige Farbe richten und zeigt sofort HEX-, RGB-, HSL- und CMYK-Werte auf einem Bildschirm. Verfügbar für iOS und Android.

Fazit

Verwende HEX für das Web. Verwende RGB für Apps und Bildschirme. Verwende HSL für Design-Systeme und Themes. Verwende CMYK für den Druck.

Wenn du mit realen Farben arbeitest — eine gestrichene Wand, ein Stoffmuster, ein Logo auf einem Schild — fungiert Color Picker Camera als dein Farbenrechner für die reale Welt. Richte sie aus, erfasse und erhalte alle vier Formate sofort.

Für iOS herunterladen Für Android herunterladen