RGB-Farbrampen-Generator
Erzeugt 2 bis 100 RGB-Zwischenfarben zwischen zwei Endfarben. Verlaufsvorschau und kopierbare HEX-Werte, kein CSS-Export.
Jetzt verwenden
RGB-Farbrampen-Generator
Erzeugt 2 bis 100 RGB-Zwischenfarben zwischen zwei Endfarben. Verlaufsvorschau und kopierbare HEX-Werte, kein CSS-Export.
Was dieses Tool für dich tut
Erzeugt 2 bis 100 RGB-Zwischenfarben zwischen zwei Endfarben. Verlaufsvorschau und kopierbare HEX-Werte, kein CSS-Export.
Arbeitsbeispiel
#2563EB → #EC4899, 5 Farben
#2563EB, #575CD7, #8956C2, #BA4FAE, #EC4899
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.
Die Anzahl enthält beide Endpunkte; Vorgabe ist 10. Bruchteile werden abgeschnitten, die Anzahl auf 2–100 begrenzt. HEX, RGB, HSV und HSL dienen der Eingabe; interpoliert werden stets die codierten RGB-Kanäle mit Ganzzahlrundung. Die Vorschau hat feste 90°. Weitere Farbstopps, Alpha und Farbraumwahl fehlen. Ausgabe: ein HEX-Wert pro Zeile, kein CSS-Code und kein Bilddownload.
Die Verarbeitung erfolgt lokal im Browser.