Farbkonverter

Was ist ein Farbkonverter?#

Ein Farbkonverter übersetzt eine Beschreibung einer Farbe in die anderen Beschreibungen, die Ihr Stack tatsächlich braucht. Designer händigen Ihnen einen HEX-Wert aus einem Mockup aus; CSS erlaubt rgb() oder hsl(); eine Design-Token-Pipeline möchte eine CSS-Variable; eine Charting-Bibliothek fragt nach einem RGBA-Tupel mit Alphakanal. Dieselbe Farbe trägt ständig verschiedene Gewänder, und Sie verbringen echte Zeit damit, zwischen ihnen von Hand umzuwandeln oder am Taschenrechner zu raten.

Diese Seite macht alle vier Umwandlungen zugleich. Tippen oder wählen Sie eine Farbe und Sie erhalten sofort ihren HEX-, RGB-, HSL-Wert und eine sofort einsetzbare CSS-Variablen-Deklaration, plus einen Live-Vorschau-Swatch und eine aus genau dieser Farbe abgeleitete fünfstufige Hell-/Dunkel-Palette — alles lokal in Ihrem Browser berechnet.

Der Grund, warum HEX, RGB und HSL koexistieren, ist, dass jedes für eine andere Aufgabe gut ist. HEX (#4f46e5) ist kompakt und dominiert CSS, Figma-Export und Markenrichtlinien. RGB (rgb(79, 70, 229)) macht die Rot-/Grün-/Blau-Kanäle explizit, was Bildcode und canvas-Pixelmanipulation erwarten. HSL (hsl(243, 75%, 59%)), aufgeteilt in Farbton, Sättigung und Helligkeit, ist das Einzige, worüber ein Mensch vernünftig nachdenken kann — „10 % heller machen“ ist in HSL eine einzige Zahlenänderung und in RGB ein unübersichtlicher Drei-Zahlen-Tanz.

So wird es verwendet#

1. Setzen Sie die Eingabefarbe auf eine von zwei Arten:
   • Klicken Sie auf das Farbquadrat links, um den nativen OS-Farbwähler zu öffnen und visuell zu wählen.
   • Oder tippen Sie einen Wert in das Textfeld daneben. HEX (#4f46e5, #abc oder 8-stellig #4f46e5ff mit Alpha), rgb() / rgba() und hsl() / hsla() werden alle akzeptiert.
2. Lesen Sie die Ergebnisse in der rechten Liste — HEX, RGB, HSL und CSS-Variable. Jedes Feld ist schreibgeschützt; klicken Sie hinein und kopieren Sie, oder nutzen Sie das Feld als Referenz beim Arbeiten.
3. Achten Sie auf den großen Vorschau-Block rechts; er füllt sich mit der aktuellen Farbe, sodass Sie sie gegen Ihr Design plausibilisieren können.
4. Nutzen Sie die 5-Swatch-Palette unter der Vorschau. Sie erzeugt darker, dark, base, light und lighter Varianten, indem sie die HSL-Helligkeit in 10-Punkt-Schritten verschiebt — praktisch für Hover-/Active-Zustände oder den Aufbau einer Tonwertskala aus einer einzigen Markenfarbe.
5. Die Statuszeile bestätigt die Umwandlung oder meldet eine Ungültige Farbe-Meldung, wenn Ihre Eingabe nicht parsen ließ.

Die wichtigsten Funktionen#

• Drei Formate akzeptiert, vier zurückgegeben. Fügen Sie HEX, rgb() oder hsl() ein und erhalten Sie HEX, RGB, HSL und eine CSS-Variablen-Deklaration in einem Durchgang zurück.
• Alpha-bewusst. 8-stelliges HEX (#rrggbbaa) und rgba()/hsla()-Eingaben tragen ihren Alphakanal durch zur Ausgabe, sodass transluzente Farben korrekt round-trippen.
• Tonwert-Paletten-Generator. Die fünfstufige Hell-/Dunkel-Zeile wird aus dem eigenen HSL Ihrer Farbe abgeleitet, nicht aus einer fixen Rampe — sie sieht immer wie dieselbe Familie aus.
• Kopierbereite CSS-Variable. Die Zeile --color-brand: #4f46e5; lässt sich direkt in einen :root-Block einsetzen, später auf Ihren Token-Namen umbenannt.
• 100 % clientseitig. Kein Backend, keine Netzwerkanfrage. Ihre Markenfarben verlassen nie die Seite.

Anwendungsbeispiel#

Die Seite lädt mit dem Indigo #4f46e5. Mit dieser Eingabe füllen sich die vier Felder als:

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS-Var:    --color-brand: #4f46e5;

Beachten Sie, wie die HSL-Form hsl(243, 75%, 59%) sich wie ein Satz liest: Farbton 243 (ein Blau-Violett-Winkel im Farbkreis), 75 % Sättigung (recht lebhaft), 59 % Helligkeit (Mittenton, etwas heller als mittleres Grau). Würde Sie ein Designer bitten, „für einen Hover-Zustand einen Tick dunkler zu machen“, würden Sie die 59 auf 49 senken und hsl(243, 75%, 49%) erhalten — und in der Tat ist das exakt der dark-Swatch, den der Palettengenerator unter der Vorschau erzeugt, neben light bei 69 % und den Extremen bei 39 % und 79 %.

Gehen Sie stattdessen von einer CSS-Variablen aus, die Sie bereits besitzen, fügen Sie ihren Wert ins Textfeld ein. rgba(79, 70, 229, 0.5) wird als dasselbe Indigo bei 50 % Opazität geparst, und die HEX-Ausgabe wird #4f46e580 (8-stellig, Alpha 0x80 ≈ 0,5), bereit zum Einfügen in ein Stylesheet, das HEX bevorzugt.

FAQ#

Mein Designer hat mir #4f46e5 gegeben, aber die Dev-Tools zeigen rgb(79, 70, 229). Ist daselbe Farbe?#

Ja, exakt. HEX und RGB sind zwei Serialisierungen derselben sRGB-Werte. #4f46e5 zerfällt in Bytepaare 4f, 46, e5, was die Hex-Werte für 79, 70 und 229 sind. Nutzen Sie, was Ihr Kontext bevorzugt — CSS behandelt sie als identisch.

Wann sollte ich nach HSL anstelle von HEX greifen?#

Wann immer Sie eine Farbe vorhersagbar nach Gefühl verändern wollen. Dunkler machen, heller machen, entsättigen oder eine 5-Stufen-Palette aus einer Markenfarbe bauen ist in HSL eine Zahl und in RGB eine frustrierende drei-Wege-Balance. HEX ist am besten für Speichern und Copy-Paste; HSL ist am besten für Bearbeiten.

Warum sieht die Palette bei sehr dunklen oder hellen Farben manchmal ungleichmäßig aus?#

Der Generator verschiebt die Helligkeit in fixen 10-Punkt-Schritten und clampet bei 0 % und 100 %. Nahe diesen Grenzen komprimieren sich die Schritte, weil kein Raum mehr zum Bewegen bleibt — eine Farbe bei 95 % Helligkeit hat nur 5 Punkte „heller“, bevor sie Reinweiß trifft. Das ist eine Eigenschaft des HSL-Raums selbst, kein Bug.

Unterstützt dieses Werkzeug P3- oder Wide-Gamut-Farben?#

Nein. Es arbeitet im sRGB-Raum, den CSS HEX/RGB/HSL beschreiben, was das meiste Web-Arbeiten abdeckt. Display-P3 und die color()-Syntax sind eine andere Pipeline und werden hier nicht geparst.