Farbwähler (HEX, RGB, HSL, OKLCH)
Wähle eine Farbe im Sättigungs-Helligkeits-Feld oder gib HEX, RGB, HSL oder OKLCH ein. Alle Formate bleiben synchron, mit einer Tint/Shade-Skala, Pipette (Chromium) und exportierbaren Paletten für CSS und JSON.
So wählst und exportierst du Farben
1. Ziehe im Farbfeld und am Farbtonregler oder füge HEX/RGB/HSL/OKLCH ein.
2. Lies synchrones HEX, RGB, HSL und OKLCH in der Leiste.
3. Klicke eine Abstufung oder ein Harmonie-Swatch für verwandte Farben.
4. Kopiere einen Wert, einen ?hex=-Link oder exportiere CSS-Variablen / JSON.
Beispiele für den Farbwähler
Marken-Terrakotta #8F665E
Der HSV-Picker hält den Farbton, während du für Hover abdunkeln. Exportiere --color und --shade-* als CSS-Variablen.
Analoge Dashboard-Palette
Wähle Analog für Farbtöne ±30° und ±60°. Kopiere den Streifen als Custom Properties für Karten und Charts.
OKLCH für gleichmäßige Stufen
Die Abstufung ändert OKLCH-Helligkeit, damit Schritte gleichmäßiger wirken als HEX mit Weiß zu mischen. Nutze oklch() in modernem CSS.
Wann du dieses Tool nutzen solltest
• Wenn du UI-Farben wählst und HEX, RGB, HSL und OKLCH gleichzeitig brauchst.
• Wenn du Hover-/Muted-Stufen aus einem Marken-Hue ableitest.
• Wenn du eine kleine Palette (Harmonie + Rampe) als CSS-Variablen exportierst.
Harmonien für UI-Paletten
Komplementärfarben liegen 180° auseinander — starker Kontrast, sparsam für CTAs. Analoge Töne (±30–60°) wirken geschlossen in Dashboards. Triaden und Tetraden bieten mehr Vielfalt; senke die Sättigung der Extrafarben, damit Primary führt. Prüfe Textfarben im WCAG-Kontrast-Checker.
Häufige Fragen
HEX vs RGB vs HSL vs OKLCH?
HEX und RGB sind dieselbe sRGB-Farbe. HSL eignet sich für Farbton/Helligkeit. OKLCH ist wahrnehmungsnäher: ähnliche L-Schritte wirken gleichmäßiger, oklch() ist gültiges modernes CSS.
Funktioniert die Pipette in jedem Browser?
Die EyeDropper-API gibt es in Chromium (Chrome, Edge). Sonst Wert eintippen oder den visuellen Picker nutzen.
Kann ich eine Farbe teilen?
Ja. Die URL aktualisiert sich mit ?hex=RRGGBB. Link kopieren, um dieselbe Farbe zu öffnen.
Werden Farben auf einem Server verarbeitet?
Nein. Umrechnung, Harmonien und Export laufen lokal im Browser.