Farbcode-Konverter Alle Formate

Willkommen zum Farbcode Konverter Alle Formate, einem kostenlosen Online-Tool, das jeden Farbwert gleichzeitig in alle gängigen Formate konvertiert. Fügen Sie einen HEX-Code, ein RGB-Triplett, eine HSL- oder HSV-Definition, ein CMYK-Quartett oder sogar einen benannten CSS-Farbnamen ein — und lesen Sie sofort die entsprechenden Werte ab, sehen Sie ein Live-Vorschaubild, prüfen Sie den WCAG-Barrierefreiheitskontrast und erkunden Sie eine generierte Designer-Palette aus Komplementär-, triadischen, analogen Farben sowie Tönungen und Schattierungen.

Warum einen All-in-One-Farbkonverter verwenden?

Die meisten Online-Farbkonverter beherrschen nur eine Richtung (HEX zu RGB oder RGB zu CMYK), was Sie dazu zwingt, mehrere Tools zu kombinieren, wenn Sie ein vollständiges Bild benötigen. Dieser Konverter akzeptiert jedes gängige Format in einem einzigen Feld, erkennt automatisch, welches Format Sie eingegeben haben, und liefert alle fünf Formate gleichzeitig mit einer Live-Vorschau — das spart Ihnen mehrere Schritte beim Wechsel zwischen Web, Mobile, Druck und Design-Tools.

Unterstützte Eingabeformate

Was ist der Unterschied zwischen den Farbmodellen HSL und HSV?

Sowohl HSL als auch HSV beschreiben eine Farbe durch drei intuitive Kanäle — Farbton (Hue), Sättigung (Saturation) und einen dritten helligkeitsbezogenen Wert — aber sie unterscheiden sich in diesem dritten Kanal.

• HSL — Farbton, Sättigung, Helligkeit (Lightness): Die Helligkeit reicht von 0% (reines Schwarz) über 50% (die lebendigste Version des Farbtons) bis zu 100% (reines Weiß). HSL wird in CSS bevorzugt, da es das Aufhellen oder Abdunkeln einer Farbe symmetrisch und vorhersehbar macht.
• HSV / HSB — Farbton, Sättigung, Wert/Helligkeit (Value/Brightness): Der Wert reicht von 0% (reines Schwarz) bis zu 100% (die vollste, gesättigtste Version des Farbtons). HSV ist das Modell hinter den Farbwählern in Photoshop, Figma und den meisten Desktop-Design-Tools.

Zum Beispiel ist ein voll gesättigtes Rot in HSL hsl(0, 100%, 50%), in HSV jedoch hsv(0, 100%, 100%). Dieselbe Farbe in zwei verschiedenen mentalen Modellen — beide nützlich, je nachdem, ob man wie ein CSS-Autor oder wie ein Maler denkt.

Warum sehen meine CMYK-Werte etwas anders aus als in der Drucksoftware?

RGB ist ein additives Modell, das von Bildschirmen verwendet wird, während CMYK ein subtraktives Modell ist, das von Druckern verwendet wird. Die mathematische Konvertierung, die dieses Tool durchführt, ist eine schnelle Annäherung, die kein ICC-Farbprofil, keine Tintendeckelungsgrenzen oder papierspezifischen Anpassungen enthält. Für professionelle Druckarbeiten sollten Sie sich immer auf das farbverwaltete CMYK-Profil Ihrer Design-Software verlassen (z. B. US Web Coated SWOP v2 oder Coated FOGRA39). Verwenden Sie diesen Konverter als schnelle Referenz, wenn Sie lediglich ein CMYK-Quartett benötigen, das für frühe Designgespräche "nah genug" ist.

Wie funktioniert die WCAG-Kontrastprüfung?

Die Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines) definieren ein Kontrastverhältnis zwischen zwei Farben basierend auf ihrer relativen Leuchtdichte — ein perzeptives Helligkeitsmodell, das Grün stärker gewichtet als Rot und Rot stärker als Blau. Das Verhältnis reicht von 1:1 (gar kein Kontrast) bis 21:1 (reines Schwarz auf reinem Weiß).

• AAA — Verhältnis ≥ 7:1, erfüllt die strengste Barrierefreiheitsstufe für Fließtext
• AA — Verhältnis ≥ 4,5:1, das Minimum für Fließtext in den meisten Vorschriften
• AA Large — Verhältnis ≥ 3:1, ausreichend für großen Text (18pt+ oder 14pt fett) und grafische UI-Elemente
• Fail — Verhältnis < 3:1, verwenden Sie diese Kombination nicht für Text

Das Tool berechnet den Kontrast gegenüber reinem Weiß und reinem Schwarz und hebt dann die bessere Wahl als Standard-Textfarbe hervor, wenn dieser Farbton als Hintergrund verwendet wird.

Erzeugt der Konverter eine Farbpalette?

Ja. Nach jeder Konvertierung erstellt das Tool eine Designer-Palette aus demselben Farbton, bestehend aus:

• Komplementär — die Farbe, die auf dem Rad direkt gegenüberliegt (180° Farbtondrehung), nützlich für kontrastreiche Akzente
• Triadisch — zwei Farben im gleichmäßigen Abstand von 120°, ausgewogen und lebendig
• Analog — benachbarte Farbtöne bei ±30°, nützlich für harmonische Verläufe und Hintergründe
• Tönungen — drei hellere Variationen (gleicher Farbton, höhere Helligkeit)
• Schattierungen — drei dunklere Variationen (gleicher Farbton, geringere Helligkeit)

