devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Farb-Tools

Farbkonverter

Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.

Läuft im Browser · nichts wird hochgeladen
#4f46e5
Probiere:

Alle Formate

Tints & Shades-Palette (50–950)

Optionen
War dieses Tool hilfreich?Sei der Erste, der bewertet

So nutzt du: Farbkonverter

  1. 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.
  2. Passe die Deckkraft an, wenn du Transparenz brauchst; 8-stellige HEX-Werte und / alpha-Angaben werden automatisch aktualisiert.
  3. Klicke neben dem gewünschten Format auf Kopieren. Wechsle zur Legacy-Syntax, wenn dein Code rgba(…, …) mit Kommas verwendet.
  4. 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 übersetzt eine Farbe in die verschiedenen Schreibweisen, 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 Design-System wird womöglich in OKLCH geschrieben. Deshalb gehört das schnelle und korrekte Umrechnen zum Alltag.

Unterstützte Formate

FormatBeispielGeeignet für
HEX (3, 4, 6, 8 Stellen)#4f46e5, #4f46e580Das gängigste Übergabeformat. Das optionale 4. bzw. 8. Zeichenpaar ist der Alpha-Wert: 80 ≈ 50 %.
RGB / RGBArgb(79 70 229 / 0.5)Kanalberechnungen, Canvas, älterer rgba()-Code.
HSL / HSLAhsl(243 75% 59%)Schnelle manuelle Anpassungen von Farbton, Sättigung und Helligkeit.
HWBhwb(243 27% 10%)Mischung eines reinen Farbtons mit Weiß und Schwarz — intuitiv für Farbwähler.
OKLCHoklch(51% 0.23 277)Wahrnehmungsgleichmäßige Paletten und Design-Tokens (Tailwind CSS v4 liefert seine Palette in OKLCH).
CMYKcmyk(66%, 69%, 0%, 10%)Grober Ausgangspunkt für den Druck — siehe Hinweis unten.
Farbnamentomato, rebeccapurpleAlle 148 CSS-Schlüsselwörter werden erkannt; das Tool zeigt zudem für jede Farbe den nächstliegenden Namen.

Warum sich OKLCH lohnt

Bei HSL wirkt Gelb mit „50 % Helligkeit“ deutlich heller als Blau mit 50 %, weil HSL eine einfache geometrische Umrechnung von RGB ist. OKLCH basiert auf dem OKLab-Modell, das so entworfen wurde, dass gleich große Schritte in L (Lightness, Helligkeit) auch für das Auge gleich groß wirken. C steht für Chroma (Farbintensität), H für den Farbwinkel. Damit eignet sich OKLCH ideal für konsistente Abstufungen, Hover-Zustände und barrierearme Farbpaare. OKLCH kann auch Farben außerhalb von sRGB beschreiben (z. B. Display P3); gibst du eine solche Farbe ein, rechnet dieses Tool sie nach sRGB um 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) und 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. Möchtest 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 nutzen die übliche unkalibrierte Formel (K = 1 − max(R, G, B)). Das reicht für Entwürfe, nicht aber für markenkritische Drucksachen — lass dir in der Druckerei eine profilierte Umrechnung geben.

Farben in Webflow verwenden

Füge den HEX-Wert in den Farbwähler von Webflow oder in eine Color variable (Bereich Variables) ein. Wenn du pro 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 verweisen können statt auf fest codierte Werte.

Häufige Fragen

Wie rechne ich HEX per Hand in RGB um?
Teile die sechs Ziffern in drei Paare und rechne jedes Paar von Basis 16 in Basis 10 um. Für #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-Farbwert?
Die letzten beiden Ziffern sind der Alpha-Kanal (Deckkraft) von 00 (vollständig transparent) bis ff (deckend). #4f46e580 ist das Indigo bei 128/255 ≈ 50 % Deckkraft. Alle modernen Browser unterstützen 4- und 8-stellige HEX-Werte.
Sollte ich OKLCH statt HEX oder HSL verwenden?
Für Design-Tokens und generierte Abstufungen ist OKLCH meist besser, weil seine Helligkeit wahrnehmungsgleichmäßig ist und sich damit auch Farben im breiten Farbraum ausdrücken lassen. Es wird in allen aktuellen gängigen Browsern unterstützt. HEX bleibt das portabelste Format für Übergaben und ältere Tools.
Warum ändert sich mein HSL-Wert nach der Umrechnung leicht?
Farben auf dem Bildschirm werden als 8-Bit-RGB gespeichert (0–255 pro Kanal), daher runden viele HSL-Werte auf dieselbe RGB-Farbe. Das Tool zeigt HSL mit einer Nachkommastelle, damit die Rückrechnung denselben HEX-Wert ergibt.
Was ist der Unterschied zwischen HSL und HWB?
Beide verwenden einen Farbwinkel. HSL legt dann Sättigung und Helligkeit fest, während HWB angibt, wie viel Weiß und Schwarz dem reinen Farbton beigemischt wird — hwb(0 0% 0%) ist reines Rot und hwb(0 50% 0%) ist Rot mit 50 % Weiß (Rosa). HWB ist in Farbwählern oft leichter nachvollziehbar.
Kann ich Farbkonverter als Web-App installieren und offline nutzen?
Ja. Farbkonverter ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

Ähnliche Tools

CSS Verlauf GeneratorGestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten. Kopie…Box-Shadow-GeneratorStapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Spread und Deckkraft auf einer Live-Karte an…Zahlensystem UmrechnerGib eine Zahl in einer beliebigen Basis ein und sieh sie sofort in allen anderen. Prüfe vorzeichenbehaftete…