Verlaufsgenerator

OKLCH-wahrnehmungsgleichförmige Verläufe, keine Graubänder, CSS-Export mit einem Klick.

Profil →Position0%

Profil →Position100%

Winkel90°Sanfte Interpolation (keine tote Zone)

Verlaufs-Bibliothek

48 klassische Kombinationen aus der Community – klicke, um Stopps, Typ und Winkel auf einmal anzuwenden.

Sonnenuntergang

Ozean

Wald

Süßigkeiten

Dämmerung

Gedämpft

CSS-Code

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Wie das Farbverlauf-Tool funktioniert – Haltepunkte erstellen, anpassen, CSS kopieren.

2–6 Haltepunkte mit freier Positionierung, OKLCH-Interpolation ohne trübe Bänder, plus 48 kuratierte Voreinstellungen.

01
Haltepunkte erstellen
2–6 Haltepunkte: Wählen Sie jede Farbe, ziehen Sie Positionen oder fügen Sie HEX-Werte ein.
02
Anpassen
Wechseln Sie zwischen linear, radial, konisch, ziehen Sie den Winkel – oder wenden Sie eine kuratierte Voreinstellung mit einem Klick an.
03
Kopieren
Der Glättungsmodus erweitert OKLCH-Mittelpunkte automatisch; CSS wird fertig zum Einfügen bereitgestellt und der Link trägt Ihren Farbverlauf.

FAQ zu Farbverläufen

Vier Fragen, die Nutzer tatsächlich stellen.

Warum werden Farbverläufe in der Mitte grau?: RGB-Interpolation schneidet durch Gebiete mit geringer Sättigung. OKLCH-Interpolation folgt dem Farbton, sodass die Mitte sauber bleibt.
Kann ich weitere Zwischenstufen hinzufügen?: Ja – 2 bis 6 Zwischenstufen, jede mit eigener Farbe und Position. Der Glättungsmodus fügt OKLCH-Mittelpunkte zwischen benachbarten Stufen ein, sodass die gesamte Rampe sauber bleibt.
Welche Browser unterstützen den exportierten CSS-Code?: Alle modernen Browser. Das Tool gibt einfache RGB-Zwischenstufen aus, sodass keine Konvertierung selbst für ältere Engines erforderlich ist.
Wie teile ich einen Farbverlauf?: Jede Änderung wird mit der Seiten-URL (#g=...) synchronisiert. Senden Sie den Link aus der Adressleiste an einen Kollegen, und er öffnet genau so, wie Sie ihn eingestellt haben.

Nachdem Sie das Ergebnis erhalten haben

Machen Sie weiter und setzen Sie die Farben ein.

Skala-Generator

Jede Farbe in eine 11-stufige Designsystem-Skala, wahrnehmungsgleichmäßig in OKLCH, WCAG-Kontrast pro Stufe, Export nach Tailwind/CSS/SCSS/JSON.

Farbkonverter

Geben Sie jedes Format ein (HEX / RGB / HSL / Name) und konvertieren Sie es in Echtzeit in alle Farbräume.

Paletten-Board

Leertaste zum Zufallsgenerieren, Sperren, Ziehen zum Neuordnen, Teilen per URL – alles, was ein Paletten-Board können sollte.

Kontrastprüfer

WCAG 2.1-Kontrastprüfung zwischen beliebigen Vordergrund- und Hintergrundfarben.

Wie das Farbverlauf-Tool funktioniert – Haltepunkte erstellen, anpassen, CSS kopieren.

2–6 Haltepunkte mit freier Positionierung, OKLCH-Interpolation ohne trübe Bänder, plus 48 kuratierte Voreinstellungen.

Haltepunkte erstellen

2–6 Haltepunkte: Wählen Sie jede Farbe, ziehen Sie Positionen oder fügen Sie HEX-Werte ein.

Anpassen

Wechseln Sie zwischen linear, radial, konisch, ziehen Sie den Winkel – oder wenden Sie eine kuratierte Voreinstellung mit einem Klick an.

Kopieren

Der Glättungsmodus erweitert OKLCH-Mittelpunkte automatisch; CSS wird fertig zum Einfügen bereitgestellt und der Link trägt Ihren Farbverlauf.

FAQ zu Farbverläufen

Vier Fragen, die Nutzer tatsächlich stellen.

Warum werden Farbverläufe in der Mitte grau?

RGB-Interpolation schneidet durch Gebiete mit geringer Sättigung. OKLCH-Interpolation folgt dem Farbton, sodass die Mitte sauber bleibt.

Kann ich weitere Zwischenstufen hinzufügen?

Ja – 2 bis 6 Zwischenstufen, jede mit eigener Farbe und Position. Der Glättungsmodus fügt OKLCH-Mittelpunkte zwischen benachbarten Stufen ein, sodass die gesamte Rampe sauber bleibt.

Welche Browser unterstützen den exportierten CSS-Code?

Alle modernen Browser. Das Tool gibt einfache RGB-Zwischenstufen aus, sodass keine Konvertierung selbst für ältere Engines erforderlich ist.

Wie teile ich einen Farbverlauf?

Jede Änderung wird mit der Seiten-URL (#g=...) synchronisiert. Senden Sie den Link aus der Adressleiste an einen Kollegen, und er öffnet genau so, wie Sie ihn eingestellt haben.