Farbumrechner — HEX, RGB, HSL & CMYK konvertieren

Was dieser Farbumrechner macht

Dieser Farbumrechner übersetzt Farbwerte zwischen den vier gängigsten Formaten: HEX, RGB, HSL und CMYK. Du gibst einen Wert ein — etwa #1e90ff, rgb(30,144,255) oder hsl(210,100%,56%) — und erhältst sofort alle Entsprechungen mit einer Live-Vorschau des Farbtons. Ein eingebauter Farbwähler macht die Eingabe noch schneller. Diese deutschsprachige Version läuft vollständig im Browser: 100% im Browser — deine Daten verlassen nie dein Gerät. Keine Uploads, kein Tracking, keine Server-Logs. Die Umrechnung basiert auf reiner Mathematik, ohne externe Bibliotheken. Wichtig zu wissen: CMYK-Werte auf dem Bildschirm sind immer Näherungswerte — wer Farben für den Druck benötigt, braucht ein ICC-Profil, das Druckmedium und die Tinte berücksichtigt. Für einfache Webarbeit und schnelle Hex-in-RGB-Umrechnungen ist dieses Tool jedoch präzise und schnell.

Funktionen

Alle gängigen Formate. Konvertiere zwischen HEX, RGB, HSL und CMYK in jede Richtung — hex to rgb, rgb to hsl, cmyk into rgb und mehr, ohne Umwege.
CSS-kompatible Eingabe. Akzeptiert CSS-Schreibweisen direkt: #fff, rgb(255,255,255), hsl(210,100%,56%). Kein Reformatieren nötig — einfach aus dem Code kopieren und einfügen.
Live-Vorschau und Farbwähler. Ein nativer Browser-Farbwähler ermöglicht die visuelle Auswahl. Die Vorschau-Fläche aktualisiert sich bei jeder Eingabe sofort, sodass du Farbwerte sicher vergleichen kannst.
CMYK-Transparenz. Die CMYK-Ausgabe ist eine Bildschirm-Näherung. Das Tool erklärt klar, warum echter Druckfarben-CMYK ein ICC-Profil benötigt — du wirst nicht mit falschen Druckwerten in die Produktion geschickt.
Kopierfunktion für alle Werte. Jeden Ausgabewert kopierst du mit einem Klick in die Zwischenablage — ideal beim Arbeiten mit CSS-Variablen oder Design-Tokens in Figma und VS Code.
Keine Bibliothek, kein Tracking. Die Farbrechnung läuft in reinem JavaScript, ohne externe Abhängigkeiten. Kein Analytics-Cookie, kein Netzwerkrequest — auch der [UUID-Generator](/de/uuid-generator/) auf dieser Plattform folgt demselben Prinzip.

So benutzt du den Farbumrechner

Gib einen Farbwert ein oder wähle eine Farbe mit dem Farbwähler — alle Formate werden sofort berechnet und angezeigt.

