# Berühmte Farbverlauf-Logos: was bekannte Identitäten lehren

[Canonical HTML page](https://gradiently.design/de/guide/famous-gradient-logos)

Ein paar breit dokumentierte Redesigns machten Farbverläufe von einem Trend zu einem festen Bestandteil des Logodesigns. Hier steht, was sich änderte und was jede Marke daraus lernen kann.

## The short version

- Farbverlauf-Logos wurden Mitte der 2010er Mainstream, als große Apps detailreiche oder flache Icons durch einfache Glyphen auf farbigen Farbverläufen ersetzten.
- Instagrams Redesign von 2016 ersetzte ein detailreiches Kamera-Icon durch einen einfachen Kamera-Umriss auf einem Farbverlauf von Warm zu Violett und machte Farbe zum wichtigsten Erkennungssignal.
- Messenger wechselte 2020 von einfarbigem Blau zu einem Farbverlauf aus Blau, Violett und Pink, zeitgleich mit der Einführung von Nachrichten zwischen Instagram und Messenger.
- Mozillas Markensystem von 2019 gab Firefox und verwandten Produkten eine gemeinsame Familie leuchtender Farbverläufe und zeigte, wie ein Farbverlauf mehrere Zeichen vereinen kann.
- Die Lehren für jedes Farbverlauf-Logo: die Form einfach halten, wiedererkennbare Farbe mitnehmen, den Farbverlauf exakt festlegen und immer eine flache Version haben.

**Berühmte Farbverlauf-Logos** wurden Mitte der 2010er von ungewöhnlich zu allgegenwärtig, als einige der meistgenutzten Apps der Welt zu einfachen Glyphen auf farbigen Farbverläufen wechselten. Der Wandel lehrte Gestalter eine Lektion, die noch gilt: Erscheint ein Logo als kleines Quadrat unter Dutzenden anderer, leistet Farbe mehr Erkennungsarbeit als Form. Die besten Farbverlauf-Identitäten kombinieren ein sehr einfaches Zeichen mit einem Farbverlauf, der festgelegt, unverwechselbar und überall im Einsatz ist.

Dieser Artikel betrachtet drei breit dokumentierte Redesigns und leitet allgemeine Lehren daraus ab. Er beschreibt, was sich öffentlich änderte, nicht wie oder warum die Unternehmen es entschieden. Zum Handwerk, selbst eines zu machen, siehe [Farbverlauf-Logos: wann sie funktionieren](https://gradiently.design/de/guide/gradient-logo).

## Warum Farbverlauf-Logos die App-Icons eroberten

Handy-Startbildschirme veränderten, was ein Logo leisten muss. Jede App bekommt dasselbe abgerundete Quadrat in etwa derselben Größe, umgeben von anderen. Detaillierte Illustrationen verschwimmen in dieser Größe, und eine einzelne flache Farbe teilt man sich mit Dutzenden anderer Apps. Ein Farbverlauf bietet etwas dazwischen: eine Farbsignatur mit mehr Kombinationen, als flache Farbe erlaubt, lesbar auch dann, wenn die Glyphe darauf zu klein ist, um sie klar zu sehen.

- Flache Farben: leicht zu teilen: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- Ein Farbverlauf: schwerer zu verwechseln: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

Flache Markenfarben wiederholen sich auf einem Startbildschirm. Ein bestimmter Farbverlauf mit mehreren Stopps ist eine weit seltenere Signatur.

## Instagram, 2016: der Farbverlauf wird zur Marke

Im Mai 2016 ersetzte Instagram sein detailreiches, retroartiges Kamera-Icon durch einen einfachen Kamera-Umriss in Weiß auf einem Farbverlauf, der unten links von warmem Gelb und Orange über Pink und Magenta bis zu Violett oben rechts reicht. Beim Start stellte das Unternehmen die Farben als Weiterentwicklung des Regenbogenstreifens auf dem alten Icon dar. Das Redesign löste zunächst starke Reaktionen aus, und der Farbverlauf steht seither im Zentrum der Marke, 2022 zusammen mit einer neuen Schrift aufgefrischt.

Warm-zu-Violett-Diagonale: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

Ein Farbverlauf aus derselben Familie wie das Icon von 2016: warm an einer Ecke, kühl an der gegenüberliegenden. Eine Annäherung zum Studieren, keine offizielle Markenfarbe.

- **Die Glyphe wurde einfacher, während die Farbe reicher wurde.** Ein Umriss-Kamera lässt dem Farbverlauf Raum, der wiedererkennbare Teil zu sein.
- **Bestehendes Kapital wurde mitgenommen.** Die Farben des alten Icons wurden neu interpretiert statt weggeworfen.
- **Ein diagonaler Weg von Warm zu Kühl** gibt dem Farbverlauf eine Richtung, die Menschen sich merken können, nicht nur eine Reihe von Farben.

## Messenger, 2020: ein Farbwechsel, der einen Produktwechsel anzeigte

2020 ersetzte Messenger sein einfarbig blaues Logo durch einen Farbverlauf aus Blau, Violett und Pink. Die Änderung kam zeitgleich mit Nachrichten zwischen Instagram und Messenger. Die Form, eine Sprechblase mit Blitz, blieb, sodass Menschen sie weiter finden konnten, nur die Farbe wanderte.

- Vorher: ein einfarbiges Blau: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Nachher: Blau in Violett und Pink: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Annäherungen an Vorher und Nachher. Die Form zu behalten und die Farbe zu ändern lässt ein vertrautes Logo etwas Neues ankündigen.

Die Lehre: Ein Farbverlauf kann „das hat sich geändert“ sagen, ohne die Wiedererkennung zu verlieren, solange die Form bleibt, die Menschen kennen. Das ist ein nützliches Muster für jedes [Rebranding](https://gradiently.design/de/guide/rebrand-checklist): ändere jeweils ein starkes Signal.

## Firefox, 2019: eine Farbverlauf-Familie für viele Produkte

2019 führte Mozilla ein neues Markensystem ein, in dem Firefox zum Familiennamen für mehrere Produkte wurde. Das Browser-Logo behielt seinen Fuchs, vereinfacht, und die Familie teilte leuchtende Farbverläufe aus Gelb, Orange, Rot, Pink und Violett über die Produkt-Icons. Jedes Icon hatte seine eigene Form, aber die gemeinsamen Farbverläufe ließen sie wie Verwandte wirken.

- Warme Familienrampe: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Geschwisterrampe, verschoben: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- Kühleres Geschwister: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

Eine Art, wie eine Farbverlauf-Familie funktioniert: Das Fenster entlang einer gemeinsamen Rampe verschieben, sodass jedes Produkt seine eigene Mischung bekommt und alle trotzdem zusammengehören.

## Was diese Farbverlauf-Identitäten gemeinsam haben

| Identität | Jahr | Was sich änderte | Lehre |
| --- | --- | --- | --- |
| Instagram | 2016 | Detailreiche Kamera zu Umriss-Glyphe auf Warm-zu-Violett-Farbverlauf | Die Form vereinfachen, Farbe die Wiedererkennung tragen lassen |
| Messenger | 2020 | Einfarbiges Blau zu Farbverlauf aus Blau, Violett und Pink | Die Form behalten, die Farbe ändern, um Neues anzuzeigen |
| Firefox | 2019 | Ein Browser-Logo zu einer Familie mit gemeinsamen Farbverläufen | Eine Farbverlauf-Rampe kann viele Zeichen vereinen |

Alle drei setzen eine einfache, vertraute Form auf einen Farbverlauf, der exakt ist und überall wiederholt wird.

## Fünf Lehren für dein eigenes Farbverlauf-Logo

1. **Die Form sehr einfach halten** Der Farbverlauf führt das Wort, also sollte das Zeichen darauf in der Größe eines App-Icons oder Avatars lesbar sein.
2. **Wiedererkennbare Farbe mitnehmen** Hast du schon eine bekannte Farbe, baue den Farbverlauf daraus. Wiedererkennung, die du dir schon verdient hast, ist es wert, behalten zu werden.
3. **Den Farbverlauf exakt festlegen** Halte jeden Stopp, jede Position und jeden Winkel fest. Ein nach Augenmaß nachgebauter Farbverlauf driftet, und die Wiedererkennung driftet mit. [Markenkonsistenz](https://gradiently.design/de/guide/brand-consistency) erklärt, warum.
4. **Immer eine flache Version haben** Favicons, Stickerei, einfarbiger Druck und manche Oberflächen können keinen Farbverlauf zeigen. Wähle eine flache Farbe und eine weiße oder schwarze Version der Glyphe.
5. **Den Farbverlauf über das Logo hinaus nutzen** Die stärksten Beispiele wiederholen ihren Farbverlauf in Hintergründen, Lichtern und Bewegung, sodass er zu einem eigenen [Distinctive Brand Asset](https://gradiently.design/de/guide/distinctive-brand-assets) wird.

```css
.logo-tile {
  /* Flat fallback: the one colour chosen for small or limited uses */
  background-color: #d62976;
  /* The exact gradient, with every stop recorded */
  background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  border-radius: 22%;
  aspect-ratio: 1;
}
```

Eine Farbverlauf-Kachel mit zuerst deklarierter flacher Farbe. Die Stopps aufzuschreiben hält das Logo überall identisch.

Ein Farbverlauf kann auch hinter einem Logo schiefgehen statt darin. Sitzt dein Logo auf deinem eigenen Farbverlauf, lies [ein Logo auf einen Farbverlauf setzen](https://gradiently.design/de/guide/logo-on-gradient-background), und um eine ganze Identität darum zu bauen, [Farbverlauf-Branding](https://gradiently.design/de/guide/gradient-branding).

## FAQ

### Wann wechselte Instagram zu einem Farbverlauf-Logo?

Im Mai 2016, als es sein detailreiches Kamera-Icon durch einen einfachen Kamera-Umriss auf einem Farbverlauf ersetzte, der von Gelb und Orange über Pink bis Violett reicht.

### Warum nutzen so viele Apps Farbverlauf-Logos?

App-Icons teilen sich alle dasselbe kleine abgerundete Quadrat, deshalb leistet Farbe den Großteil der Erkennungsarbeit. Ein bestimmter Farbverlauf ist unverwechselbarer als eine einzelne flache Farbe.

### Funktionieren Farbverlauf-Logos im Druck?

Oft mit Sorgfalt. Farbverläufe können im Druck Banding zeigen oder sich verschieben, deshalb sollte jedes Farbverlauf-Logo auch eine Version in flacher Farbe sowie einfarbige Schwarz-Weiß-Versionen haben.

### Wie mache ich ein Farbverlauf-Logo, das wiedererkennbar bleibt?

Nutze eine einfache Form, lege die genauen Stopps und den Winkel fest, wiederhole den Farbverlauf über deine Marke und halte einen flachen Fallback für kleine oder eingeschränkte Einsätze bereit.