Farbcode-Umrechner
HEX, RGB und HSL bidirektional umrechnen — plus CMYK-Näherung, RAL-Treffer und deutschen Farbnamen. Alles lokal, kein Upload.
- HSV / HSB
- CMYK
- RAL Classic
- Farbname (Deutsch)
Viele Design-Tools zeigen HSV/HSB statt HSL.
ℹ️ CMYK-Werte sind ohne ICC-Profil nur annähernd. Für exakte Druckfarben ein professionelles Tool verwenden.
Wann brauche ich einen Farbcode-Umrechner?
Im Webdesign und in der Mediengestaltung begegnen uns Farbcodes ständig — mal als HEX-Wert im CSS, mal als RGB-Angabe in einem Bildbearbeitungsprogramm, mal als HSL-Wert im Design-System. Dieser Umrechner wandelt alle drei Formate bidirektional um, ohne dass du die Mathematik dahinter kennen musst.
Für Druckprojekte liefert das Werkzeug eine CMYK-Näherung, die als Ausgangspunkt für die Abstimmung mit deiner Druckerei dient. Zusätzlich zeigt es passende RAL-Classic-Farbtöne an — praktisch, wenn Farben aus digitalen Entwürfen in Wandfarbe, Lackierung oder Beschriftung übertragen werden sollen.
Deutschsprachige Farbnamen werden direkt mitangezeigt, sodass du bei der Kommunikation mit Kunden oder Druckdienstleistern keine Suche in separaten Tabellen brauchst. Alle Umrechnungen laufen ausschließlich lokal im Browser — kein Upload, keine Weitergabe von Farbdaten.
Das Werkzeug eignet sich für Designer, Webentwickler, Handwerker und alle, die regelmäßig zwischen Farbsystemen wechseln — vom Corporate-Design-Update bis zur Wandgestaltung im Homeoffice.
Häufig gestellte Fragen
Wofür brauche ich eine Farbcode-Umrechnung?
Verschiedene Programme verwenden unterschiedliche Farbformate: Webentwickler arbeiten meist mit HEX-Codes (z. B. #0D7377) in CSS, Bildbearbeitungsprogramme wie Photoshop nutzen RGB-Werte (z. B. R13 G115 B119), und Designtools wie Figma unterstützen HSL für intuitive Farbvariationen. Wenn du eine Farbe aus einer Design-Vorlage in dein Webprojekt überträgst, musst du das Format konvertieren.
Was ist der Unterschied zwischen HSL und HSV/HSB?
Beide Formate beschreiben Farben über Farbton (Hue), Sättigung (Saturation) und einen dritten Wert. Bei HSL steht das „L" für Helligkeit (Lightness): L=50 % entspricht einer gesättigten Farbe, L=100 % ist immer Weiß. Bei HSV/HSB steht das „V" für Helligkeitswert (Value/Brightness): V=100 % gibt die reinste Version der Farbe, V=0 % ist immer Schwarz. Figma und Photoshop verwenden intern HSB.
Welche Farbformate kann der Umrechner ausgeben?
HEX (#RRGGBB), RGB (r, g, b), HSL (h°, s%, l%), HSV/HSB (h°, s%, v%) sowie CSS-Farbfunktionen wie hsl() und rgb() im CSS-Format für direktes Einfügen in Stylesheets.
Wie prüfe ich schnell den Kontrast für Barrierefreiheit (WCAG)?
Kopiere den HEX-Code der Vordergrundfarbe und den HEX-Code der Hintergrundfarbe und gib beide in ein separates Kontrast-Check-Tool wie den WebAIM Contrast Checker ein. WCAG AA erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text. Der Farbcode-Umrechner liefert die Korrekturwerte bei Farbvariationen in HSL, was die iterative Anpassung für ausreichend Kontrast erleichtert.
Kann ich den Werkzeug für Farben aus Figma oder Sketch nutzen?
Ja. Kopiere einfach den HEX-Farbwert aus Figma (unter „Fill" → Format „Hex") und füge ihn in das HEX-Eingabefeld ein. Das Werkzeug zeigt sofort alle Entsprechungen in RGB, HSL und HSV/HSB.