Farbkonverter

Farben zwischen RGB, HEX, HSL, HSV und CMYK umrechnen

Color Converter
H: 0°
S: 100%
L: 50%
H: 0°
S: 100%
V: 100%
C: 0%
M: 100%
Y: 100%
K: 0%

Vollständiger Leitfaden zur Farbkonvertierung

Umfassender Leitfaden zu Farbmodellen, Formaten, Konvertierungen und professionellen Design-Anwendungen

Farbmodelle verstehen

Digitale Farbmodelle

  • •HEX: 6-stellige Hexadezimalzahl (#RRGGBB), 16,7 Millionen Farben
  • •RGB: Rot/Grün/Blau (0–255 jeweils), additives Modell für Bildschirme
  • •RGBA: RGB + Alpha-Transparenz (0–1)
  • •HSL: Farbton (0–360°)/Sättigung/Helligkeit (0–100%)
  • •HSV/HSB: Farbton/Sättigung/Wert (Alternative zu HSL)

Druck- und Industrie-Farbmodelle

  • •CMYK: Cyan/Magenta/Gelb/Schwarz (0–100%), subtraktiv für den Druck
  • •Pantone (PMS): standardisierte Sonderfarben für Markenkonsistenz
  • •LAB (CIELAB): geräteunabhängig, wahrnehmungsgleichmäßig
  • •LCH: Helligkeit/Chroma/Farbton (wahrnehmungsbasiert)
  • •XYZ: CIE 1931 Tristimulus, wissenschaftlicher Standard

Farbformat-Referenz

HEX & RGB Konvertierung

  • •HEX zu RGB: Paare auslesen (#FF6B35 → R=255, G=107, B=53)
  • •RGB zu HEX: jeden Kanal in 2-stellige Hex-Zahl umwandeln
  • •CSS-Kurzschreibweise: #RGB (3-stellig) = #RRGGBB
  • •Alpha in HEX: 8-stellig #RRGGBBAA
  • •Beispiel: Weiß = #FFFFFF = rgb(255,255,255)

HSL & RGB Beziehung

  • •Farbton: 0°=Rot, 60°=Gelb, 120°=Grün, 180°=Cyan, 240°=Blau, 300°=Magenta
  • •Sättigung 0% = Grau, 100% = volle Farbe
  • •Helligkeit 0% = Schwarz, 50% = normal, 100% = Weiß
  • •Rot: HSL(0°,100%,50%) = RGB(255,0,0)
  • •Blau: HSL(240°,100%,50%) = RGB(0,0,255)

CMYK & RGB Beziehung

  • •RGB→CMYK: K=1−max(R,G,B); C=(1−R−K)/(1−K); M=(1−G−K)/(1−K); Y=(1−B−K)/(1−K)
  • •Reines Rot RGB(255,0,0) = CMYK(0%,100%,100%,0%)
  • •Reines Schwarz RGB(0,0,0) = CMYK(0%,0%,0%,100%)
  • •Weiß RGB(255,255,255) = CMYK(0%,0%,0%,0%)

Professionelle Anwendungen

Web- und UI-Design

  • •CSS-Farbsyntax (hex, rgb(), hsl(), oklch())
  • •Farb-Tokens für den Dark Mode
  • •WCAG-Kontrastverhältnisse (4.5:1 für normalen Text)
  • •Markenfarb-Variablen in Design-Systemen
  • •Hex-Werte für Tailwind/CSS-in-JS
  • •Verlaufserstellung mit HSL-Farbtonrotation

Grafikdesign und Markenidentität

  • •Pantone-Farbabgleich für Markenidentität
  • •CMYK-Konvertierung für Offsetdruck
  • •Sattes Schwarz vs. Standardschwarz für große Flächen
  • •Farbprofile (sRGB vs. CMYK) für die Dateiübergabe
  • •Überdruckeinstellungen
  • •Sonderfarb-Separationen

Fotografie und Video

  • •Farbkorrektur in Rec.709 / Rec.2020 Farbräumen
  • •LAB-Farbe für wahrnehmungsbasierte Bearbeitung
  • •LUT-Erstellung (Look-Up Table)
  • •Hautton-Referenz (ca. Farbton 180–220 in HSL)
  • •Farbkalibrierung mit X-Rite ColorChecker
  • •HDR-Inhalte (breitere Farbpalette)

Datenvisualisierung

  • •Sequentielle Paletten (hell zu dunkel) für geordnete Daten
  • •Divergierende Paletten für zwei Extreme
  • •Qualitative Paletten für Kategorien
  • •Farbenblindensichere Paletten (Rot-Grün nicht allein verwenden)
  • •Wahrnehmungsgleichmäßigkeit im LAB-Raum
  • •Barrierefreiheit in Diagrammen (WCAG 1.4.1)

Best Practices bei der Farbkonvertierung

Genauigkeit und Farbräume

  • •HEX/RGB sind standardmäßig sRGB — Farbraum für Wide Gamut angeben
  • •LAB-Konvertierung erfordert Weißpunkt (D65-Standard)
  • •CMYK-Werte hängen vom ICC-Farbprofil ab
  • •Farbabgleich zwischen Bildschirmen variiert je nach Displaykalibrierung
  • •Druckfarben immer vor der Endproduktion prüfen

Barrierefreiheits-Überlegungen

  • •Mindest-Kontrastverhältnis WCAG AA: 4.5:1 (normaler Text), 3:1 (großer Text)
  • •WCAG AAA: 7:1 (normal), 4.5:1 (groß)
  • •Etwa 8% der Männer haben Rot-Grün-Farbenblindheit — mit Coblis oder ähnlichem testen
  • •Nicht allein auf Farbe verlassen, um Informationen zu vermitteln
  • •Mit Graustufen-Konvertierung testen

Farbbeispiele nach Kategorie

Web-sichere und häufige Farben

  • •Weiß: #FFFFFF = rgb(255,255,255) = hsl(0°,0%,100%)
  • •Schwarz: #000000 = rgb(0,0,0)
  • •Rot: #FF0000 = rgb(255,0,0) = hsl(0°,100%,50%)
  • •Marineblau: #000080 = rgb(0,0,128) = hsl(240°,100%,25%)
  • •Orange: #FFA500 = rgb(255,165,0)
  • •Grau: #808080 = rgb(128,128,128)
  • •Grün: #008000 = rgb(0,128,0)

Markenfarben

  • •Coca-Cola Rot: #F40009 (CMYK 0/100/100/4)
  • •Facebook Blau: #1877F2
  • •Google Blau: #4285F4
  • •Instagram Verlaufsanfang: #F58529
  • •Amazon Orange: #FF9900
  • •Spotify Grün: #1DB954
  • •Apple Schwarz: #1D1D1F

Design-System-Beispiele

  • •Tailwind blue-500: #3B82F6 = hsl(217°,91%,60%)
  • •Tailwind red-500: #EF4444
  • •Material primary blue: #1976D2
  • •Bootstrap primary: #0D6EFD
  • •shadcn/ui foreground: #09090B
  • •Gedämpfter Text: #71717A
  • •Destruktiv: #DC2626

Häufig gestellte Fragen

Was ist der Unterschied zwischen RGB und CMYK?▾
RGB (Rot, Grün, Blau) ist ein additives Farbmodell für Bildschirme — Lichtmischung. Volles RGB (255,255,255) = Weiß. CMYK (Cyan, Magenta, Gelb, Schwarz) ist ein subtraktives Modell für den Druck — Tintenmischung. Volles CMYK (100,100,100,100) = nahezu Schwarz. Leuchtende Bildschirmfarben können im Druck matt wirken, da Tinte nicht den gesamten RGB-Farbraum abdecken kann.
Warum sieht meine Bildschirmfarbe beim Drucken anders aus?▾
Bildschirme emittieren Licht mit dem RGB-Modell, das eine größere Farbpalette hat als das CMYK-Modell der Drucker. Leuchtende, gesättigte Farben — elektrisches Blau, Neongrün, kräftiges Orange — können oft nicht mit Tinte auf Papier reproduziert werden. Konvertieren Sie immer in CMYK und machen Sie einen Andruck, bevor Sie Marken- oder Verpackungsartwork finalisieren.
Was ist die HEX-Farbnotation?▾
Ein HEX-Farbcode ist eine 6-stellige Hexadezimalzahl mit vorangestelltem #, z. B. #FF5733. Die ersten zwei Ziffern sind der Rotkanal (00–FF), die mittleren zwei der Grünkanal und die letzten zwei der Blaukanal. Jedes Paar steht für 0–255 in Basis 16. Kurzcodes wie #F00 sind Kurzformen für #FF0000. Ein 8-stelliges HEX (#RRGGBBAA) enthält den Alpha-Kanal (Deckkraft).
Wie prüfe ich den Farbkontrast auf Barrierefreiheit?▾
Verwenden Sie die WCAG-Kontrastverhältnis-Formel: (L1 + 0,05) / (L2 + 0,05), wobei L1 und L2 die relativen Leuchtdichten der beiden Farben sind. WCAG AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt fett). WCAG AAA erfordert 7:1 für normalen Text. Tools wie WebAIM Contrast Checker berechnen dies sofort.
Was ist der Unterschied zwischen HSL und HSV?▾
Beide verwenden Farbton und Sättigung, unterscheiden sich aber in der dritten Komponente. HSL (Helligkeit) definiert 50% als die 'reine' Farbe: 0% ist Schwarz, 100% ist Weiß, 50% ist voll gesättigt. HSV (Wert/Helligkeit) definiert 100% als die reine Farbe: 0% ist immer Schwarz unabhängig vom Farbton. HSL ist in CSS und Webdesign verbreiteter; HSV ist in Bildbearbeitungsprogrammen wie Photoshop üblicher.
Welches Farbformat sollte ich für Webdesign verwenden?▾
Für Webdesign ist HEX das am weitesten verbreitete und lesbarste Format für statische Farben. Verwenden Sie hsl() in CSS, wenn Sie Helligkeit oder Farbton programmatisch anpassen möchten (ideal für Design-Tokens und Themes). Verwenden Sie rgba(), wenn Sie Transparenz benötigen. Für moderne Browser bietet oklch() eine wahrnehmungsgleichmäßige Farbmanipulation und wird zunehmend für Design-Systeme empfohlen.