Farb Konverter
Eine beliebige Farbe einfügen (HEX, RGB, HSL, HSV, CMYK oder Name) und sofort alle Formate erhalten. Live Vorschau, Abstufungen und Harmonien, Kontrastchips, Kopieren mit einem Klick. Leertaste für Zufall drücken.
Was ist ein Farbkonverter?
Eine Farbe, jede Sprache
Dieselbe Farbe lässt sich vielfach schreiben: HEX für Stylesheets, RGB für Screens und Code, HSL für Palettenbau, HSV für Bildeditoren, CMYK für Druck, und LAB/XYZ für wahrnehmungsbasiertes Arbeiten. Dieses Tool übersetzt sofort dazwischen. In beliebiger Notation tippen und jedes Äquivalent erscheint mit Live Vorschau.
Über Konvertierung hinaus gibt es Hell und Dunkel Abstufungen, komplementäre/analoge/triadische Harmonien, Kontrastvorschau auf Weiß und Schwarz, und teilbare Links.
Anleitung
01
Beliebiges Format eingeben
HEX (#3B82F6 oder #39F), rgb(), hsl(), hsv(), cmyk(), “255,130,246” oder Namen wie teal. Wird beim Tippen automatisch erkannt.
02
Benötigtes kopieren
Jede Zeile hat eigenen Kopierknopf plus Alles kopieren. Direkt in CSS, Tailwind, Figma oder Druckspezifikation einfügen.
03
Varianten entdecken
Eine Abstufung oder Harmonie anklicken, um sie zu laden. Zum Kontrastprüfer springen, um Lesbarkeit zu verifizieren.
Praxisbeispiele
Figma HEX zu CSS und Tailwind
Designer übergibt #3B82F6, einfügen, um rgb(59,130,246) für Canvas, HSL für Hover Varianten, und einen teilbaren ?hex=… Link für das Ticket zu erhalten. Meistgenutzter Ablauf auf Konverterseiten.
Hover und Theme Varianten mit HSL
Dunkleren Button für Hover gesucht? Farbton/Sättigung behalten, Helligkeit 10 Punkte senken (z.B. hsl(217,91%,60%) → 50%). Neues HEX kopieren. Ohne Raten, konsistente Designtokens.
Markenkits in jeder Notation
Eine Markenfarbe als HEX für CSS, RGB für Apps, HSL für Theming und CMYK für Briefpapier dokumentieren, nebeneinander. Eine Abstufung anklicken, um sie zu laden und die volle 50-950 Skala zu bauen.
Druckcheck für Verpackung
Bildschirmfarben kippen im Druck. HEX einfügen, um naive CMYK Vorschau zu sehen (z.B. lebendiges Blau zu hohem Cyan/Magenta), dann mit Proofs und ICC Profilen vor Produktion bestätigen.
Foto und Canvas Berechnung mit HSV/RGB
Editoren denken in HSV/HSB (Photoshop), Code denkt in RGB Kanälen 0-255. hsv(217,76%,96%) in Kanäle für Skripte, Shader oder Bildpipelines umwandeln.
Abweichungen debuggen und Kontrast prüfen
Farbe wirkt plattformübergreifend anders? Zum Vergleich exakte Kanäle umwandeln, Weiß/Schwarz Chips prüfen, dann zum Kontrastprüfer springen, um Lesbarkeit vor Release zu verifizieren.

