Farbkonverter.

Farbcodes zwischen HEX, RGB, HSL und CMYK sofort umrechnen. Farbe visuell auswählen oder Werte eingeben — ideal für Designer und Entwickler.

HEX
CMYK
RGB
R
G
B
HSL
H
S
L

Dieses Tool rechnet Farbcodes in Echtzeit zwischen den Formaten HEX, RGB, HSL und CMYK um. Egal ob Sie eine Website erstellen, ein Logo gestalten oder Markenfarben abgleichen — wählen Sie einfach eine Farbe aus oder geben Sie einen Wert ein, und alle vier Formate werden sofort aktualisiert. Alles läuft im Browser — keine Daten werden an einen Server gesendet.

Anleitung

Klicken Sie auf das Farbfeld oben, um die Farbauswahl Ihres Geräts zu öffnen, oder tippen Sie einen HEX-Code direkt in das HEX-Feld (das # ist optional). Sie können auch die R-, G-, B-Werte für RGB oder die H-, S-, L-Werte für HSL anpassen — alle Felder bleiben synchron. CMYK wird automatisch aktualisiert und ist schreibgeschützt. Klicken Sie auf Kopieren neben einem Format, um den CSS-fertigen Wert zu kopieren.

Farbkonvertierung funktioniert am besten, wenn eine Farbe sauber zwischen Tools wandern kann

Ein guter Farbkonverter dient nicht wirklich dazu, immer mehr Codes zu erzeugen. Er hilft dabei, eine visuelle Entscheidung intakt zu halten, während sie durch Designdateien, CSS, Komponentenbibliotheken und Druckreferenzen wandert. Dieselbe Farbe kann für eine Übergabe HEX brauchen, für die Umsetzung RGB, für Anpassungen HSL und für ein drucknahes Dokument CMYK.

Dieses Tool hält diese Formate an einer Stelle aufeinander abgestimmt, sodass Sie zwischen ihnen wechseln können, ohne die ursprüngliche Farbe aus dem Blick zu verlieren.

Wo die Reibung meist entsteht

Übergabe von Design zu Entwicklung

Eine Person spricht in Design-Tokens oder HEX, die andere braucht CSS-Werte, und schon ein kopierter Wert mit einem falschen Zeichen reicht aus, um in Produktion den falschen Farbton zu erzeugen.

Markenarbeit

Eine Markenfarbe ist nicht nur eine visuelle Idee. Sie ist ein Satz exakter Zahlenwerte, die über Assets, Code und Dokumentation hinweg zusammenpassen müssen.

Fehlersuche in bestehender UI

Wenn etwas leicht falsch aussieht, kann der Vergleich derselben Farbe über mehrere Formate zeigen, ob das Problem im Code, in der Umrechnung oder im Ausgangswert liegt.

Die Fehler, die zählen

Ähnlich aussehende Werte als austauschbar behandeln

Zwei Werte können nah wirken und trotzdem nicht dieselbe Farbe darstellen. Das ist besonders dann wichtig, wenn ein Markensystem auf Konsistenz beruht.

CMYK als identisch mit Bildschirmfarbe behandeln

CMYK ist als Referenz nützlich, aber Bildschirm- und Druck-Workflows sind keine perfekten Spiegelbilder. Die Umrechnung hilft beim Übersetzen, garantiert aber kein identisches physisches Ergebnis.

Ein Format ändern und die anderen vergessen

Der Vorteil eines synchronen Umrechners besteht darin, dass Sie eine Darstellung anpassen und die anderen sofort sauber mitziehen können.

Praktische Beispiele

Einen gewählten Farbton in Produktionscode überführen

Oft findet man den richtigen Ton zuerst visuell und braucht erst danach den exakten HEX- oder HSL-Wert für die Umsetzung.

Einen Styleguide prüfen

Wenn ein Dokument HEX, RGB und CMYK für dieselbe Markenfarbe aufführt, hilft ein Konverter dabei zu prüfen, ob diese Werte noch dieselbe beabsichtigte Farbe beschreiben.

Ein leicht off-brand wirkendes UI-Element debuggen

Wenn ein Button oder Hintergrund falsch aussieht, kann der Vergleich verknüpfter Ausgaben zeigen, ob ein falsch kopierter Wert oder ein Formatmissverständnis die Ursache ist.

Was dieses Tool nicht macht

Dieses Tool konvertiert Farbformate. Es bewertet keine Kontrast-Barrierefreiheit, baut keine komplette Palette auf und ersetzt keine kalibrierte Druckprüfung. Es dient dem sauberen Übertragen von Farbdarstellungen, nicht jeder Designentscheidung rund um Farbe.

Die nützliche Disziplin dahinter

Es geht nicht einfach darum, mehr Codes zu erzeugen. Es geht darum, eine Farbidentität kohärent zu halten, während sie durch verschiedene Teile eines Workflows wandert. Genau dort sparen Konverter echte Zeit und verhindern subtile Design-Inkonsistenzen.

Beispiele

Reines Rot #ff0000 → rgb(255, 0, 0) → hsl(0, 100%, 50%)
Himmelblau #87ceeb → rgb(135, 206, 235) → hsl(197, 71%, 73%)
Waldgrün #228b22 → rgb(34, 139, 34) → hsl(120, 61%, 34%)
Weiß #ffffff → rgb(255, 255, 255) → CMYK C:0% M:0% Y:0% K:0%
Schwarz #000000 → rgb(0, 0, 0) → CMYK C:0% M:0% Y:0% K:100%

FAQ

Was ist ein HEX-Farbcode?

Ein HEX-Code ist eine sechsstellige Zeichenkette, die im Webdesign und in CSS zur Definition von Farben verwendet wird. Er beginnt mit # gefolgt von drei Paaren hexadezimaler Ziffern, die Rot-, Grün- und Blauwerte darstellen — z. B. ist #ff0000 reines Rot.

Was ist der Unterschied zwischen RGB und CMYK?

RGB (Rot, Grün, Blau) ist ein additives Farbmodell für Bildschirme — es mischt Licht. CMYK (Cyan, Magenta, Gelb, Schwarz) ist ein subtraktives Modell für den Druck. Die angezeigten CMYK-Werte sind eine mathematische Standardnäherung aus den RGB-Werten.

Warum weichen meine CMYK-Werte von meiner Drucksoftware ab?

Professionelle Drucksoftware verwendet ICC-Farbprofile, die je nach Drucker und Papier variieren. Dieses Tool berechnet eine mathematische Standardnäherung, die für Web-Zwecke ideal ist, aber von druckspezifischen Profilen abweichen kann.

Ist dieses Tool kostenlos und datenschutzfreundlich?

Ja — vollständig kostenlos und läuft ausschließlich in Ihrem Browser. Es werden keine Farbwerte an einen Server gesendet.

Ähnliche Werkzeuge

Datenschutz und Datenverarbeitung

Dieses Werkzeug läuft vollständig in Ihrem Browser. Nichts, was Sie eingeben oder einfügen, wird an einen Server gesendet — die gesamte Verarbeitung erfolgt lokal auf Ihrem Gerät.