So nutzt du: Farbkonverter
- Gib eine Farbe in Farbwert ein oder füge sie ein — jedes CSS-Format funktioniert — oder wähle eine Farbe mit dem Farbwähler aus.
- Passe die Deckkraft an, wenn du Transparenz brauchst; 8-stellige HEX-Werte und
/ alpha-Angaben werden automatisch aktualisiert. - Klicke neben dem gewünschten Format auf Kopieren. Wechsle zur Legacy-Syntax, wenn dein Code
rgba(…, …)mit Kommas verwendet. - Scrolle zur Palette, um 11 Tints und Shades zu erhalten; wähle CSS-Variablen, Tailwind v4, SCSS oder JSON als Ausgabe und kopiere oder lade sie herunter.
Was ist ein Farbkonverter?
Ein Farbkonverter wandelt eine Farbe in die verschiedenen Schreibweisen um, die CSS und Design-Tools verwenden. Dasselbe Indigo lässt sich als #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) oder oklch(51.06% 0.2301 276.97) schreiben — alle beschreiben dieselbe sRGB-Farbe. Designer liefern HEX-Werte aus Figma, eine Komponentenbibliothek erwartet HSL-Kanäle, und ein modernes Designsystem ist vielleicht in OKLCH geschrieben. Deshalb ist es ein alltäglicher Handgriff, Farben schnell und korrekt umzurechnen.
Unterstützte Formate
| Format | Beispiel | Geeignet für |
|---|---|---|
| HEX (3, 4, 6, 8 Stellen) | #4f46e5, #4f46e580 | Das gängigste Übergabeformat. Das optionale 4. bzw. 8. Stellenpaar ist der Alpha-Wert: 80 ≈ 50 %. |
| RGB / RGBA | rgb(79 70 229 / 0.5) | Kanalberechnungen, Canvas, älterer rgba()-Code. |
| HSL / HSLA | hsl(243 75% 59%) | Schnelle manuelle Anpassungen von Farbton, Sättigung und Helligkeit. |
| HWB | hwb(243 27% 10%) | Mischung eines reinen Farbtons mit Weiß und Schwarz — intuitiv für Farbwähler. |
| OKLCH | oklch(51% 0.23 277) | Wahrnehmungsgleichmäßige Paletten und Design-Tokens (Tailwind CSS v4 liefert seine Palette in OKLCH). |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Ein grober Ausgangspunkt für den Druck — siehe Hinweis unten. |
| Farbnamen | tomato, rebeccapurple | Alle 148 CSS-Schlüsselwörter werden erkannt; das Tool zeigt außerdem für jede Farbe den nächstliegenden Namen an. |
Warum sich OKLCH lohnt
In HSL wirkt ein Gelb mit „50 % Helligkeit“ deutlich heller als ein Blau mit 50 %, weil HSL nur eine einfache geometrische Umformung von RGB ist. OKLCH basiert auf dem OKLab-Modell, das so entworfen wurde, dass gleich große Schritte bei L (Helligkeit) für das Auge gleich groß wirken; C steht für Chroma (Farbintensität) und H für den Farbwinkel. Damit eignet sich OKLCH ideal für konsistente Abstufungen, Hover-Zustände und barrierefreie Farbpaare. OKLCH kann außerdem Farben außerhalb von sRGB beschreiben (z. B. Display P3). Wenn du so eine Farbe eingibst, schneidet dieses Tool sie auf sRGB zu und markiert sie.
So wird die 50–950-Palette erzeugt
Die Palette behält den Farbton deiner Farbe bei und arbeitet in OKLCH: Jede Stufe erhält ein festes Helligkeitsziel (von sehr hell 50 bis sehr dunkel 950) sowie einen Anteil der Chroma deiner Farbe, der bei Bedarf reduziert wird, damit jedes Feld innerhalb von sRGB bleibt. Mit aktivierter Option Meine exakte Farbe behalten ersetzt deine Eingabe die Stufe mit der nächstliegenden Helligkeit, sodass die Markenfarbe unverändert in der Skala erscheint. Willst du Paare aus der Palette auf Barrierefreiheit prüfen? Nutze dafür den Kontrast-Checker.
Ein Hinweis zu CMYK
Die Umrechnung von Bildschirm zu Druck hängt von Farbe, Papier und dem ICC-Profil deiner Druckerei ab. Die CMYK-Werte hier verwenden die übliche unkalibrierte Formel (K = 1 − max(R, G, B)). Das reicht für Entwürfe, aber nicht für markenkritische Druckprodukte — frag deine Druckerei nach einer profilierten Umrechnung.
Farben in Webflow verwenden
Füge den HEX-Wert in Webflows Farbwähler oder in eine Farbvariable (Variablen-Panel) ein. Wenn du für jede Palettenstufe eine Variable anlegst — z. B. Brand 50 … Brand 950 — erhältst du dieselbe Token-Struktur wie bei der CSS-Variablen-Ausgabe, sodass Klassen auf Abstufungen statt auf fest codierte Werte verweisen können.
Auch gesucht als: hex zu rgb, rgb zu hex, hex zu hsl, oklch konverter, farbwähler, cmyk umrechner, hwb farbe, farbpalette generator.
Passende Tools zu: Farbkonverter
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- Box-Shadow-Generator — Stapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer Live-Karte an und kopiere das CSS für box-shadow oder text-shadow.
- Zahlensystem-Umrechner — Gib eine Zahl in einer beliebigen Basis ein und sieh sie sofort in allen anderen.
- Bild in Base64 — Wandle ein PNG-, JPEG-, SVG-, WebP- oder GIF-Bild in eine Base64-Daten-URI mit kopierfertigem CSS und HTML um – oder füge eine Base64-Zeichenkette ein, um eine Vorschau des Bildes anzuzeigen und es herunterzuladen.
Häufige Fragen
Wie rechne ich HEX von Hand in RGB um?
#4F46E5: 4F = 79, 46 = 70, E5 = 229, also ist die Farbe rgb(79 70 229). Ein 3-stelliger Code wie #f60 wird vorher verdoppelt (#ff6600).Was bedeutet ein 8-stelliger HEX-Wert?
00 (vollständig transparent) bis ff (deckend). #4f46e580 ist das Indigo mit 128/255 ≈ 50 % Deckkraft. Alle modernen Browser unterstützen 4- und 8-stellige HEX-Werte.Sollte ich statt HEX oder HSL lieber OKLCH verwenden?
Warum ändert sich mein HSL-Wert nach der Umrechnung leicht?
Was ist der Unterschied zwischen HSL und HWB?
hwb(0 0% 0%) ist reines Rot, hwb(0 50% 0%) ist Rot mit 50 % Weiß (Rosa). HWB lässt sich in Farbwählern oft leichter nachvollziehen.