Farbkonverter (Hex, RGB, HSL)
Farbvorschau
#6366f1
Bedienungsanleitung
Der Farbkonverter ist ein Online-Tool zur Konvertierung von Farbwerten zwischen HEX, RGB, HSL, HSV und CMYK – vollständig lokal in Ihrem Browser. Farbformatkonvertierung ist eine tägliche Aufgabe für Designer und Frontend-Entwickler: Figma exportiert HEX-Codes, CSS verwendet HEX und RGB/HSL, Print-Workflows benötigen CMYK. Das Tool akzeptiert jeden gültigen Farbwert und zeigt sofort den äquivalenten Wert in allen unterstützten Formaten an. Ein großes Farbmuster ermöglicht eine sofortige visuelle Bestätigung.
- Farbwert eingeben — Tippen oder fügen Sie einen beliebigen Farbwert in das Eingabefeld ein: HEX-Code (#6366f1 oder #fff), RGB-Wert, HSL-Wert oder einen CSS-Farbnamen. Der Konverter erkennt das Format automatisch.
- Farbauswähler verwenden — Klicken Sie auf das Farbmuster oder den Farbauswähler-Button, um den nativen Browser-Farbauswähler zu öffnen.
- Alle Format-Äquivalente lesen — Das Tool zeigt die gewählte Farbe gleichzeitig in HEX, RGB (0–255), RGB (0–1 normalisiert), HSL, HSV und CMYK an.
- Einzelne Kanäle anpassen — Passen Sie die Farbe durch Ändern einzelner Kanalwerte fein ab – z. B. nur den Alpha-Kanal in RGBA oder den Farbton in HSL.
- Beliebiges Format kopieren — Klicken Sie auf den „Kopieren"-Button neben einer beliebigen Format-Zeile, um diesen spezifischen Wert in die Zwischenablage zu kopieren.
- Mit dem Muster verifizieren — Das große Farbvorschaumuster zeigt immer die tatsächlich gerenderte Farbe. Verwenden Sie es zur visuellen Bestätigung vor dem Kopieren.
Häufige Fragen
Welche Farbformate unterstützt dieses Tool?
Das Tool konvertiert zwischen drei weit verbreiteten CSS-Farbformaten: HEX (#RRGGBB), RGB (rgb(r, g, b) mit Werten 0–255) und HSL (hsl(h, s%, l%) – Farbton 0–360°, Sättigung und Helligkeit 0–100%). Es akzeptiert auch CSS-Farbbezeichnungen wie "tomato" oder "deepskyblue".
Was ist der Unterschied zwischen RGB und HSL?
RGB beschreibt eine Farbe durch ihre Rot-, Grün- und Blaulichtintensitäten (je 0–255). HSL beschreibt eine Farbe durch Farbton (Position auf dem Farbrad, 0–360°), Sättigung (0–100%) und Helligkeit (0–100%). HSL ist für Designer oft intuitiver, da Helligkeit und Sättigung direkt angepasst werden können.
Wird diese Farbkonvertierung auf einem Server durchgeführt?
Nein. Die gesamte Konvertierungslogik läuft im Browser mit nativem JavaScript. Nichts wird an einen Server gesendet.
Kann ich dieses Tool offline verwenden?
2Kit ist eine PWA. Nach dem ersten Besuch wird es gecacht und funktioniert vollständig offline.
Warum muss ich zwischen Farbformaten konvertieren?
Verschiedene Tools und Workflows verwenden unterschiedliche Farbformate. Design-Tools geben oft HEX aus, während CSS-Animationen und Theming-Systeme HSL für einfachere programmatische Anpassungen bevorzugen.
Technische Umsetzung
Die gesamte Verarbeitung erfolgt ausschließlich in Ihrem Browser — es werden keine Daten an Server übertragen. Dieses Tool funktioniert als Progressive Web App (PWA) vollständig offline: Nach dem ersten Besuch werden alle Seiten und Ressourcen vom Service Worker zwischengespeichert und sind ohne Internetverbindung verfügbar. Ihre Eingabedaten verlassen Ihr Gerät nicht, sodass Sie auch sensible Inhalte wie API-Schlüssel, Passwörter, Konfigurationsdateien und vertrauliche Dokumente sicher verarbeiten können.