# Kända gradientloggor: vad välkända identiteter lär oss

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

Ett fåtal väldokumenterade omdesigner gjorde gradienter från en trend till en självklar del av logotypdesign. Här är vad som förändrades och vad alla varumärken kan lära sig av det.

## The short version

- Gradientloggor blev vanliga i mitten av 2010-talet, när stora appar bytte ut detaljerade eller platta ikoner mot enkla symboler på färgstarka gradienter.
- Instagrams omdesign 2016 ersatte en detaljerad kameraikon med en enkel kameracontur på en gradient från varmt till violett, så att färgen blev det viktigaste igenkänningstecknet.
- Messenger gick 2020 från enfärgat blått till en gradient i blått, lila och rosa, samtidigt som meddelanden mellan Instagram och Messenger infördes.
- Mozillas varumärkessystem från 2019 gav Firefox och tillhörande produkter en gemensam familj av starka gradienter, och visade hur en gradient kan förena flera märken.
- Lärdomarna för alla gradientloggor: håll formen enkel, för färgen med dig, lås gradienten exakt och ha alltid en platt version.

**Kända gradientloggor** gick från ovanliga till allestädes närvarande i mitten av 2010-talet, när några av världens mest använda appar bytte till enkla symboler på färgstarka gradienter. Skiftet lärde designers en läxa som fortfarande gäller: när en logotyp syns som en liten ruta bland dussintals andra står färgen för mer av igenkänningen än formen. De bästa gradientidentiteterna kombinerar ett mycket enkelt märke med en gradient som är låst, särpräglad och används överallt.

