OKLCH-Farbskala-Generator
Gleichmäßige Farbskalen im OKLCH-Farbraum erzeugen: Stufen, Helligkeit und Sättigung einstellen – Export für CSS und Tailwind.
Der OKLCH-Farbskala-Generator erzeugt aus einer Basisfarbe eine gleichmäßige Skala im OKLCH-Farbraum. Du bestimmst Anzahl der Stufen, hellste und dunkelste Helligkeit, Sättigungskurve und eine leichte Farbtonverschiebung. Weil OKLCH wahrnehmungsgleich ist, wirken die Stufen gleichmäßig. Ausgabe als CSS-Variablen in OKLCH oder Hex, für Tailwind v4 und als JSON.
OKLCH: L 0.623, C 0.188, H 259.8
Dunkle Linie: Helligkeit, grüne Linie: Chroma über die Stufen.
:root {
--primary-50: oklch(0.971 0.014 258.34);
--primary-100: oklch(0.899 0.049 259.79);
--primary-200: oklch(0.827 0.087 259.3);
--primary-300: oklch(0.755 0.126 259.64);
--primary-400: oklch(0.683 0.168 259.64);
--primary-500: oklch(0.61 0.187 259.73);
--primary-600: oklch(0.539 0.183 259.76);
--primary-700: oklch(0.466 0.169 259.88);
--primary-800: oklch(0.393 0.146 259.86);
--primary-900: oklch(0.322 0.116 259.93);
--primary-950: oklch(0.249 0.082 260.31);
}Warum Farbskalen in OKLCH?
In HSL sehen gleich helle Werte oft unterschiedlich hell aus: Gelb wirkt heller als Blau bei gleichem L. OKLCH korrigiert das. Damit lassen sich Skalen berechnen, in denen jede Stufe den gleichen Helligkeitsabstand hat, und Farben desselben Tons behalten ihren Charakter.
Die Einstellungen
| Regler | Wirkung |
|---|---|
| Hellste / dunkelste Stufe | Bereich der Helligkeit, zum Beispiel 0,97 bis 0,25 |
| Chroma-Faktor | Skaliert die Sättigung der ganzen Skala |
| Chroma-Kurve | Glocke: an den Enden blasser, in der Mitte kräftig |
| Farbtonverschiebung | Dreht den Farbton zu den Enden hin |
So gehst du vor
- Basisfarbe eintragen und Stufenzahl wählen.
- Kurve und Bereich anpassen, bis die Skala passt.
- Export kopieren. Die klassische Tailwind-Skala erzeugt der Tailwind-Farbgenerator, Werte rechnet der Farbumrechner um.
Beispiel
Aus #3b82f6 entsteht eine Skala von oklch(0.97 …) bis oklch(0.25 …). Für Dunkelmodus-Designs senkst du die hellste Stufe auf 0,9 und
erhöhst die dunkelste auf 0,3, damit Flächen weniger kontrastreich sind.
Häufige Fragen
Was ist OKLCH?
Ein Farbraum mit den Achsen Helligkeit (L), Chroma (C, Sättigung) und Farbton (H). Gleiche Änderungen an L wirken für das Auge gleich stark. Das macht ihn ideal, um Farbskalen zu berechnen. CSS unterstützt oklch() in modernen Browsern.
Was unterscheidet das Tool vom Tailwind-Farbgenerator?
Der Tailwind-Farbgenerator folgt der Tailwind-Kurve mit festen Stufen 50 bis 950. Hier stellst du Helligkeitsbereich, Chroma-Kurve, Farbtonverschiebung und die Zahl der Stufen frei ein.
Warum verschiebe ich den Farbton?
Helle Töne wirken oft wärmer, dunkle kühler. Eine leichte Drehung des Farbtons zu den Enden hin lässt Skalen natürlicher aussehen, etwa Blau, das dunkel etwas violetter wird.
Was passiert mit Farben außerhalb von sRGB?
Sehr kräftige Töne bei extremen Helligkeiten lassen sich in sRGB nicht darstellen. Der Generator senkt dann die Chroma, bis die Farbe darstellbar ist. So passen Hex- und OKLCH-Werte zusammen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.