Farbwerte
Konverter zwischen den Farbmodellen HEX, RGB, HSL und OKLCH
ℹ️ Kurz erklärt: Was bedeuten HEX, RGB, HSL und OKLCH?
In diesem Color Picker kannst du Farben in verschiedenen Farbformaten anzeigen und bearbeiten. Jedes Format beschreibt dieselbe Farbe – nur mit einem anderen Blickwinkel (z. B. technisch vs. intuitiv).
HEX ist die im Web häufigste Farbschreibweise. Ein HEX-Farbwert besteht aus
sechs hexadezimalen Zeichen und basiert auf den RGB-Anteilen
(z. B. #6366F1). Typisch in CSS/HTML und Design-Tools.
RGB beschreibt Farben über die Intensität von Rot, Grün und Blau (0–255)
(z. B. rgb(99, 102, 241)). Technisch präzise, aber weniger „gefühlt“ steuerbar.
HSL steht für Farbton, Sättigung und Helligkeit
(z. B. hsl(239 86% 67%)). Gut, um schnell Varianten zu erzeugen – aber
Lightness wirkt nicht immer gleich hell.
OKLCH ist ein modernes, wahrnehmungsbasiertes Modell. Es trennt Helligkeit und Farbstärke sauberer und eignet sich besonders für gleichmäßige Skalen, Designsysteme und Dark Mode.
Wenn du einen Wert änderst, werden die anderen automatisch umgerechnet.
WCAG Kontrastverhältnis: Barrierefreiheit nach WCAG 2.1 (AA/AAA)
Prüfe das Kontrastverhältnis deiner Textfarbe zum Hintergrund und sieh sofort, ob WCAG 2.1 Anforderungen für AA oder AAA erfüllt sind – wichtig für Lesbarkeit, Dark Mode und Accessibility.
Gespeicherte Farb-Varianten und Farb-Paletten
Speichert aktuelle Kombination aus Hintergrund, Textfarbe, Größe & Beispieltext.