Design
Farbkonverter
Rechne Farben zwischen allen gängigen Schreibweisen um – HEX, RGB, HSL, HWB, das moderne OKLCH, CMYK und CSS-Namen. Dazu Deckkraft, Pipette, gleichmäßige Abstufungen, Farbharmonien und Code für Apps.
- Läuft komplett in deinem Browser
- Keine Datenübertragung
- Ohne Anmeldung
- Kostenlos
Farbe
Abstufungen & Harmonien
Berechnet im Farbraum OKLCH – dadurch wirken die Stufen gleichmäßig hell. Klick übernimmt die Farbe.
Alle Schreibweisen
Anleitung
So funktioniert’s
- Farbe eingeben
Tippe einen Farbwert in beliebiger Schreibweise ein – etwa #3366cc, rgb(51 102 204), hsl(220 60% 50%) oder einfach „tomato“. Alternativ den Farbwähler, die Pipette oder „Zufall“ nutzen.
- Deckkraft einstellen
Mit dem Regler wird die Farbe halbtransparent; alle Schreibweisen enthalten dann den Alpha-Wert.
- Kopieren
Rechts stehen alle Schreibweisen – von HEX bis SwiftUI. Ein Klick auf „Kopieren“ genügt.
- Palette entwickeln
Unten findest du helle und dunkle Abstufungen sowie passende Farben nach den klassischen Harmonie-Regeln. Ein Klick übernimmt die Farbe.
FAQ
Häufige Fragen
Welche Schreibweise soll ich in CSS verwenden?
Alle funktionieren in jedem modernen Browser. HEX ist am kürzesten, HSL ist leicht anzupassen (z. B. nur die Helligkeit ändern), und OKLCH eignet sich am besten für Farbpaletten, weil gleiche Helligkeitswerte auch gleich hell wirken.
Was ist OKLCH?
Ein moderner Farbraum, der sich an der menschlichen Wahrnehmung orientiert: L ist die Helligkeit, C die Buntheit, H der Farbton. Anders als bei HSL wirken ein Gelb und ein Blau mit gleichem L-Wert tatsächlich gleich hell. Alle aktuellen Browser unterstützen oklch() in CSS.
Warum stimmt CMYK nicht genau mit dem Druck überein?
Die Umrechnung ist eine einfache Formel ohne Farbprofil. Wie eine Farbe im Druck aussieht, hängt von Papier, Druckverfahren und Profil (z. B. ISO Coated) ab. Für verbindliche Druckfarben bitte die Druckerei oder ein Grafikprogramm mit Farbmanagement fragen.
Was bedeutet der Kontrast-Wert?
Er zeigt, wie gut Schrift in Weiß oder Schwarz auf der Farbe lesbar wäre – nach den WCAG-Richtlinien für Barrierefreiheit. Ab 4,5 : 1 gilt normaler Text als gut lesbar (Stufe AA). Genauer geht das im Kontrast Checker.
Was ist der Alpha-Wert?
Die Deckkraft: 1 bzw. 100 % ist deckend, 0 ist unsichtbar. In HEX wird sie als zwei zusätzliche Stellen angehängt (#33669980 = 50 %), in RGB und HSL nach einem Schrägstrich.
Werden meine Farben gespeichert?
Nein. Alles wird in deinem Browser berechnet, nichts wird gesendet oder gespeichert.