--- title: 'Farben umrechnen: HEX, RGB, HSL, HSV und CMYK' url: 'https://www.p17-tools.de/bild-druck/farbrechner' markdown: 'https://www.p17-tools.de/bild-druck/farbrechner.md' lang: de date: '2026-10-14' description: 'Farben umrechnen zwischen HEX, RGB, HSL, HSV und CMYK – mit Farbwähler, Vorschau, Kontrastprüfung nach WCAG und Komplementärfarbe. Direkt im Browser.' --- Bild & Druck # Farben umrechnen: HEX, RGB, HSL, HSV und CMYK Ändern Sie einen beliebigen Wert – alle anderen Systeme rechnen sofort mit. Dazu Vorschau, Kontrastprüfung für lesbare Schrift und die Komplementärfarbe. ## Werkzeug: Farben **Zu CMYK:** Die Umrechnung erfolgt rein rechnerisch ohne Farbprofil. Für den Druck ist das ein Anhaltspunkt, kein verbindlicher Wert – welcher CMYK-Wert eine Bildschirmfarbe tatsächlich ergibt, hängt von Papier, Druckverfahren und ICC-Profil ab. Verbindlich sind nur Sonderfarben (etwa HKS oder Pantone) oder ein Proof. ## Die Farbsysteme im Überblick | System | Werte | Wofür | |---|---|---| | **HEX** | \#000000 bis #FFFFFF | Web, CSS, Design-Werkzeuge – die kompakteste Schreibweise | | **RGB** | 0–255 je Kanal | Bildschirm, Kameras, Bildbearbeitung | | **HSL** | Farbton 0–360°, Sättigung, Helligkeit | Web und CSS, praktisch für Farbvarianten | | **HSV/HSB** | Farbton, Sättigung, Hellwert | Grafikprogramme, Farbwähler | | **CMYK** | Cyan, Magenta, Yellow, Key in % | Vierfarbdruck | RGB, HEX, HSL und HSV beschreiben alle dieselben Bildschirmfarben, nur anders sortiert – die Umrechnung dazwischen ist exakt und verlustfrei. CMYK ist die Ausnahme: Dort wechselt man das Medium, und dabei geht Farbe verloren. ## Warum HSL beim Gestalten hilft In RGB ist schwer zu sagen, wie man eine Farbe „etwas heller" macht – alle drei Werte müssten passend verschoben werden. In HSL geht genau das mit einer Zahl: - **Gleicher Farbton, andere Helligkeit** ergibt eine harmonische Abstufung für Hover-Zustände, Rahmen und Hintergründe. - **Gleiche Helligkeit, anderer Farbton** ergibt Farben, die nebeneinander gleich stark wirken. - **Sättigung reduzieren** ergibt gedeckte Varianten für Flächen, auf denen Text stehen soll. Das Gold dieser Website ist beispielsweise `hsl(42, 48%, 57%)`. Die dunklere Variante für Text ist derselbe Farbton bei geringerer Helligkeit, die helle Fläche dahinter derselbe Farbton mit reduzierter Sättigung. ## Kontrast ist kein Geschmacksthema Ob Text auf einer Farbe lesbar ist, lässt sich berechnen. Die WCAG-Richtlinien setzen dafür feste Schwellen: | Verhältnis | Bedeutung | |---|---| | ab 3:1 | genügt für große Schrift ab 18,5 pt oder 14 pt fett | | ab 4,5:1 | Mindestwert für normalen Fließtext (Stufe AA) | | ab 7:1 | Stufe AAA, auch bei kleiner Schrift und schwierigem Licht komfortabel | Das ist keine akademische Übung: Kontraste unterhalb dieser Werte sind auf Mobilgeräten bei Sonnenlicht schlicht nicht mehr lesbar – und für Menschen mit eingeschränktem Sehvermögen dauerhaft nicht. Seit dem Barrierefreiheitsstärkungsgesetz betrifft das ab Juni 2025 auch viele private Anbieter. ## Von der Bildschirmfarbe zum Druck Wer eine Hausfarbe sowohl auf der Website als auch auf Geschäftspapier und einer Wandkarte einsetzt, wird drei leicht unterschiedliche Ergebnisse sehen. Dagegen hilft nur, den Weg umzudrehen: erst die Druckfarbe festlegen – idealerweise als Sonderfarbe –, dann die Bildschirmvariante daraus ableiten. Bei großformatigen Drucksachen wie Wandkarten und Plänen begleitet die p17 Gruppe genau diesen Schritt: Die [Landkarten-Manufaktur](https://www.landkarten-manufaktur.de/) liefert Karten gedruckt, laminiert oder gerahmt, und der [Landkarten-Shop](https://www.landkarten-shop.de/) führt fertige Karten. ## Verwandte Werkzeuge - Bildmaße für den Druck: [DPI-Rechner](https://www.p17-tools.de/bild-druck/dpi-rechner) - Papierformate: [DIN-Formate](https://www.p17-tools.de/bild-druck/din-formate) - Bilder proportional skalieren: [Bildgröße berechnen](https://www.p17-tools.de/bild-druck/bildgroesse-berechnen) ## Häufige Fragen zu Farbwerten Wie rechne ich HEX in RGB um? Der Hex-Wert besteht aus drei Paaren zu je zwei Stellen im Sechzehnersystem: #C6A75C zerfällt in C6, A7 und 5C. Jedes Paar ergibt einen Wert von 0 bis 255 – hier 198, 167 und 92, also rgb(198, 167, 92). Und umgekehrt von RGB nach HEX? Jeden der drei Werte einzeln ins Sechzehnersystem umwandeln und zweistellig auffüllen: 198 wird zu C6, 167 zu A7, 92 zu 5C. Zusammengesetzt und mit Doppelkreuz davor ergibt das #C6A75C. Was bedeutet die Kurzschreibweise #FC0? Sie ist eine Abkürzung für #FFCC00: Jede Stelle wird verdoppelt. Sie funktioniert nur, wenn beide Stellen jedes Paares identisch sind – #C6A75C lässt sich deshalb nicht verkürzen. Warum sieht meine CMYK-Farbe im Druck anders aus? Weil RGB und CMYK unterschiedlich große Farbräume sind. RGB-Farben entstehen aus Licht und können leuchtender sein, als Druckfarbe auf Papier je erreichen kann – besonders bei kräftigem Blau, Grün und Orange. Die Umrechnung hier ist rein rechnerisch, ohne Farbprofil. Verbindlich sind nur ein Proof oder Sonderfarben wie HKS und Pantone. Was ist der Unterschied zwischen HSL und HSV? Beide beschreiben Farben über Farbton, Sättigung und eine dritte Größe. Bei HSL ist das die Helligkeit (Lightness): 0 % ist Schwarz, 100 % Weiß, 50 % die reine Farbe. Bei HSV ist es der Hellwert (Value): 100 % bedeutet volle Farbintensität, Weiß entsteht erst bei zusätzlich null Sättigung. HSL ist im Web verbreitet, HSV in Grafikprogrammen. Welche Schriftfarbe passt auf meinen Hintergrund? Der Rechner vergleicht den Kontrast zu Weiß und zu Schwarz nach WCAG 2.1. Für Fließtext sollte das Verhältnis mindestens 4,5:1 betragen, für große Schrift ab 18,5 pt genügen 3:1. Ab 7:1 ist auch die strengere Stufe AAA erfüllt. Wofür brauche ich die Komplementärfarbe? Als Ausgangspunkt für einen Akzent: Sie liegt im Farbkreis genau gegenüber und erzeugt den stärksten Kontrast. Für ein stimmiges Farbschema reicht das allein nicht – meist wird die Komplementärfarbe in Sättigung und Helligkeit angepasst, damit sie neben der Hauptfarbe nicht schreit. Weiterführend ## Weitere Werkzeuge aus „Bild & Druck“ - [Bildgröße](https://www.p17-tools.de/bild-druck/bildgroesse-berechnen)Proportional skalieren mit Zielbreite, Zielhöhe, Prozent oder Rahmen – in px, mm, cm und Zoll. - [Seitenverhältnis](https://www.p17-tools.de/bild-druck/seitenverhaeltnis-bestimmen)Aus Breite und Höhe das Seitenverhältnis bestimmen und mit den Standardformaten vergleichen. - [DPI & Druck](https://www.p17-tools.de/bild-druck/dpi-rechner)Druckgröße, benötigte Pixel und vorhandene Auflösung – inklusive Qualitätsbewertung. - [DIN-Formate](https://www.p17-tools.de/bild-druck/din-formate)Alle A-, B- und C-Formate mit Maßen in Millimeter, Zentimeter und Pixel. - [Alle Werkzeuge: Bild & Druck](https://www.p17-tools.de/bild-druck)Skalieren, Seitenverhältnis, DPI, DIN-Formate, Farben und QR-Codes. --- ## Navigation - Parent: [Bildmaße, Formate, Farben und QR-Codes](https://www.p17-tools.de/bild-druck.md) - Previous: [DIN-Formate von A0 bis A10 – mit Maßen in mm, cm und Pixel](https://www.p17-tools.de/bild-druck/din-formate.md) - Next: [QR-Codes erstellen – für Links, Überweisungen, Kontakte und WLAN](https://www.p17-tools.de/bild-druck/qr-code-generator.md)