Zum Hauptinhalt springen
ImageColorPix

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.

#3B82F6

auf Weiß / Schwarz

Schattierungen & Tönungen, anklicken zum Laden

Harmonien, anklicken zum Laden

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.

Häufige Fragen

1Was ist der Unterschied zwischen HEX, RGB und HSL?
Meistgefragt. HEX und RGB sind dieselbe 24-bit Farbe: #FF0000 ist Byte für Byte rgb(255,0,0). HEX ist kompakt für CSS, RGB zeigt Kanäle für Code. HSL fasst es als Farbton/Sättigung/Helligkeit, daher brauchen Hover Shades und Themes nur eine geänderte Zahl.
2Welche Eingabeformate werden akzeptiert?
HEX 3/6 mit oder ohne #, rgb()/hsl()/hsv()/cmyk() Komma oder Leerzeichen Syntax, reine “r,g,b” Tripel, und CSS Namen wie teal. Alles Unlesbare zeigt einen Hinweis und behält die letzte gültige Farbe.
3Warum sehen Zahlen anders aus, wenn es dieselbe Farbe ist?
Basen unterscheiden sich, nicht die Farbe: HEX ist Basis 16, RGB sind 0-255 Dezimalen, HSL sind Grad plus Prozent. Kleine Rundung (+/-1) nach Konvertierung ist normales Fließkomma Verhalten.
4Wann HSL oder HSV statt HEX nutzen?
Beim Feintuning von Optik: Farbton behalten, Sättigung für gedeckte Themes senken, oder Helligkeit für Hover/Dark Mode Stufen senken. HSV passt zu Picker UIs. HSL passt zu Theming Denkmodellen. Ergebnis als HEX liefern.
5Ist CMYK genau? Passt es im Druck?
Meistgefragte Druckfrage. Unser CMYK ist Standard naive Berechnung, gut für Vorschau, nicht druckgenau. Tinte, Papier und ICC Profile verschieben echtes Ergebnis. Kritische Verpackung proofen und Zeile als Startpunkt behandeln.
6Wie für CSS, Tailwind oder Figma kopieren?
Jede Zeile hat eigenen Kopierknopf plus Alles kopieren für den kompletten Block. HEX in Variablen, RGB in Canvas Code einfügen, oder mit Abstufungen eine Tailwind Skala füllen. Die URL (?hex=…) merkt exakt diese Farbe für das Handoff.
7Werden Transparenz oder Werte außerhalb behandelt?
Dieser Konverter ist bewusst nur opak (HEX/RGB/HSL ohne Alpha), damit Zeilen vergleichbar bleiben. Kanäle außerhalb werden begrenzt (z.B. 300 zu 255), nicht abgelehnt. Eingefügtes bricht nie die Vorschau.
8Werden Daten hochgeladen?
Nein. Kostenlos, ohne Anmeldung. Teilbare Links bleiben auf dem Rechner, bis sie gesendet werden.