Farbkonverter – Farben zwischen verschiedenen Modellen umrechnen
Farben sind im digitalen Design allgegenwärtig: Ob Webentwicklung, Grafikdesign, App-Entwicklung oder Printmedien – überall begegnen dir unterschiedliche Farbformate. Unser kostenloser Online-Farbkonverter rechnet Farbwerte in Echtzeit zwischen HEX, RGB, HSL, HSV/HSB und CMYK um und bietet dir dabei einen visuellen Color Picker, Paletten-Generator und WCAG-Kontrast-Checker.
Was sind Farbmodelle und warum gibt es so viele?
Jedes Farbmodell hat seinen Ursprung in einem bestimmten Anwendungsbereich. RGB (Rot, Grün, Blau) ist das Standardmodell für Bildschirme: Monitore, Smartphones und Fernseher mischen Licht additiv aus diesen drei Grundfarben. Jeder Kanal reicht von 0 bis 255, was zusammen über 16,7 Millionen Farben ergibt.
HEX ist keine eigene Farbtheorie, sondern eine kompaktere Schreibweise für RGB. Statt rgb(99, 102, 241) schreibst du #6366F1 – ideal für CSS und HTML. Die sechs Zeichen kodieren jeweils zwei Hexadezimalstellen für Rot, Grün und Blau.
HSL und HSV – Farben intuitiv beschreiben
HSL (Hue, Saturation, Lightness) und HSV/HSB (Hue, Saturation, Value/Brightness) beschreiben Farben so, wie Menschen sie wahrnehmen: über Farbton (0–360°), Sättigung und Helligkeit. Der Vorteil: Du kannst eine Farbe systematisch aufhellen, abdunkeln oder entsättigen, ohne den Grundton zu verändern. Designer nutzen HSL besonders gern in CSS, weil sich verwandte Farbtöne leicht durch Anpassung der Lightness erzeugen lassen.
CMYK – Farben für den Druck
CMYK (Cyan, Magenta, Yellow, Key/Schwarz) ist das subtraktive Farbmodell der Druckindustrie. Während Bildschirme Licht addieren, absorbiert Druckfarbe auf Papier Licht. Deshalb können manche leuchtende Bildschirmfarben im Druck nicht exakt reproduziert werden – der sogenannte Gamut-Unterschied. Unser Konverter liefert dir eine gute Näherung der CMYK-Werte. Für professionelle Druckprojekte empfehlen wir zusätzlich ein ICC-Farbprofil.
Wann welches Farbformat verwenden?
Für Webentwicklung sind HEX und RGB der Standard. HSL eignet sich besonders gut für CSS Custom Properties und Design-Systeme, da du Varianten einer Markenfarbe durch einfaches Ändern der Lightness oder Saturation erzeugst. Für Printdesign benötigst du CMYK-Werte. HSV ist in vielen Bildbearbeitungsprogrammen wie Photoshop oder GIMP die Standardansicht im Farbwähler.
Farbharmonie und Paletten
Harmonische Farbkombinationen basieren auf geometrischen Beziehungen im Farbkreis. Komplementärfarben liegen sich im Farbkreis gegenüber (180°) und erzeugen maximalen Kontrast. Analoge Farben liegen nebeneinander (±30°) und wirken harmonisch und ruhig. Triadische Farben bilden ein gleichseitiges Dreieck (120°) im Farbkreis und bieten ein ausgewogenes, lebhaftes Farbschema. Split-Komplementär verwendet die zwei Nachbarfarben der Komplementärfarbe für mehr Vielfalt bei ähnlichem Kontrast.
Barrierefreiheit: Warum Farbkontrast wichtig ist
Etwa 8 % aller Männer und 0,5 % aller Frauen haben eine Farbsehschwäche. Die Web Content Accessibility Guidelines (WCAG) definieren Mindest-Kontrastverhältnisse, damit Texte für alle lesbar sind. Stufe AA fordert ein Verhältnis von mindestens 4,5:1 für normalen Text, Stufe AAA verlangt 7:1. Unser integrierter Kontrast-Checker zeigt dir sofort, ob deine Farbkombination die Anforderungen erfüllt – ein unverzichtbares Werkzeug für barrierefreies Webdesign.
Tipps für die Arbeit mit Farben
- 60-30-10 Regel: 60 % Hauptfarbe, 30 % Sekundärfarbe, 10 % Akzentfarbe für ausgewogene Designs
- Farben testen: Prüfe deine Farben immer auf verschiedenen Bildschirmen und bei unterschiedlichen Lichtverhältnissen
- Kontrast prüfen: Nutze den WCAG-Checker vor der Veröffentlichung – Barrierefreiheit ist kein optionaler Bonus
- HSL für Varianten: Erstelle helle und dunkle Varianten deiner Markenfarbe durch Lightness-Anpassung
- Gradients sparsam: Farbverläufe wirken modern, aber übertreibe es nicht – ein bis zwei Verläufe pro Seite reichen