Den här artikeln går igenom tre väldokumenterade omdesigner och drar allmänna lärdomar av dem. Den beskriver vad som ändrades offentligt, inte hur eller varför företagen bestämde sig. Hur du gör en själv går du igenom i [gradientlogotyper: när de fungerar](https://gradiently.design/sv/guide/gradient-logo).

## Därför tog gradientloggor över appikonerna

Telefonens startskärm förändrade vad en logotyp måste klara av. Varje app får samma rundade kvadrat i ungefär samma storlek, omgiven av andra. Detaljerade illustrationer suddas ut i den storleken, och en enda platt färg delas med dussintals andra appar. En gradient erbjuder något mitt emellan: en färgsignatur med fler kombinationer än platt färg tillåter, som går att känna igen även när symbolen ovanpå är för liten för att urskiljas.

- Platta färger: lätta att dela: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- En gradient: svårare att förväxla: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

Platta varumärkesfärger återkommer över en hel startskärm. En specifik gradient med flera stopp är en mycket ovanligare signatur.

## Instagram, 2016: gradienten blir varumärket

I maj 2016 ersatte Instagram sin detaljerade retrokameraikon med en enkel kameracontur i vitt på en gradient som går från varmt gult och orange nere till vänster, via rosa och magenta, till lila uppe till höger. Vid lanseringen presenterade företaget färgerna som en vidareutveckling av regnbågsrandningen på den gamla ikonen. Omdesignen väckte starka reaktioner till en början, och gradienten har sedan dess stått i varumärkets centrum, uppdaterad 2022 tillsammans med en ny typsnittsfamilj.

Diagonal från varmt till violett: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

En gradient i samma familj som ikonen från 2016: varm i ena hörnet, sval i det motsatta. En approximation för studier, inte en officiell varumärkesfärg.

- **Symbolen blev enklare medan färgen blev rikare.** En kameracontur lämnar utrymme för gradienten att vara den igenkännbara delen.
- **Det som redan var upparbetat fördes vidare.** Den gamla ikonens färger tolkades om i stället för att kastas bort.
- **En diagonal från varmt till svalt** ger gradienten en riktning som människor minns, inte bara en uppsättning färger.

## Messenger, 2020: ett färgbyte som signalerade en produktförändring

2020 ersatte Messenger sin enfärgade blå logotyp med en gradient i blått, lila och rosa. Ändringen kom samtidigt som meddelanden mellan Instagram och Messenger. Formen, en pratbubbla med en blixt, behölls så att folk fortfarande kunde hitta den; bara färgen flyttade sig.

- Före: en enda blå ton: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Efter: blått mot lila och rosa: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Approximationer av före och efter. Genom att behålla formen och byta färg kan en välbekant logotyp tillkännage något nytt.

Lärdomen: en gradient kan säga ”det här har förändrats” utan att tappa igenkänningen, så länge formen folk känner till finns kvar. Det är ett användbart mönster för alla [rebrandingar](https://gradiently.design/sv/guide/rebrand-checklist): ändra en stark signal i taget.

## Firefox, 2019: en gradientfamilj för många produkter

2019 presenterade Mozilla ett nytt varumärkessystem där Firefox blev ett familjenamn för flera produkter. Webbläsarens logotyp behöll sin räv, förenklad, och familjen delade starka gradienter i gult, orange, rött, rosa och lila över produktikonerna. Varje ikon hade sin egen form, men de gemensamma gradienterna fick dem att läsas som släktingar.

- Varm familjeskala: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Syskonskala, förskjuten: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- Svalare syskon: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

Ett sätt som en gradientfamilj kan fungera på: flytta fönstret längs en gemensam skala så att varje produkt får sin egen blandning och alla ändå hör ihop.

## Vad de här gradientidentiteterna har gemensamt

| Identitet | År | Vad som ändrades | Lärdom |
| --- | --- | --- | --- |
| Instagram | 2016 | Detaljerad kamera till kontursymbol på en gradient från varmt till violett | Förenkla formen, låt färgen bära igenkänningen |
| Messenger | 2020 | Enfärgat blått till gradient i blått, lila och rosa | Behåll formen, byt färg för att signalera nyheter |
| Firefox | 2019 | En webbläsarlogotyp till en familj med gemensamma gradienter | En gradientskala kan förena många märken |

Alla tre lägger en enkel, välbekant form ovanpå en gradient som är exakt och upprepas överallt.

## Fem lärdomar för din egen gradientlogotyp

1. **Håll formen mycket enkel** Gradienten sköter pratandet, så märket ovanpå ska gå att läsa i storleken av en appikon eller en avatar.
2. **För igenkännbar färg framåt** Om du redan har en känd färg, bygg gradienten utifrån den. Igenkänning du redan har förtjänat är värd att behålla.
3. **Lås gradienten exakt** Skriv ner varje stopp, position och vinkel. En gradient som byggs om på känn driver iväg, och igenkänningen med den. [Varumärkeskonsekvens](https://gradiently.design/sv/guide/brand-consistency) förklarar varför.
4. **Ha alltid en platt version** Favicons, broderi, enfärgstryck och vissa gränssnitt kan inte visa en gradient. Välj en platt färg och en vit eller svart version av symbolen.
5. **Använd gradienten bortom logotypen** De starkaste exemplen upprepar sin gradient i bakgrunder, ljuseffekter och rörelse, så att den blir en egen [särpräglad varumärkestillgång](https://gradiently.design/sv/guide/distinctive-brand-assets).

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

En gradientplatta med sin platta färg deklarerad först. Att skriva ner stoppen är det som håller logotypen identisk överallt.

En gradient kan också gå fel bakom en logotyp i stället för inuti den. Om din logotyp ligger på din egen gradient, läs [logotyp på en gradient](https://gradiently.design/sv/guide/logo-on-gradient-background), och för att bygga en hel identitet kring en, [gradientvarumärke](https://gradiently.design/sv/guide/gradient-branding).

## FAQ

### När bytte Instagram till en gradientlogotyp?

I maj 2016, när den detaljerade kameraikonen ersattes av en enkel kameracontur på en gradient från gult och orange via rosa till lila.

### Varför använder så många appar gradientloggor?

Appikoner delar alla samma lilla rundade kvadrat, så färgen står för det mesta av igenkänningen. En specifik gradient är mer särpräglad än en enda platt färg.

### Fungerar gradientloggor i tryck?

Ofta, med omsorg. Gradienter kan få bandning eller förskjutas i tryck, så varje gradientlogotyp bör också ha en platt version och enfärgade svarta och vita versioner.

### Hur gör jag en gradientlogotyp som förblir igenkännbar?

Använd en enkel form, lås de exakta stoppen och vinkeln, upprepa gradienten över hela varumärket och ha en platt reserv för små eller begränsade användningar.