# Bekende logo’s met kleurverloop: wat grote merken ons leren

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

Een paar goed gedocumenteerde redesigns maakten van kleurverlopen geen trend meer, maar een vast onderdeel van logo-ontwerp. Dit is wat er veranderde, en wat elk merk ervan kan leren.

## The short version

- Logo’s met kleurverloop werden halverwege de jaren 2010 mainstream, toen grote apps gedetailleerde of vlakke iconen vervingen door eenvoudige symbolen op kleurrijke kleurverlopen.
- Het redesign van Instagram in 2016 verving een gedetailleerd camera-icoon door een eenvoudige cameracontour op een kleurverloop van warm naar violet, waardoor kleur het belangrijkste herkenningspunt werd.
- Messenger stapte in 2020 over van effen blauw naar een kleurverloop van blauw, paars en roze, tegelijk met de introductie van berichten tussen Instagram en Messenger.
- Het merksysteem van Mozilla uit 2019 gaf Firefox en verwante producten een gedeelde familie van heldere kleurverlopen, wat liet zien hoe een kleurverloop meerdere logo’s kan verbinden.
- De lessen voor elk logo met kleurverloop: houd de vorm eenvoudig, neem herkenbare kleur mee, leg het kleurverloop exact vast en heb altijd een vlakke versie.

**Bekende logo’s met kleurverloop** gingen halverwege de jaren 2010 van ongewoon naar overal, toen enkele van de meest gebruikte apps ter wereld overstapten op eenvoudige symbolen op kleurrijke kleurverlopen. Die verschuiving leerde ontwerpers een les die nog steeds geldt: als een logo als klein vierkantje tussen tientallen andere verschijnt, doet kleur meer van het herkenningswerk dan vorm. De beste identiteiten met kleurverloop combineren een heel eenvoudig beeldmerk met een kleurverloop dat vastligt, onderscheidend is en overal wordt gebruikt.

