CSS-Verlaufs-Generator

Was dieses Tool für dich tut

Erstelle eine reproduzierbare Farbrampe, zeige jeden erzeugten Farbstopp in der Vorschau und kopiere die exakte HEX-Sequenz für CSS, Diagramme oder Design-Tokens.

Arbeitsbeispiel

Wie das Ergebnis erzeugt wird

Jede Zwischenfarbe entsteht durch lineare Interpolation der Rot-, Grün- und Blaukanäle. Die Endpunkte bleiben erhalten, die übrigen Farben werden in gleichen Abständen platziert.

Nützliche Arbeitsabläufe

• Geordnete Diagrammfarben oder Heatmap-Rampen erstellen
• Hover- und Zustandsfarben zwischen zwei Design-Tokens bauen
• Eine kompakte Palette für einen Hintergrundverlauf erzeugen

Wichtige Grenzen

• RGB-Interpolation kann zwischen manchen Komplementärfarben dunkler oder schlammiger wirken.
• Eine weich wirkende Palette ist nicht automatisch farbenblind-tauglich.
• Dieser Generator erzeugt gleichmäßig verteilte RGB-Farben; er beansprucht keine wahrnehmungsmäßige Gleichmäßigkeit.

Häufig gestellte Fragen

Warum kann der Mittelpunkt grau oder schlammig wirken?

Gegenüberliegende RGB-Kanäle können zu einer neutralen Farbe tendieren. Füge bei einem mehrstufigen CSS-Workflow eine geeignete Mittelfarbe hinzu, wenn visuelle Lebendigkeit wichtig ist.

Wie viele Farben sollte ich erzeugen?

Verwende die kleinste Anzahl, die den benötigten Zuständen oder Datenbereichen entspricht; für durchgehende Hintergründe kannst du mehr Schritte verwenden.