Farben umrechnen

Rechnen Sie eine Farbe zwischen HEX, RGB, HSL, HSV und CMYK um — live in beide Richtungen, direkt im Browser.

So funktioniert es

  1. Wählen Sie eine Farbe mit dem Farbwähler des Browsers oder fügen Sie einen Wert ein, den Sie schon haben — #fff, rgb(255 0 0) und hsl(210, 100%, 50%) werden alle verstanden.
  2. Alle anderen Formate aktualisieren sich sofort: HEX, RGB, HSL, HSV und CMYK bleiben in beide Richtungen synchron, und das große Farbfeld zeigt das Ergebnis.
  3. Klicken Sie auf „Kopieren“ neben dem Format, das Sie brauchen. Alles läuft in Ihrem Browser — keine Farbe wird jemals hochgeladen.

Über dieses Tool

Jede Farbe auf einem Bildschirm ist physikalisch dasselbe — eine Menge an rotem, grünem und blauem Licht —, aber Designer, Entwickler und Druckereien beschreiben sie in verschiedenen Sprachen. HEX ist kompakt und in CSS universell; RGB sind die rohen Kanalwerte; HSL und HSV beschreiben eine Farbe so, wie ein Mensch über sie denkt, als Farbton plus wie kräftig und wie hell sie ist; CMYK beschreibt die vier Druckfarben, die eine Maschine aufs Papier bringt. Dieser Konverter hält eine Farbe im Speicher und zeigt sie in allen fünf Sprachen gleichzeitig.

Intern wird jede Eingabe zuerst nach RGB normalisiert. Beim Einlesen von HEX wird die dreistellige Kurzform erweitert (aus #fff wird #ffffff) und ein eingefügtes Alpha-Paar ignoriert. HSL und HSV nutzen das übliche Chroma-Modell: Das Chroma ergibt sich aus der Sättigung zusammen mit Helligkeit (L) beziehungsweise Hellwert (V), eine zweite Komponente aus der Position des Farbtons innerhalb seines 60°-Sektors, und ein konstanter Offset hebt das Ergebnis auf die richtige Helligkeit. CMYK verwendet die klassische Bildschirmumrechnung, bei der Schwarz eins minus dem größten Kanal ist und jede Druckfarbe der verbleibende Abstand zu diesem Schwarz. Der Parser ist bewusst großzügig — Kommas, Leerzeichen, Schrägstriche und Prozentzeichen sind alle optional, sodass rgb(255 0 0), 255,0,0 und #f00 exakt dieselbe Farbe ergeben.

Typische Anwendungen: einen Marken-HEX in das HSL bringen, das eine CSS-Variable erwartet, das RGB ablesen, das ein Design-Tool verlangt, oder ein grobes CMYK für die Druckerei ermitteln. Letzteres verdient eine Warnung. CMYK am Bildschirm ist immer eine Annäherung: Der echte Druck hängt vom ICC-Profil der Maschine, vom Farbsatz und vom Papier ab, und kräftige Bildschirmfarben — besonders leuchtendes Blau und Grün — haben keine exakte Entsprechung in Druckfarbe. Behandeln Sie das CMYK hier als Ausgangspunkt, nicht als Proof. Nichts, was Sie eingeben, wird hochgeladen: Die gesamte Umrechnung läuft in JavaScript auf Ihrem Gerät.

Die Formel

HEX ist die hexadezimale Schreibweise der drei RGB-Bytes. HSL → RGB: Chroma C = (1 − |2L − 1|) × S, Zwischenwert X = C × (1 − |(H/60) mod 2 − 1|), Offset m = L − C/2; das Tripel (C, X, 0) wird gemäß dem 60°-Farbtonsektor rotiert und m zu allen drei Kanälen addiert. HSV → RGB verwendet C = V × S und m = V − C. RGB → CMYK: K = 1 − max(R, G, B) und jede Druckfarbe = (1 − Kanal − K) / (1 − K).

Häufig gestellte Fragen

Welche Farbformate kann ich einfügen?

HEX mit oder ohne # (#fff, #ffffff, 3498db), rgb() und rgba(), hsl() und hsla(), hsv() oder hsb(), cmyk() sowie rund dreißig gängige CSS-Farbnamen wie red, teal oder crimson. Die Trennzeichen sind flexibel: Kommas, Leerzeichen und Schrägstriche funktionieren alle.

Ist die CMYK-Ausgabe für den Druck genau?

Nein — betrachten Sie sie als Annäherung. Die Umrechnung hier ist die übliche Bildschirmformel und ignoriert Farbprofile, während eine echte Druckmaschine ein ICC-Profil nutzt, das von Druckfarbe, Papier und Maschine abhängt. Fragen Sie Ihre Druckerei nach dem verwendeten Profil, bevor Sie sich auf einen Wert festlegen.

Was ist der Unterschied zwischen HSL und HSV?

Beide gehen vom selben Farbtonwinkel aus, beschreiben die Helligkeit aber unterschiedlich. In HSL ist 50 % Lightness die reine Farbe und 100 % immer Weiß; in HSV ist 100 % Value die reine Farbe, und Weiß erreichen Sie nur, indem Sie die Sättigung senken. Design-Tools zeigen meist HSV, CSS verwendet HSL.

Kommt das Tool mit Transparenz zurecht?

Es liest den Alphakanal und verwirft ihn. Wenn Sie ein achtstelliges HEX oder einen rgba()-Wert einfügen, wird nur die deckende Farbe umgerechnet — die Transparenz wird nicht in die anderen Formate übernommen.

Verlassen meine Farben den Browser?

Nein. Jede Umrechnung läuft in JavaScript auf Ihrem Gerät. Nichts wird an einen Server gesendet, protokolliert oder gespeichert.

Verwandte Tools

Lange Links? Kürzen Sie sie kostenlos

Vai.la verwandelt jede URL in einen Kurzlink mit Klick-Statistiken, QR-Code und Ihrem eigenen Biolink.

Vai.la übernimmt keine Verantwortung für die Nutzung der Tools oder für Entscheidungen, die auf ihren Ergebnissen basieren.