Klicken Sie auf ein beliebiges Palettenfeld, um es sofort als neuen Ausgangspunkt in den Konverter zu laden — ideal für die schnelle Iteration eines Markenfarbschemas, eines Icon-Sets oder eines UI-Themes.

So verwenden Sie dieses Tool

1. Farbe eingeben oder auswählen — geben Sie einen beliebigen Wert (HEX, RGB, HSL, HSV, CMYK oder einen CSS-Farbnamen) in das Eingabefeld ein, oder klicken Sie auf das kleine Farbfeld, um die native Farbauswahl Ihres Browsers zu öffnen.
2. Konvertieren — klicken Sie auf die Schaltfläche Konvertieren. Das Tool erkennt das von Ihnen angegebene Format automatisch und berechnet jedes andere Format.
3. Kopieren, was Sie brauchen — klicken Sie auf eine der Ein-Klick-Kopierschaltflächen neben einem Formatwert. Die Schaltfläche zeigt kurz ein Häkchen an, um zu bestätigen, dass der Wert in Ihrer Zwischenablage ist.
4. Barrierefreiheit prüfen — überprüfen Sie die WCAG-Kontrastverhältnisse gegenüber reinem Weiß und reinem Schwarz, um zu bestätigen, ob die Farbe als Text oder Hintergrund lesbar ist.
5. Palette erkunden — klicken Sie auf ein beliebiges Feld im Designer-Palettenbereich, um es zu konvertieren und Ihre Design-Exploration zu erweitern, ohne die Seite zu verlassen.

Praktische Anwendungsfälle

Für Webentwickler

• Konvertieren Sie ein HEX aus einem Figma-Entwurf in hsl() für die Verwendung mit CSS Custom Properties und modernen Theming-Systemen
• Generieren Sie rgba()-Werte für halbtransparente Overlays direkt aus einer Marken-HEX-Farbe
• Überprüfen Sie, ob eine Markenfarbe auf weißen Hintergründen WCAG AA erfüllt, bevor Sie das Projekt veröffentlichen

Für Grafikdesigner

• Übertragen Sie eine CSS-Farbe von einer Website in eine CMYK-Annäherung für Druck-Mockups
• Erstellen Sie eine Tonskala (Tönungen und Schattierungen) ausgehend von einem einzigen Farbton
• Finden Sie einen komplementären oder triadischen Akzent, ohne den Browser zu verlassen

Für UI- & Produktdesigner

• Wechseln Sie zwischen HSV (Figma-Farbauswahl) und HSL (CSS) beim Dokumentieren von Design-Tokens
• Identifizieren Sie automatisch die beste Textfarbe (Schwarz vs. Weiß) für jeden Hintergrund
• Speichern Sie eine konvertierte Farbe schnell über die URL der Ergebnis-Seite als Lesezeichen oder teilen Sie diese

Tipps für beste Ergebnisse

• Flexible Trennzeichen — der Parser akzeptiert Kommas, Leerzeichen oder Schrägstriche innerhalb der Klammern, so funktioniert rgb(79 70 229) ebenso wie rgb(79, 70, 229).
• Prozentwerte verwenden — rgb(31%, 27%, 90%) ist gültig; das Tool konvertiert Prozentsätze intern in 0–255.
• CSS-Farbnamen ausprobieren — über 140 Namen funktionieren, einschließlich moderner Ergänzungen wie rebeccapurple.
• Kanalbalken lesen — die visuelle Aufschlüsselung der Rot/Grün/Blau- und CMYK-Kanäle macht es leicht zu sehen, welche Farben die Druckversion der Farbe dominieren.
• CMYK nur als Leitfaden betrachten — öffnen Sie das Ergebnis in Ihrer farbverwalteten Drucksoftware für den endgültigen, genauen Wert.

Häufig gestellte Fragen

Muss ich das #-Symbol bei der Eingabe eines HEX-Werts angeben?

Nein. Sowohl #4f46e5 als auch 4f46e5 werden akzeptiert. Das führende # ist optional.

Werden 4-stellige und 8-stellige HEX-Werte (mit Alpha) unterstützt?

Der Parser akzeptiert sie, aber der Alpha-Kanal wird bei der Konvertierung verworfen, da RGB, HSL, HSV und CMYK in ihren klassischen Formen keinen Alpha-Kanal führen. Das Tool konzentriert sich nur auf den Farbanteil.

Kann ich eine konvertierte Farbe teilen oder als Lesezeichen speichern?

Ja. Das Formular wird per GET übermittelt, sodass die URL die konvertierte Farbe enthält. Kopieren Sie die Seiten-URL nach der Konvertierung, um die exakte Ergebnisseite zu teilen oder zu speichern.

Warum werden einige HEX-Werte in Großbuchstaben angezeigt?

Die Ausgabe vereinheitlicht HEX auf Großbuchstaben (z. B. #4F46E5), was der Konvention in vielen Design- und Marken-Styleguides entspricht. Sie können sie nach Belieben auch in Kleinbuchstaben wieder einfügen — beide sind gleichwertig.

Funktioniert es auf Mobilgeräten?

Ja. Die Benutzeroberfläche ist vollständig responsiv, und das Formular, die Palette sowie die Kontrastkarten passen sich auf kleineren Bildschirmen einspaltig an, um eine komfortable Bedienung per Touch zu ermöglichen.

Zusätzliche Ressourcen

• HSL und HSV - Wikipedia
• CMYK-Farbmodell - Wikipedia
• WCAG 2.1 Kontrast (Minimum) Anforderung