Die Kurzfassung
- Eine Verlaufspalette ist eine kleine, benannte Familie von Verläufen aus einer Grundpalette und ein paar gemeinsamen Regeln.
- Die meisten Marken brauchen vier bis sechs Verläufe: einen Hero, eine tiefe Version, eine ruhige helle Version, ein radiales Leuchten, einen Akzent und einen ruhigen für Text.
- Verläufe wirken wie eine Familie, wenn sie Grundfarbe, Richtung, einheitliche Stopp-Positionen und dieselben Helligkeitsschritte teilen.
- Verläufe als benannte CSS Custom Properties zu speichern hält sie über Website, App und Designdateien hinweg identisch.
- Eine Verlaufspalette sollte an echten Formaten mit echten Worten getestet werden, bevor sie in die Markenrichtlinien wandert.
Auf dieser Seite
Eine Verlaufspalette ist eine kleine, benannte Familie von Verläufen, gebaut aus einer Farbpalette und einer Handvoll gemeinsamer Regeln, damit jeder Verlauf einer Marke verwandt aussieht. Fang mit fünf oder sechs Grundfarben an, gib jedem Verlauf eine Aufgabe (Hero, tief, ruhig, Leuchten, Akzent, Text) und leg dann fest, was sie zu Geschwistern macht: dieselbe Grundfarbe, derselbe Winkel, passende Stopp-Positionen und gleichmäßige Helligkeitsschritte. Schreib sie als Tokens auf und teste sie an echten Designs, bevor andere sie nutzen.
Warum eine Marke mehr als einen Verlauf braucht
Ein einzelner Verlauf wird über Aufgaben gedehnt, die er nicht kann. Der helle Hero-Übergang, der auf einem Launch-Post großartig aussieht, ist hinter einem Absatz zu laut, für einen hellen Website-Bereich zu dunkel und für eine Folie voller Zahlen zu unruhig. Teams improvisieren dann, jemand nimmt ein ähnliches Blau, und nach einem Jahr hat die Marke fünfzehn Verläufe, die fast passen. Eine Palette verhindert das, indem sie die Varianten vorab festlegt.
Ein Haufen Verläufe
- Jeder einzeln gemacht, für ein Design
- Andere Winkel auf jeder Seite
- Farben, die fast zur Marke passen
- Kein Name, also kann niemand danach fragen
- Per Auge aus alten Dateien kopiert
Eine Verlaufspalette
- Aus einer Grundpalette gebaut
- Eine Richtung, überall genutzt
- Exakte Hex-Codes und Stopp-Positionen
- Nach Aufgabe benannt: Hero, tief, ruhig
- Als Tokens in Code und Dateien gespeichert
Mit einer Grundpalette anfangen
Jeder Verlauf der Familie sollte nur aus diesen Farben bestehen oder aus ihren Aufhellungen und Abdunklungen. Wenn deine Markenfarben noch nicht feststehen, kläre das zuerst mit Markenfarben wählen. Eine nützliche Basis hat einen dunklen Grund, zwei oder drei Stufen des Haupttons, ein fast Weiß und einen Akzent von woanders auf dem Farbkreis.
Jedem Verlauf eine Aufgabe geben
Benenne Verläufe nach dem, was sie tun, nicht danach, wie sie aussehen. „Hero“ übersteht eine Farbauffrischung; „Lila Sonnenuntergang“ nicht. Sechs Rollen decken fast jede Marke ab.
Wie sie sich unterscheidet
Wie sie sich unterscheidet
Wie sie sich unterscheidet
Wie sie sich unterscheidet
Wie sie sich unterscheidet
Wie sie sich unterscheidet
Die Regeln, die Verläufe zur Familie machen
- Ein Grund. Jeder dunkle Verlauf endet in derselben Tinte, jeder helle in derselben Muschel. Am Grund gruppiert das Auge sie.
- Eine Richtung. Wähl einen Winkel, 135 oder 160 Grad, und bleib dabei. Gemischte Winkel lassen eine Seite zufällig wirken. Winkel von Farbverläufen erklärt die Wahl.
- Passende Stopps. Nutz dieselben Positionen wieder (zum Beispiel 0, 45, 75, 100 Prozent), damit die Übergänge denselben Rhythmus haben. Farbstopps in Verläufen behandelt die Abstände.
- Gleichmäßige Helligkeitsschritte. Jede Farbe in einem Übergang sollte eine klare Stufe heller oder dunkler sein als ihre Nachbarin. Ungleiche Schritte erzeugen einen hellen Streifen in der Mitte.
- Ein Akzent, rationiert. Die Akzentfarbe taucht nur in einem Verlauf auf. Über alle verteilt, ist sie kein Akzent mehr.
- Eine feste Interpolation im Code. Mischt deine Website in oklch, sollten es alle Verläufe tun, sonst sehen dieselben Codes in verschiedenen Bereichen unterschiedlich aus.
Die Verlaufspalette in Tokens verwandeln
Eine Palette, die nur in einem PDF lebt, wird abgetippt und driftet. Speichere jeden Verlauf einmal als benannte Custom Property und verweise überall darauf. Designer können dieselben Werte in ihre Dateien einfügen, und eine spätere Auffrischung ändert eine Zeile pro Verlauf. Design Tokens behandelt die Praxis im Größeren.
:root {
--ink: #14112b;
--plum: #4c1d95;
--violet: #7c3aed;
--orchid: #c084fc;
--shell: #faf5ff;
--ember: #f97316;
--gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
--gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
--gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
--gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
--gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
--gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}
.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }An echten Formaten testen
Farbmuster lügen. Ein Verlauf, der als kleines Quadrat ausgewogen wirkt, kann sein hellstes Band genau hinter eine Überschrift legen, sobald er eine Story in 1080×1920 füllt. Bevor du die Palette veröffentlichst, mach drei echte Designs mit echten Worten: einen Hochformat-Post, eine Story und einen Website-Hero. Prüf, dass der Text-Verlauf Absätze lesbar hält, mit den Kontrastprüfungen aus Farbkontrast und Barrierefreiheit, und dass Hero und Tief nebeneinander verwandt aussehen.
Die Hero-Rolle auf einem Hochformat-Post in 1080×1350.
Dieselbe Familie auf einer Story in 1080×1920. Prüf, dass das hellste Band auch im höheren Format an der Überschrift vorbeigeht.
Mit Gradiently Pro hält das Markenkit deine Farbpaletten neben Logo und Schriften, und der Designer wendet sie an, wenn er neue Designs anlegt. Wenn dein Hero-Verlauf das sein soll, woran man dich erkennt, erklärt Markenverläufe, wie aus einem Verlauf ein Markenzeichen wird.
Häufige Fragen
Was ist eine Verlaufspalette?
Ein kleines, benanntes Set von Verläufen aus einer Farbpalette mit gemeinsamen Regeln, damit sie überall wie eine Familie aussehen.
Wie viele Verläufe sollte eine Marke haben?
Vier bis sechs decken die meisten Bedürfnisse: ein Hero, eine tiefe und eine ruhige Version, ein radiales Leuchten, ein Akzent und einer, der ruhig genug für Text ist. Kleine Marken können mit drei anfangen.
Wie sehen Verläufe aus, als gehörten sie zusammen?
Nutz über alle Verläufe hinweg dieselbe Grundfarbe, denselben Winkel, dieselben Stopp-Positionen und gleichmäßige Helligkeitsschritte.
Wie speichere ich Markenverläufe für eine Website?
Definier die Farben und jeden Verlauf einmal als CSS Custom Properties und verweise dann in jeder Komponente auf diese Namen.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen