Farbskalengenerator
Erzeugen Sie sofort eine glatte N-stufige Farbskala zwischen zwei Farben. Wählen Sie Start- und Endfarben mit nativen Auswahlmöglichkeiten oder 10 voreingestellten Paaren, legen Sie 2–50 Schritte fest und wechseln Sie zwischen RGB- und HSL-Interpolation, um den Unterschied zu sehen. Sehen Sie sich die HEX-, RGB- und HSL-Werte jedes Schritts an und exportieren Sie die Skala als CSS-Verlauf, benutzerdefinierte CSS-Eigenschaften oder Tailwind-Konfiguration. Völlig privat, 100 % kostenlos und keine Anmeldung erforderlich.
Preset Pairs
Colors
Settings
RGB interpolates linearly in RGB space - good for simple gradients.
Color Scale
Warum unseren Farbskalengenerator verwenden?
- Anpassbare Schrittanzahl und Modi: Mit dem Farbskalengenerator können Sie 2–50 Schritte auswählen und zwischen den Modi RGB-Linearinterpolation und HSL-Interpolation wechseln. Passen Sie die Anzahl der Schritte mit einem Schieberegler an, wählen Sie aus 10 voreingestellten Farbpaaren oder geben Sie benutzerdefinierte HEX-Werte ein, um Ihre Skala zu verfeinern.
- RGB- und HSL-Interpolationsmodi: Die RGB-Interpolation erzeugt einen sanften linearen Übergang zwischen den beiden Farben im RGB-Raum, während sich die HSL-Interpolation durch den HSL-Farbraum bewegt, um wahrnehmbar glattere Verläufe zu erzielen. Wechseln Sie sofort zwischen den Modi, um den Unterschied zu vergleichen.
- 100 % privat – kein Upload: Die gesamte Generierung der Farbskalen erfolgt lokal in Ihrem Browser. Ihre Farbwerte verlassen niemals Ihr Gerät und werden niemals an einen Server gesendet – sicher für Kundenprojekte und proprietäre Designsysteme.
- Kostenlos und ohne Einschränkungen: Generieren Sie unbegrenzte Farbskalen ohne Anmeldung, ohne Abonnement und ohne Nutzungsbeschränkungen. Der Farbskalengenerator ist für immer völlig kostenlos, ohne dass Werbung die Benutzeroberfläche blockiert.
Häufige Anwendungsfälle für den Farbskalengenerator
- CSS-Design-Tokens und -Variablen: Betreuer von Designsystemen verwenden den Farbskalengenerator, um abgestufte Farbskalen für benutzerdefinierte CSS-Eigenschaften zu erstellen. Generieren Sie konsistente Farbtokens wie --scale-1 bis --scale-10 mit gleichmäßig verteilten Schritten zwischen zwei Markenfarben zur Verwendung in einer gesamten Anwendung.
- Farbpaletten des Designsystems: Designer verwenden den Farbskalengenerator, um strukturierte Farbpaletten aus Markenfarben zu erstellen. Die generierten Schritte stellen Zwischenwerte bereit, die für Hover-Zustände, aktive Zustände, Rahmen und Hintergründe verwendet werden können und so die visuelle Konsistenz aller UI-Komponenten gewährleisten.
- Datenvisualisierung und Diagramme: Entwickler von Datenvisualisierungen verwenden den Farbskalengenerator, um sequentielle Farbskalen für Diagramme, Grafiken und Heatmaps zu erstellen. Die gleichmäßig verteilten Schritte stellen sicher, dass jeder Datenpunkt eine visuell unterschiedliche Farbe hat und gleichzeitig einen kohärenten Farbverlauf in der Visualisierung beibehält.
- Temperatur- und Schweregradkarten: Analytics-Dashboards verwenden den Farbskalengenerator, um Farbskalen für Temperaturkarten, Schweregradindikatoren und Fortschrittsbalken zu erstellen. Von Rot über Grün oder Blau bis Orange sorgt die Stufenskala für eine klare visuelle Differenzierung der einzelnen Schwellenwerte.
- Benutzerdefinierte Tailwind CSS-Konfigurationen: Entwickler, die Tailwind CSS verwenden, können die generierte Farbskala direkt als Tailwind-Konfigurationstoken exportieren. Jeder Schritt wird zu einem benannten Farbeintrag, der im gesamten Projekt mit Tailwind-Dienstprogrammklassen wie bg-scale-3 oder text-scale-7 verwendet werden kann.
- Richtlinien für Print- und Digitalmarken: Markenmanager verwenden den Farbskalengenerator, um Farbverlaufsübergänge für Markenmaterialien zu dokumentieren. Die HEX-Zwischenwerte stellen sicher, dass Farbübergänge der Marke sowohl auf digitalen als auch auf gedruckten Materialien präzise reproduziert werden können.
Was ist eine Farbskala?
Eine Farbskala ist eine Folge gleichmäßig verteilter Farben, die fließend zwischen einer Startfarbe und einer Endfarbe übergehen. Jeder Schritt in der Skala stellt eine Zwischenfarbe an einer bestimmten Position zwischen den beiden Endpunkten dar. Der Farbskalengenerator berechnet diese Zwischenwerte mithilfe mathematischer Interpolation und erzeugt so eine Reihe von Farben, die in Designsystemen, Datenvisualisierungen und UI-Komponentenbibliotheken verwendet werden können.
So funktioniert unser Farbskalengenerator
- Wählen Sie Ihre Farben: Wählen Sie mit dem nativen Farbwähler eine Start- und Endfarbe aus oder geben Sie HEX-Werte direkt ein. Sie können auch aus 10 voreingestellten Farbpaaren wie Sonnenuntergang, Ozean oder Lavendel auswählen, um schnell loszulegen. Klicken Sie auf „Tauschen“, um die Richtung Ihrer Skala umzukehren.
- Stellen Sie die Anzahl der Schritte ein: Wählen Sie per Schieberegler oder Zahleneingabe zwischen 2 und 50 Schritten. Mehr Schritte erzeugen einen feineren Farbverlauf mit geringeren Farbunterschieden zwischen den einzelnen benachbarten Schritten.
- Wählen Sie den Interpolationsmodus: Der RGB-Modus interpoliert linear durch den RGB-Farbwürfel, während der HSL-Modus durch den HSL-Zylinder interpoliert, um wahrnehmungsmäßig weichere Übergänge zu erzielen. Wechseln Sie zwischen ihnen, um herauszufinden, welche für Ihr Farbpaar am besten geeignet ist.
- Erkunden und exportieren: Klicken Sie auf ein beliebiges Farbfeld, um dessen detaillierte HEX-, RGB- und HSL-Werte anzuzeigen. Exportieren Sie den gesamten Maßstab als HEX-Werte, CSS-Verlaufscode, benutzerdefinierte CSS-Eigenschaften oder Tailwind-Konfigurationstoken.
RGB vs. HSL-Interpolation
- Die RGB-Interpolation übergeht jeden Farbkanal (Rot, Grün, Blau) unabhängig mithilfe linearer Interpolation. Dies ist die einfachste und schnellste Methode und erzeugt einen direkten geradlinigen Pfad durch den RGB-Farbwürfel. Die RGB-Interpolation funktioniert für die meisten Farbpaare gut und erzeugt natürlich aussehende Farbverläufe.
- Die HSL-Interpolation wandelt beide Farben in den HSL-Farbraum (Farbton, Sättigung, Helligkeit) um und interpoliert jede Komponente unabhängig. Der Farbtonwert verwendet die Interpolation mit dem kürzesten Weg, um zu vermeiden, dass der Farbkreis lange umgangen wird. Die HSL-Interpolation führt häufig zu wahrnehmungsmäßig gleichmäßigeren Übergängen, insbesondere wenn die Start- und Endfarben unterschiedliche Farbtöne haben.
- Wahl des richtigen Modus: RGB wird im Allgemeinen für einfache Markenverläufe bevorzugt, bei denen es auf Farbgenauigkeit ankommt. HSL eignet sich besser für Farbskalen, die in der Datenvisualisierung verwendet werden, wo die Einheitlichkeit der Wahrnehmung wichtig ist. Experimentieren Sie mit beiden Modi, um herauszufinden, welcher für Ihr spezifisches Farbpaar das optisch ansprechendste Ergebnis liefert.
Datenschutz, Sicherheit und Verfügbarkeit
100 % clientseitige Verarbeitung: Unser Farbskalengenerator läuft vollständig in Ihrem Browser mit JavaScript. Es werden niemals Farbwerte hochgeladen, gespeichert oder an einen Server übertragen. Dies macht es sicher für sensible Kundenprojekte und proprietäre Designsysteme.
Keine Anmeldung oder Einschränkungen: Der Farbskalengenerator ist völlig kostenlos, es ist kein Konto erforderlich, es gibt keine Nutzungsbeschränkungen und keine Premium-Funktionen. Generieren Sie sofort und ohne Einschränkungen unbegrenzte Farbskalen.
Häufig gestellte Fragen
Ein Farbskalengenerator erstellt eine Folge gleichmäßig verteilter Farben, die fließend zwischen einer Startfarbe und einer Endfarbe übergehen. Unser Farbskalengenerator ermöglicht Ihnen die Auswahl zwischen 2 und 50 Schritten, unterstützt RGB- und HSL-Interpolationsmodi und stellt die Zwischenwerte HEX, RGB und HSL für jeden Schritt bereit.
Wählen Sie zunächst mithilfe der Farbauswahl eine Start- und Endfarbe aus oder geben Sie HEX-Werte direkt ein. Sie können auch auf ein beliebiges voreingestelltes Paar (z. B. Sonnenuntergang oder Ozean) klicken, um häufig verwendete Kombinationen schnell zu laden. Wählen Sie dann mit dem Schieberegler „Schritte“ aus, wie viele Zwischenfarben Sie möchten (2–50). Wechseln Sie abschließend zwischen den Interpolationsmodi RGB und HSL, um zu sehen, welcher den besten Farbverlauf für Ihre Farben erzeugt.
Durch die RGB-Interpolation werden die einzelnen Farbkanäle (Rot, Grün, Blau) linear zwischen den beiden Farben überführt, wodurch ein direkter, geradliniger Pfad durch den RGB-Farbwürfel entsteht. Die HSL-Interpolation wandelt die Farben in den HSL-Farbraum um und interpoliert Farbton, Sättigung und Helligkeit separat – mit der Farbtoninterpolation auf dem kürzesten Weg, um eine falsche Umrundung des Farbkreises zu vermeiden.
Der Farbskalengenerator unterstützt 2 bis 50 Schritte. Die optimale Anzahl hängt von Ihrem Anwendungsfall ab – 5–10 Schritte eignen sich gut für Designsystem-Farbtokens, 8–15 Schritte sind ideal für Datenvisualisierungsskalen und 20–50 Schritte erzeugen einen sehr feinen Farbverlauf, der für Heatmaps oder kontinuierliche Farbverläufe geeignet ist.
Ja. Die gesamte Generierung der Farbskalen erfolgt zu 100 % clientseitig in Ihrem Browser. Ihre Farbwerte werden niemals an einen Server gesendet, niemals gespeichert und niemals irgendwohin übertragen. Der Farbskalengenerator ist völlig privat und verarbeitet alles lokal auf Ihrem Gerät.
Der Farbskalengenerator bietet mehrere Exportoptionen. Sie können alle HEX-Werte als durch Kommas getrennte Liste kopieren, die CSS-Verlaufszeichenfolge kopieren, benutzerdefinierte CSS-Eigenschaften (CSS-Variablen) kopieren oder einen Tailwind-CSS-Konfigurationsausschnitt kopieren. Jeder Schritt kann auch angeklickt werden, um seine einzelnen HEX-, RGB- und HSL-Werte anzuzeigen.
Ein Tönungs- und Schattierungsgenerator beginnt mit einer Farbe und erzeugt durch Mischen mit Weiß bzw. Schwarz hellere und dunklere Variationen. Ein Farbskalengenerator interpoliert zwischen zwei unterschiedlichen Farben und erzeugt so einen Farbverlauf, der von einem Farbton zu einem völlig anderen Farbton reichen kann – zum Beispiel von Rot zu Blau oder von Grün zu Lila.
Ja. Der Farbskalengenerator ist 100 % kostenlos, es ist keine Anmeldung erforderlich, es gibt keine Premium-Funktionen und keine Nutzungsbeschränkungen. Generieren Sie unbegrenzte Farbskalen ohne Einschränkungen oder versteckte Kosten. Es gibt keine Werbung, die die Benutzeroberfläche blockiert.