Wert eingeben oder Farbe wählen. Tippe einen HEX-Code (#3b82f6), einen RGB-Wert (rgb(59,130,246)) oder einen HSL-Wert (hsl(217,91%,60%)) in das Eingabefeld — oder klicke auf den Farbwähler für visuelle Auswahl.
Ergebnisse ablesen. Alle Entsprechungen — HEX, RGB, HSL und CMYK — erscheinen sofort unterhalb des Eingabefelds, zusammen mit der Vorschau-Fläche.
Wert kopieren. Klicke neben dem gewünschten Format auf „Kopieren“, um den Wert direkt in die Zwischenablage zu übernehmen und in deinen CSS-Code oder dein Designtool einzufügen.
CMYK-Hinweis beachten. Für Druckprojekte: Verwende den CMYK-Wert als Richtwert. Den endgültigen Druckwert solltest du mit deiner Druckerei und dem passenden ICC-Profil abstimmen.

Häufige Anwendungsfälle

Markenfarben für den Druck aufbereiten. Agenturen in Leipzig oder Wien erhalten von Kunden oft nur einen HEX-Code. Mit diesem Tool übersetzt du ihn schnell in einen CMYK-Näherungswert, den du als Ausgangspunkt für die Abstimmung mit der Druckerei nutzen kannst.
Barrierefreie UI-Farben entwickeln. HSL eignet sich besonders gut für Accessibility-Anpassungen: Du veränderst Helligkeit und Sättigung gezielt, ohne den Farbton zu verlieren. Schnell prüfen, ob der Kontrast passt — dann den HEX-Wert in den Code übernehmen.
Farben aus Screenshots identifizieren. Du hast einen Screenshot und möchtest wissen, welcher RGB-Wert hinter einem bestimmten Farbton steckt? Wähle die Farbe mit dem Farbwähler aus und erhalte alle Formate auf einen Blick — nützlich beim Reverse-Engineering fremder Designs.
CSS-Variablen und Design-Tokens pflegen. Wenn du eine Palettendatei in HEX hast und für ein CSS-System HSL-Tokens brauchst, übersetzt du jeden Wert einzeln in Sekunden — ohne externe Tools oder Abhängigkeiten. Ähnlich hilfreich ist der [Zahlensystem Konverter](/de/number-base-converter/) für numerische Kodierungen.
Farbwerte zwischen APIs angleichen. Viele Grafik-APIs (Canvas, WebGL, three.js) erwarten RGB-Werte im Bereich 0,0–1,0, während CSS 0–255 nutzt. Hier siehst du sofort den RGB-Wert und kannst ihn entsprechend skalieren.

Häufig gestellte Fragen

Verlassen meine Farbwerte das Gerät?

Nein. Alle Berechnungen laufen vollständig im Browser. Es wird kein Wert an einen Server gesendet, kein Cookie gesetzt und kein Analytics-Skript geladen. Deine Eingaben bleiben ausschließlich auf deinem Gerät — ähnlich wie beim [Base64-Encoder und -Decoder](/de/base64/) auf dieser Plattform.

Warum weichen CMYK-Werte vom Druckergebnis ab?

CMYK auf einem Bildschirm ist immer eine Näherung, weil Monitore im RGB-Farbraum arbeiten. Echter Druckfarben-CMYK hängt von Tinte, Papier und ICC-Profil ab. Verwende den hier angezeigten CMYK-Wert als Orientierung und kläre den genauen Wert mit deiner Druckerei — das gilt besonders bei Corporate-Design-Farben.

Was bedeutet es, dass HSL-Werte in Grad angegeben werden?

Der Farbton (Hue) in HSL ist ein Winkel auf dem Farbkreis: 0° und 360° sind Rot, 120° Grün, 240° Blau. Sättigung (Saturation) und Helligkeit (Lightness) sind Prozentwerte (0%–100%). Ein häufiger Fehler: HSL-Werte direkt in eine Grafik-API zu übergeben, die stattdessen normalisierte Werte (0,0–1,0) erwartet.

Warum ergibt HEX → HSL → HEX nicht immer denselben Ausgangswert?

Bei der Umrechnung zwischen Ganzzahl-Formaten (HEX, RGB) und Fließkomma-Formaten (HSL) entstehen durch Rundung Abweichungen von 1–2 Einheiten. Das ist ein bekanntes mathematisches Artefakt und kein Fehler im Tool — die wahrnehmbare Farbdifferenz ist dabei vernachlässigbar gering.

Kann ich CMYK direkt in Pantone umrechnen?

Eine exakte CMYK-in-Pantone-Konvertierung ist nicht möglich, da Pantone-Farben auf proprietären Sonderfarb-Mischungen basieren, die keiner einfachen Formel folgen. Für „cmyk into pantone“-Anfragen: Nutze das hier angezeigte CMYK als Ausgangspunkt und gleiche es manuell mit einem Pantone-Farbfächer ab.

Wie gebe ich einen Hex-Code richtig ein?

Du kannst Kurz- oder Langform verwenden: #fff oder #ffffff. Das führende # ist optional — das Tool erkennt beides. Für RGB und HSL akzeptiert das Tool die CSS-Standardschreibweise, also etwa rgb(30,144,255) oder hsl(210,100%,56%). Leerzeichen innerhalb der Klammern sind erlaubt.