Dit artikel bekijkt drie goed gedocumenteerde redesigns en trekt er algemene lessen uit. Het beschrijft wat er publiekelijk veranderde, niet hoe of waarom de bedrijven daartoe besloten. Voor het vak van er zelf een maken, zie [logo’s met kleurverloop: wanneer ze werken](https://gradiently.design/nl/guide/gradient-logo).

## Waarom logo’s met kleurverloop de app-iconen overnamen

Het startscherm van de telefoon veranderde wat een logo moet doen. Elke app krijgt hetzelfde afgeronde vierkant op ongeveer dezelfde grootte, omringd door andere. Gedetailleerde illustraties vervagen op dat formaat, en één vlakke kleur deel je met tientallen andere apps. Een kleurverloop biedt iets ertussenin: een kleurhandtekening met meer combinaties dan vlakke kleur toelaat, herkenbaar zelfs als het symbool erop te klein is om goed te zien.

- Vlakke kleuren: makkelijk gedeeld: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- Een kleurverloop: lastiger te verwarren: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

Vlakke merkkleuren herhalen zich op een startscherm. Een specifiek kleurverloop met meerdere stops is een veel zeldzamere handtekening.

## Instagram, 2016: het kleurverloop wordt het merk

In mei 2016 verving Instagram zijn gedetailleerde, retro camera-icoon door een eenvoudige witte cameracontour op een kleurverloop dat loopt van warm geel en oranje linksonder, via roze en magenta, naar paars rechtsboven. Bij de lancering presenteerde het bedrijf de kleuren als een evolutie van de regenboogstreep op het oude icoon. Het redesign riep eerst sterke reacties op, en het kleurverloop staat sindsdien centraal in het merk, in 2022 opgefrist samen met een nieuw lettertype.

Diagonaal van warm naar violet: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

Een kleurverloop uit dezelfde familie als het icoon uit 2016: warm in de ene hoek, koel in de tegenoverliggende. Een benadering om van te leren, geen officiële merkkleur.

- **Het symbool werd eenvoudiger naarmate de kleur rijker werd.** Een cameracontour laat ruimte voor het kleurverloop om het herkenbare deel te zijn.
- **Bestaande herkenning werd meegenomen.** De kleuren van het oude icoon werden opnieuw geïnterpreteerd in plaats van weggegooid.
- **Een diagonaal pad van warm naar koel** geeft het kleurverloop een richting die mensen kunnen onthouden, niet alleen een set kleuren.

## Messenger, 2020: een kleurwissel die een productwissel aankondigde

In 2020 verving Messenger zijn effen blauwe logo door een kleurverloop van blauw, paars en roze. De wijziging kwam tegelijk met berichten tussen Instagram en Messenger. De vorm, een tekstballon met een bliksemschicht, bleef, zodat mensen hem nog konden vinden; alleen de kleur verschoof.

- Voor: één effen blauw: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Na: blauw naar paars en roze: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Benaderingen van voor en na. De vorm houden en de kleur veranderen laat een vertrouwd logo iets nieuws aankondigen.

De les: een kleurverloop kan “er is iets veranderd” zeggen zonder herkenning te verliezen, zolang de vorm die mensen kennen blijft. Dat is een nuttig patroon voor elke [rebranding](https://gradiently.design/nl/guide/rebrand-checklist): verander één sterk kenmerk tegelijk.

## Firefox, 2019: één familie van kleurverlopen voor veel producten

In 2019 introduceerde Mozilla een nieuw merksysteem waarin Firefox een familienaam werd voor meerdere producten. Het browserlogo hield zijn vos, vereenvoudigd, en de familie deelde heldere kleurverlopen van geel, oranje, rood, roze en paars over de producticonen. Elk icoon had een eigen vorm, maar de gedeelde kleurverlopen maakten ze herkenbaar als familie.

- Warme familiereeks: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Zusterreeks, verschoven: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- Koelere zuster: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

Eén manier waarop een familie van kleurverlopen werkt: schuif het venster over een gedeelde reeks, zodat elk product een eigen mix krijgt en ze toch bij elkaar horen.

## Wat deze identiteiten met kleurverloop gemeen hebben

| Identiteit | Jaar | Wat veranderde | Les |
| --- | --- | --- | --- |
| Instagram | 2016 | Gedetailleerde camera naar contoursymbool op een kleurverloop van warm naar violet | Vereenvoudig de vorm, laat kleur de herkenning dragen |
| Messenger | 2020 | Effen blauw naar kleurverloop van blauw, paars en roze | Houd de vorm, verander de kleur om nieuws aan te kondigen |
| Firefox | 2019 | Eén browserlogo naar een familie met gedeelde kleurverlopen | Een reeks kleurverlopen kan veel logo’s verbinden |

Alle drie zetten een eenvoudige, vertrouwde vorm op een kleurverloop dat exact is en overal wordt herhaald.

## Vijf lessen voor je eigen logo met kleurverloop

1. **Houd de vorm heel eenvoudig** Het kleurverloop voert het woord, dus het beeldmerk erop moet leesbaar zijn op het formaat van een app-icoon of avatar.
2. **Neem herkenbare kleur mee** Heb je al een bekende kleur, bouw het kleurverloop daar dan omheen. Herkenning die je al verdiend hebt, is het bewaren waard.
3. **Leg het kleurverloop exact vast** Noteer elke stop, positie en hoek. Een kleurverloop dat op het oog wordt nagebouwd, verschuift, en de herkenning verschuift mee. [Merkconsistentie](https://gradiently.design/nl/guide/brand-consistency) legt uit waarom.
4. **Heb altijd een vlakke versie** Favicons, borduurwerk, drukwerk in één kleur en sommige interfaces kunnen geen kleurverloop tonen. Kies één vlakke kleur en een witte of zwarte versie van het symbool.
5. **Gebruik het kleurverloop ook buiten het logo** De sterkste voorbeelden herhalen hun kleurverloop in achtergronden, accenten en beweging, zodat het op zichzelf een [onderscheidend merkelement](https://gradiently.design/nl/guide/distinctive-brand-assets) wordt.

```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;
}
```

Een tegel met kleurverloop waarbij de vlakke kleur als eerste is gedeclareerd. De stops opschrijven is wat het logo overal identiek houdt.

Een kleurverloop kan ook misgaan achter een logo in plaats van erin. Staat je logo op je eigen kleurverloop, lees dan [een logo op een kleurverloop plaatsen](https://gradiently.design/nl/guide/logo-on-gradient-background), en voor het bouwen van een hele identiteit eromheen [huisstijl met kleurverlopen](https://gradiently.design/nl/guide/gradient-branding).

## FAQ

### Wanneer stapte Instagram over op een logo met kleurverloop?

In mei 2016, toen het zijn gedetailleerde camera-icoon verving door een eenvoudige cameracontour op een kleurverloop van geel en oranje via roze naar paars.

### Waarom gebruiken zoveel apps logo’s met kleurverloop?

App-iconen delen allemaal hetzelfde kleine afgeronde vierkant, dus kleur doet het meeste herkenningswerk. Een specifiek kleurverloop is onderscheidender dan één vlakke kleur.

### Werken logo’s met kleurverloop in drukwerk?

Vaak wel, met zorg. Kleurverlopen kunnen in druk banding vertonen of verschuiven, dus elk logo met kleurverloop hoort ook een vlakke kleurversie en zwart-witversies in één kleur te hebben.

### Hoe maak ik een logo met kleurverloop dat herkenbaar blijft?

Gebruik een eenvoudige vorm, leg de exacte stops en hoek vast, herhaal het kleurverloop door je hele merk en houd een vlakke terugvalversie voor kleine of beperkte toepassingen.