Farbkonverter: HEX, RGB, HSL, CMYK

Was ist Color Converter?

Color Converter ist ein kostenloses Online-Tool, das jede Farbe sofort zwischen den fünf gebräuchlichsten Farbformaten konvertiert: HEX, RGB, HSL, HSB (HSV) und CMYK. Geben Sie einen Farbwert in einem beliebigen unterstützten Format ein — das Tool erkennt automatisch das Format und zeigt alle anderen Darstellungen gleichzeitig in Echtzeit an. Es löst die alltägliche Reibung beim Wechsel zwischen einem HEX-Wert aus Figma und einer CSS-HSL-Funktion oder beim Übersetzen von Bildschirm-RGB-Werten in Druck-CMYK-Prozentwerte — ohne Werte durch einen Rechner zu kopieren. Alle Konvertierungen laufen lokal im Browser ohne Server.

Hauptfunktionen

• Zwischen HEX, RGB, HSL, HSB und CMYK konvertieren — alle fünf Formate werden gleichzeitig angezeigt, sobald eine gültige Farbe eingegeben wurde. Der Hook useColorConversion hält die Zustandsobjekte hex, rgb, hsl, hsb und cmyk synchron.
• Automatische Formaterkennung — das Textfeld erkennt HEX (Werte beginnend mit # oder passend zu /^[0-9a-f]{3,8}$/i), RGB (Präfix rgb) und HSL (Präfix hsl) automatisch und zeigt ein Badge mit „Erkannt: HEX" (oder RGB/HSL/Auto).
• Echtzeit-Konvertierung beim Tippen — jeder Tastendruck, der einen analysierbaren Wert ergibt, löst sofort ein Re-Render aller fünf Ausgabeformate aus. Kein Knopfdruck nötig.
• Beliebiges Format in die Zwischenablage kopieren — jede Format-Zeile hat einen Kopier-Button, der nach erfolgreichem Kopieren 2 Sekunden lang ein grünes Häkchen zeigt. Eine Toast-Benachrichtigung bestätigt die Aktion.
• Visuelle Farbvorschau — ein großes Vorschaufeld füllt sich mit der aktuellen Farbe und zeigt den Hex-Wert in automatisch kontrastierendem Text (Schwarz oder Weiß basierend auf Luminanz).
• Numerische Eingaben für RGB, HSL, HSB und CMYK — manuelle Anpassungsfelder ermöglichen das Einstellen einzelner Kanäle: R, G, B (0–255), H (0–360), S (0–100), L (0–100) für HSL, H (0–360), S (0–100), B (0–100) für HSB sowie C, M, Y, K (0–100) für CMYK, jeweils auf gültige Bereiche begrenzt.
• Teilbare URL — das Tool nutzt einen useShareableState-Hook, der die aktuelle Farbe in der URL kodiert und direkte Links zu bestimmten Farbkonvertierungen ermöglicht.
• Funktioniert nach dem Laden offline — keine Netzwerkanfragen während der Konvertierung; die vollständige Konvertierungsbibliothek ist mit der Seite gebündelt.

Verwendung

Schritt 1: Farbe eingeben

Öffnen Sie den Color Converter. Die linke Hälfte der Eingabekarte enthält ein Textfeld. Fügen Sie eines der folgenden ein:

• Einen Hex-Wert: #3B82F6
• Eine RGB-Funktion: rgb(59, 130, 246)
• Eine HSL-Funktion: hsl(217, 91%, 60%)
• Einen reinen Hex-String: 3b82f6 (ohne #)

Sobald Sie einen erkennbaren Wert eingeben oder einfügen, erscheint oben rechts im Eingabefeld ein kleines Badge — zum Beispiel „Erkannt: HEX". Die rechte Hälfte der Karte zeigt eine Live-Farbvorschau, die sich sofort mit der erkannten Farbe füllt.

Alternativ können Sie den nativen Farbwähler unterhalb der Vorschau verwenden. Klicken Sie auf das Farbfeld, um den Farbauswähler Ihres Browsers zu öffnen; die Auswahl einer Farbe setzt die Eingabe und aktualisiert alle Formate gleichzeitig.

Schritt 2: Alle Formate prüfen

Unterhalb der Eingabekarte listet die Karte „Alle Formate" fünf Zeilen auf:

Jede Zeile zeigt die Format-Bezeichnung, den formatierten Wert in einer Monospace-Schrift und einen Kopier-Button. Klicken Sie auf einen Kopier-Button, um den jeweiligen Wert in die Zwischenablage zu übertragen.

Schritt 3: Mit numerischen Eingaben feinabstimmen

Unterhalb des Textfelds bietet das Tool direkte numerische Eingaben für alle vier anpassbaren Farbmodelle:

• RGB: Drei Zahleneingaben mit den Bezeichnungen R, G, B — jede akzeptiert Werte von 0 bis 255 und wird auf gültige Bereiche begrenzt.
• HSL: Drei Zahleneingaben mit den Bezeichnungen H (0–360), S (0–100), L (0–100).
• HSB: Drei Zahleneingaben mit den Bezeichnungen H (0–360), S (0–100), B (0–100).
• CMYK: Vier Zahleneingaben mit den Bezeichnungen C, M, Y, K — jede akzeptiert Werte von 0 bis 100.

Jede Änderung aktualisiert den Hex-Zustand, der sich auf alle fünf Ausgabeformate sofort überträgt. Das ist nützlich, wenn Sie einen Ziel-Farbwinkel, einen Sättigungsprozentwert oder einen CMYK-Wert kennen und das entsprechende Hex für CSS benötigen.

Schritt 4: Konvertierte Werte kopieren und verwenden

Klicken Sie auf den Kopier-Button neben dem gewünschten Format. Das Button-Symbol wechselt für 2 Sekunden von einem Zwischenablage-Symbol zu einem grünen Häkchen. Am unteren Bildschirmrand erscheint ein Erfolgs-Toast.

Das Tool verfolgt außerdem einen Verlauf der Konvertierungen im HistoryPanel (Premium). Wenn Sie einen Verlaufseintrag wiederherstellen, setzt er die Eingabe auf den gespeicherten Hex-Wert und führt alle Konvertierungen erneut aus.

Schritt 5: Eine bestimmte Farbe teilen

Die URL aktualisiert sich automatisch, wenn Sie die Farbe ändern (über useShareableState). Kopieren Sie die Browser-URL, um einen direkten Link zu einer bestimmten Farbe zu teilen. Empfänger, die den Link öffnen, sehen einen Toast „Aus geteiltem Link geladen" und die geteilte Farbe vorgeladen in allen Formaten.

Praxisbeispiele

Figma-Design-Token zu CSS übersetzen

Ein Designer liefert ein Markenviolett als #8467C7. Der Entwickler benötigt den HSL-Wert für eine CSS-color-mix()-Funktion. Color Converter öffnen, #8467C7 eingeben — sofort wird hsl(261, 40%, 59%) in der HSL-Zeile angezeigt, bereit zum Einfügen.

Druckfarbe zu Web konvertieren

Eine Druckerei gibt ein Unternehmensblau als cmyk(76%, 47%, 0%, 4%) an. Die automatische Erkennung des Textfelds versteht rohe CMYK-Notation nicht, aber Sie können die Werte direkt über das CMYK-Eingabefeld eingeben: C auf 76, M auf 47, Y auf 0 und K auf 4 setzen. Die HEX-, RGB- und HSL-Ausgaben aktualisieren sich in Echtzeit und liefern sofort die webtauglichen Werte.

Dark-Mode-Palette erstellen

Ein Entwickler erstellt ein dunkles Theme und muss eine helle Farbe in eine dunklere Variante umwandeln. Er gibt #E2E8F0 (helles Slate) ein, stellt fest, dass der HSL-Wert hsl(214, 32%, 91%) ist, und reduziert dann die L-Kanal-Eingabe von 91 auf 25, um das dunkle Äquivalent zu erhalten. Die HEX-Ausgabe aktualisiert sich auf #253443, das direkt kopiert werden kann.

Tipps und bewährte Vorgehensweisen

Ohne # eingeben für schnellere Eingabe. Die Erkennungs-Regex erkennt reine Hex-Strings wie 3b82f6 als HEX-Format. Sie können direkt aus Design-Tools einfügen, die den Hash entfernen.

RGB-Eingaben für präzise Kanalsteuerung verwenden. Wenn Sie eine Farbe mit einem exakten Rotwert von 200 benötigen, geben Sie direkt in das R-Eingabefeld ein, anstatt nach dem richtigen Hex-Präfix zu suchen. Die Min/Max-Begrenzung verhindert die Eingabe von Werten außerhalb des Bereichs.

Farben über die teilbare URL als Lesezeichen speichern. Da die Farbe über useShareableState in der URL kodiert ist, können Sie häufig referenzierte Markenfarben als Lesezeichen speichern und sofort wieder öffnen, ohne Werte neu eingeben zu müssen.

Das Erkennungs-Badge ist eine schnelle Gültigkeitsprüfung. Wenn das Badge nach der Eingabe nicht erscheint, wurde die Eingabe nicht als gültige Farbe erkannt. Suchen Sie nach Tippfehlern — häufige Fehler sind ein fehlendes #, die Verwendung von rgba mit einem Alpha-Kanal (derzeit nicht geparst) oder die Eingabe von prozentualen RGB-Werten.

Alle vier Farbmodelle haben bearbeitbare Eingaben. RGB, HSL, HSB und CMYK haben alle eigene numerische Eingabefelder. Sie können bei jedem Modell beginnen, indem Sie dessen Werte direkt anpassen, und die anderen Formate aktualisieren sich in Echtzeit.

Häufige Probleme und Fehlerbehebung

Nach der Eingabe erscheint nichts in den Ausgabezeilen. Der Eingabetext wurde nicht als gültige Farbe erkannt. Die Funktion parseColorToHex verarbeitet #-Hex, reines Hex, rgb() und hsl()-Strings. Wenn Sie ein anderes Format eingegeben haben (wie ein benannter CSS-Farbname cornflowerblue), gibt die automatische Erkennung null zurück und keine Konvertierung wird ausgelöst. Verwenden Sie stattdessen einen Hex-Wert.

RGB-Eingaben akzeptieren Werte über 255. Der Code begrenzt Werte auf Math.min(255, Math.max(0, val)) bei Änderung, sodass eine Eingabe von 300 auf 255 springt, sobald das Eingabefeld verarbeitet wird. Das ist erwartetes Verhalten.

Die HSL-Farbeingabe bricht bei 360 um. Das Farbtonfeld ist auf Math.min(360, Math.max(0, val)) begrenzt. Die Eingabe von 361 setzt auf 360; die Eingabe von -1 setzt auf 0.

Der Kopier-Button reagiert nicht. Wenn navigator.clipboard.writeText fehlschlägt (zum Beispiel in einem unsicheren oder eingeschränkten Kontext), fällt das Tool auf die Methode document.execCommand('copy') zurück, die ein temporäres Textarea-Element verwendet. Wenn beide fehlschlagen, prüfen Sie, ob der Browser die Clipboard-Berechtigung für die Website hat.

Der Toast „Aus geteiltem Link geladen" erscheint unerwartet. Dieser Toast wird einmal angezeigt, wenn isFromUrl true ist, was bedeutet, dass eine Farbe im URL-Query-String kodiert war. Wenn Sie eine mit Lesezeichen versehene URL geöffnet haben, ist das erwartet. Der Toast erscheint aufgrund des hasShownShareToast-Ref-Guards nur einmal pro Seitenaufruf.

Datenschutz und Sicherheit

Color Converter verarbeitet alle Konvertierungen lokal mit JavaScript-Mathematik. Keine Farbwerte, Eingabetexte oder Konvertierungsergebnisse werden an einen Server übertragen. Die teilbare URL kodiert die Farbe nur im Browser-URL — sie wird nirgendwo gesendet, es sei denn, Sie entscheiden sich, den Link zu teilen. Das Tool nutzt die Web Clipboard API für Kopiervorgänge, die ebenfalls vollständig lokal sind. Funktioniert nach dem ersten Laden vollständig offline.

Häufig gestellte Fragen

Ist Color Converter kostenlos?

Ja, vollständig kostenlos ohne Konto erforderlich. Alle fünf Konvertierungsformate, der visuelle Farbwähler, manuelle RGB- und HSL-Eingaben, Zwischenablage-Kopieren und teilbare URLs stehen allen Nutzern kostenlos zur Verfügung. Supporter-Funktionen wie PresetsPanel und HistoryPanel erfordern eine Ko-fi-Aktivierung für 5 $ für 30 Tage Zugang.

Funktioniert Color Converter offline?

Ja. Sobald die Seite geladen wurde, läuft die gesamte Konvertierungslogik in JavaScript ohne externe Anfragen. Sie können Ihre Netzwerkverbindung trennen und weiterhin Farben konvertieren ohne Unterbrechung.

Sind meine Daten bei Color Converter sicher?

Ja. Farbwerte werden nur im Browser-Speicher verarbeitet. Nichts wird an einen Server gesendet. Die teilbare URL kodiert die Farbe clientseitig — Glyph Widgets-Server protokollieren niemals die spezifischen Farben, mit denen Sie arbeiten.

Welche Formate unterstützt Color Converter?

Das Tool unterstützt fünf Formate: HEX (3- oder 6-stellige Hex-Strings mit oder ohne #), RGB (rgb(R, G, B)-Notation), HSL (hsl(H, S%, L%)-Notation), HSB/HSV und CMYK. Alle fünf Formate haben dedizierte numerische Eingabefelder zur direkten Wertanpassung.

Was ist der Unterschied zwischen HSL und HSB?

Beide verwenden Farbton (0–360 Grad) und Sättigung (0–100%), aber der dritte Kanal unterscheidet sich. HSL verwendet Lightness (Helligkeit), wobei 50% eine vollständig gesättigte Farbe und 100% immer Weiß ist. HSB (auch HSV genannt) verwendet Brightness (Hellwert), wobei 100% die reinste Version des Farbtons und 0% immer Schwarz ist. Figma und die meisten Design-Tools zeigen HSB an; CSS verwendet HSL.

Kann ich CMYK in HEX konvertieren?

Die automatische Erkennung im Textfeld parst keine rohe CMYK-Notation, aber Sie können das CMYK-Eingabefeld verwenden, um C-, M-, Y- und K-Werte direkt einzugeben. Das Anpassen eines CMYK-Werts aktualisiert alle anderen Formate in Echtzeit, einschließlich HEX.

Warum sieht die CMYK-Konvertierung gegenüber meinen Druckwerten leicht abweichend aus?

Die Umrechnung von Bildschirm zu Druck hängt vom Farbprofil ab. Das Tool verwendet eine standardmäßige sRGB-zu-CMYK-Mathematikformel ohne ICC-Profilkorrektur. Für Druckproduktionsarbeiten verwenden Sie ein Farbverwaltungstool, das die korrekten ICC-Profile für Ihren Drucker und Ihr Papier anwendet.

Kann ich 3-stellige Kurz-Hex-Werte wie #F0F eingeben?

Ja. Die Funktion parseColorToHex erkennt Hex-Strings, die zu /^[0-9a-f]{3,8}$/i passen, was 3-stellige Kurzschreibweise einschließt. #F0F wird als gleichwertig mit #FF00FF behandelt.

Wie teile ich eine bestimmte Farbe mit einem Kollegen?

Ändern Sie die Farbe im Tool und kopieren Sie die Browser-URL. Der aktuelle Hex-Wert ist über useShareableState im URL-Query-String kodiert. Wenn Ihr Kollege den Link öffnet, sieht er die Farbe vorgeladen mit einer „Aus geteiltem Link geladen"-Benachrichtigung.

Unterstützt Color Converter Alpha (RGBA / HSLA)?

Nicht in der aktuellen Version. Der Eingabe-Parser verarbeitet rgb() und hsl(), aber nicht rgba() oder hsla(). Alpha-Kanal-Werte werden in der Konvertierungs-Pipeline nicht beibehalten. Für vollständige Alpha-Unterstützung extrahieren Sie die RGB- oder HSL-Werte manuell und behandeln Sie den Alpha-Kanal separat.

Verwandte Tools

• Color Picker — Farben direkt aus einem hochgeladenen Bild oder Ihrem Bildschirm aufnehmen und das Ergebnis an den Konverter senden.
• Contrast Checker — prüfen, ob zwei konvertierte Farben die WCAG-AA- oder AAA-Kontrastanforderungen erfüllen.
• Demnächst verfügbar: Palette Generator — harmonische Farbpaletten aus einer Basisfarbe erstellen und jedes Farbfeld in Ihr bevorzugtes Format konvertieren.

Jetzt Color Converter testen: Glyph Widgets Color Converter