Der Farbformat-Konverter übersetzt Farben zwischen HEX, RGB, HSL, HSV und OKLCH. Wählen Sie eine Farbe mit dem Farbwähler, geben Sie einen Hex-Wert ein, fügen Sie einen CSS-Farbstring ein oder nutzen Sie die RGB-Schieberegler — jedes Format wird live aktualisiert und hat einen eigenen Kopier-Button.
Modernes CSS bietet ein Dutzend Möglichkeiten, dieselbe Farbe zu schreiben: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus die jeweiligen Alpha-Varianten. Oft müssen Sie zwischen diesen Formaten konvertieren — ein Figma-Entwurf liefert OKLCH, Ihr Code verwendet HEX und Ihre Theme-Variablen bevorzugen HSL für Hover-Effekte. Der Farbformat-Konverter erledigt alle Konvertierungen in einem Panel. Wählen Sie eine Farbe über den Farb-Picker, fügen Sie eine Farbe in einer beliebigen Syntax ein oder nutzen Sie die RGB-Schieberegler. Alle gängigen Formate werden gleichzeitig gerendert: HEX (mit Alpha), rgb()/rgba(), hsl()/hsla(), hsv() und oklch() — plus ein CSS-Variablen-Snippet und der berechnete Luminanzwert für schnelle Kontrastberechnungen. Der Alpha-Kanal wird durchgehend unterstützt. Jedes Format hat einen eigenen Kopier-Button, und der Parser akzeptiert native Farbreferenznamen sowie alles, was CSS unterstützt.
Zeigt HEX, RGB/RGBA, HSL/HSLA, HSV und OKLCH gleichzeitig an — wählen Sie das Format, das Ihr Code erwartet, ohne jedes Mal neu konvertieren zu müssen.
Akzeptiert HEX (#abc, #aabbcc oder #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() und native Farbbezeichnungen. Fügen Sie alles ein, was CSS unterstützt.
Verarbeitet das neue OKLCH-Format, das in modernem CSS verwendet wird — ein wahrnehmungsmäßig gleichmäßiger Farbraum, der zum neuen Standard für Designsysteme wird.
Jede Ausgabe hat einen eigenen Kopier-Button. Klicken Sie, um genau das Format zu erfassen, das Sie für Ihren Code benötigen.
Nutzen Sie Rot/Grün/Blau/Alpha-Regler für die Feinabstimmung. Jedes Format wird in Echtzeit aktualisiert, während Sie ziehen.
Transparenz wird in jedem Format unterstützt: #RRGGBBAA, rgba(...), hsla(...). Einmal eingestellt, überall konvertiert.
Figma liefert OKLCH oder HSL — fügen Sie es ein und kopieren Sie die HEX-Entsprechung für Ihre Tailwind-Konfig oder CSS-Variablen, ohne den Browser zu verlassen.
Nutzen Sie die Schieberegler, um Farbtöne zu erkunden, und notieren Sie sich die OKLCH-Werte für eine systematische Designsystem-Palette.
Konvertieren Sie eine Markenfarbe in ihre HSL-Form, um hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) für Hover-Effekte zu nutzen.
Das Luminanz-Feld liefert Ihnen den Rohwert, der für WCAG-Kontrastberechnungen verwendet wird — nützlich für präzise Berechnungen zur Barrierefreiheit.
Fügen Sie ein oklch(...) aus einer CSS-Datei ein, die Sie gerade lesen, und sehen Sie sofort, welche Farbe es tatsächlich erzeugt.
Klicken Sie auf das Farbformat-Symbol im DevSuite Pro Dock. Es öffnet sich ein Panel mit Farbwähler, Hex-Eingabe und RGB-Reglern.
Nutzen Sie den Farbwähler, geben Sie einen Hex-Wert ein oder fügen Sie einen CSS-Farbstring ein (rgb(...), oklch(...) etc.). Die Farbe wird sofort angezeigt.
Jedes Format wird darunter gerendert: HEX, RGB, HSL, HSV, OKLCH, CSS-Variable und Luminanz. Alle bleiben bei Anpassungen synchron.
Ziehen Sie die R/G/B/A-Regler für Feinabstimmungen. Ideal, um einen exakten Farbton aus einer Design-Vorgabe zu treffen.
Klicken Sie auf Kopieren in der gewünschten Zeile — der Wert wird in der korrekten Syntax in Ihre Zwischenablage kopiert.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.
