Wie konvertiere ich HEX nach RGB, HSL, OKLCH und CMYK?
Tippe eine Farbe in einem Format ein - das Tool zeigt live jedes andere Format an: HEX, RGB, HSL, HSV, OKLCH, LCH, Lab, CMYK.
Plus eine Bildschirm-Pipette (Chrome / Edge) - klick auf einen beliebigen Pixel deines Desktops (funktioniert auch außerhalb des Browserfensters).
Alles läuft lokal - Farben verlassen den Browser nie.
Gebaut für Web-Entwickler (HEX/RGB/OKLCH fürs CSS), DTP-Arbeit (CMYK für den Druck), Farbwissenschaftler (Lab/LCH für Farbabstandsberechnungen).
So nutzt du das Tool
- Tippe eine Farbe ins HEX-Feld (linke Spalte) oder nutze die Pipette - "Vom Bildschirm picken" greift sich jeden Pixel deines Desktops.
- Rechts aktualisiert sich jedes Format live: RGB, HSL, HSV, OKLCH, LCH, Lab, CMYK. Jeder Block hat Kanal-Schieberegler - Änderungen in einem Format aktualisieren die anderen.
- Jeder Block hat einen "Kopieren"-Button - kopiert den CSS-fertigen String (z. B. `oklch(0.51 0.18 264.5)`).
- "Nächster CSS-Name" unter dem Swatch zeigt dir, welcher benannten CSS-Farbe du am nächsten kommst (z. B. mediumslateblue).
- Unten im linken Panel: 8 beliebte Tailwind-Farben als Presets - ideal zum Start einer Palette.
Wann das hilfreich ist
Wer profitiert vom Farb-Konverter - typische Rollen:
- Web-Entwickler - du hast ein HEX aus Figma und brauchst OKLCH für modernes CSS. Einfügen, fertig.
- DTP / Druck - HEX aus dem Brandbook, die Druckerei will CMYK. Hinweis: unseres ist approximativ - für die Druckvorstufe nutze das ICC-Profil der Druckerei.
- Migration zu OKLCH - Tailwind v4 und Radix Colors nutzen OKLCH. Einfache Konvertierung einer alten HEX-Palette ins moderne Format.
- Farbwissenschaftler - Lab und LCH sind der Standard für ΔE 2000 (Farbabstand). Exportier sie in deine Berechnungen.
- Branding - OKLCH zeigt, dass der Farbton (h) konstant bleibt bei Helligkeitsänderungen - anders als HSL.
Sobald du deine Basisfarbe hast, baust du die volle 50-950-Skala im Tailwind-Paletten-Generator, findest passende Akzente mit dem Farb-Harmonie-Tool und verifizierst dein Text-/Hintergrund-Paar gegen WCAG im Kontrast-Prüfer.
Fragen und Antworten
Nein. Der Konverter ist zu 100% lokal - Konvertierungsmathematik + CSS-Namensfarben-Lookup. Selbst die Bildschirm-Pipette nutzt die lokale EyeDropper-API - der Browser zeigt einen System-Dialog, aber das Ergebnis kommt nur zur Seite zurück.