# Blå gradienter: 20 paletter från is till midnatt

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

Blått är den tryggaste färgen i design, och just därför ser så många blå gradienter likadana ut. Här är tjugo som inte gör det, ordnade från ljusast till mörkast, med koderna och tanken bakom dem.

## The short version

- En blå gradient blandar nyanser av blått, ofta med en närliggande turkos, cyan eller violett, från blek is till djup marinblå.
- Blått förknippas i stor utsträckning med lugn, pålitlighet och teknik, vilket gör det populärt och lätt att förväxla med alla andras.
- Blått blandas rent mot turkos, cyan, indigo och violett, men tenderar att bli grått när det blandas rakt mot orange eller gult.
- Vit text fungerar på djupa och mellanblå toner som #1e3a8a och #2563eb, men inte som brödtext på ljusare blått som #3b82f6.
- Att luta en blå gradient mot turkos eller violett, gå djupare eller blekare och lägga till en varm accent är de snabbaste sätten att slippa företagsuttrycket.

En **blå gradient** blandar nyanser av blått, ofta med en närliggande turkos, cyan eller violett. Den kan kännas som en klar himmel, ett djupt hav, en skärm på natten eller en banks årsredovisning, beroende på vilka blå toner du väljer och hur du använder dem. Nedan följer tjugo paletter med blå gradienter och CSS att kopiera, ordnade från blekast till mörkast, följt av de textfärger som fungerar på dem och hur du håller blått från att kännas tråkigt.

## Ljusblå gradienter: is och himmel

Bleka blå gradienter känns öppna, rena och stilla. De passar vård, resor, välmående och produktsidor som behöver luft. Använd mörkt bläck på dem och lägg till en gnutta värme eller lila så att de inte ser kalla och kliniska ut.

- 1. Is: `linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%)`
- 2. Morgonhimmel: `linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 70%, #fef3c7 100%)`
- 3. Blåklockedis: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Glaciär: `linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%)`
- 5. Molnrodnad: `linear-gradient(135deg, #e0f2fe 0%, #fce7f3 100%)`

Fem ljusblå gradienter. De varma eller lila ändarna i 2, 3 och 5 hindrar dem från att kännas sterila.

## Blå och turkosa havsgradienter

Att luta blått mot grönt ger det liv. Havsgradienter känns friska och naturliga, och de undviker de företagsassociationer som rent blått för med sig. De passar resor, mat, hållbarhet och friluftsvarumärken.

- 6. Öppet vatten: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Djupdykning: `linear-gradient(180deg, #a5f3fc 0%, #0e7490 60%, #083344 100%)`
- 8. Lagun: `linear-gradient(135deg, #1e3a8a 0%, #0f766e 55%, #5eead4 100%)`
- 9. Hamn: `linear-gradient(135deg, #164e63 0%, #0d9488 100%)`
- 10. Grunt vatten: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Blått som går över i turkos och akvamarin. Närliggande färgtoner håller varje övergång ren.

## Klarblå och elektriskt blå gradienter

Mättade blå toner är energiska och tekniska. De passar lanseringar, appar, sport och evenemang. De är också de vanligaste blå tonerna på webben, så de tjänar mest på en oväntad form eller en varm accent.

- 11. Kobolt till cyan: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. Ultramarin till violett: `linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #8b5cf6 100%)`
- 13. Blå glöd: `radial-gradient(circle at 30% 20%, #60a5fa 0%, #1d4ed8 45%, #0b1437 100%)`
- 14. Kobolt med guldkant: `linear-gradient(135deg, #0047ab 0%, #2563eb 86%, #fbbf24 86%, #f59e0b 100%)`
- 15. Stigande signal: `linear-gradient(180deg, #0b1437 0%, #1d4ed8 60%, #38bdf8 100%)`

Levande blå toner. Nummer 14 behåller sin varma accent som en skarp kant, så att blått och guld aldrig blandas till grått.

## Mörkblå gradienter och midnatt

Djupa marinblå och midnattsblå gradienter känns allvarliga, exklusiva och lugna. De är utmärkta underlag för vit text och för klara accenter. Se upp för ränder, som lätt syns i långsamma, mörka blå toner. Ett fint korn löser det. Se [gradientränder](https://gradiently.design/sv/guide/gradient-banding).

- 16. Midnatt: `linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%)`
- 17. Skifferskymning: `linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%)`
- 18. Horisontglöd: `radial-gradient(circle at 50% 110%, #1e40af 0%, #0b1437 50%, #020617 100%)`
- 19. Marinblått till indigo: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Skymning över vatten: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

Fem mörkblå gradienter. Den sista slutar i en varm korall, som det sista ljuset över havet.

## Vilken blå gradient till vilket jobb

Tjugo paletter är många att välja bland. Utgå från jobbet designen ska göra och orden den ska bära, och välj sedan ur den grupp som passar.

| Jobb | Prova | Varför |
| --- | --- | --- |
| Lugn produkt- eller vårdsida | 1, 3, 4 | Bleka, öppna och lätta under mörk text |
| Resor, mat, friluftsliv | 6, 8, 10 | Blått som lutar mot grönt känns naturligt |
| Applansering eller teknikevent | 11, 13, 15 | Mättade och upplysta, läses som energi |
| Exklusivt eller finans | 16, 17, 19 | Djupa underlag känns allvarliga och bär vit text |
| Något minnesvärt | 2, 14, 20 | En varm ton får blått att kännas specifikt |

En startpunkt för varje sorts design. Numren hänvisar till paletterna ovan.

## Vad blått signalerar, och problemet med tråkighet

I stora delar av världen förknippas blått med lugn, pålitlighet och djup, delvis på grund av himmel och vatten. Därför är det så vanligt inom bank, försäkring, vård och teknik. Det är också därför en mellanblå gradient sällan hjälper någon att känna igen dig: den ser ut som branschen snarare än företaget. [Färgpsykologi](https://gradiently.design/sv/guide/color-psychology) förklarar varför konventioner slår åt båda hållen.

### Företagsblått

- Ett mellanblått till ett ljusare blått i 135 graders vinkel
- Rent, fullt mättat blått i primärfärg
- Slätt och platt, utan textur
- Blått överallt, inget varmt

### Särpräglat blått

- Lutar mot turkos, indigo eller violett
- Mycket djupt eller mycket blekt, inte mitten
- Korn, glans eller en mjuk glöd
- En varm accent: korall, guld eller aprikos

Blått blandas väl mot sina grannar: turkos, cyan, indigo och violett. Det blandas dåligt mot sina motsatser. Blått rakt in i orange eller gult passerar en gråaktig mitt, så håll varma accenter korta eller led dem via violett eller rosa. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) förklarar varför.

## Text på blå gradienter

| Text på bakgrund | Kontrast | Omdöme |
| --- | --- | --- |
| Vit på `#0b1437` | 18,0:1 | Utmärkt |
| Vit på `#1e3a8a` | 10,4:1 | Utmärkt |
| Vit på `#2563eb` | 5,2:1 | Går bra för brödtext |
| Vit på `#3b82f6` | 3,7:1 | Bara stor text |
| `#0b1a33` på `#60a5fa` | 6,8:1 | Mörkt bläck fungerar här |
| `#0b1a33` på `#bae6fd` | 13,1:1 | Utmärkt |

WCAG-kontrastvärden, beräknade. Brödtext kräver 4,5:1, stor text 3:1.

Fällan ligger i mitten av det blå spannet: en klar kornblå som `#3b82f6` ser stark nog ut för vit text men hamnar under 4,5:1. Kontrollera kontrasten på en gradient där blått är som ljusast bakom dina ord. [Text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) har hela metoden.

Ett stående statistikinlägg med 98 % i stor text på en djup gradient

Ett djupt fält låter en enda siffra göra allt pratande.

En vertikal story med orden Andas ut på en lugn gradient

En lugnare story med gott om luft.

```css
.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}
```

Palett 20, Skymning över vatten, som hero-bakgrund. Håll rubriker i den övre, mörkare delen.

Att exportera en blå gradient som bild för sociala medier kräver ett extra steg. Plattformar komprimerar om uppladdningar, och långsamma, mörka blå toner hör till de första som brister i synliga band. Exportera i plattformens rekommenderade storlek, lägg på ett fint korn innan du sparar och använd PNG där plattformen tar emot det. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) visar hur mycket korn som räcker.

För lila toner intill blått, se [lila gradienter](https://gradiently.design/sv/guide/purple-gradient), och för grönare alternativ, se [gröna gradienter](https://gradiently.design/sv/guide/green-gradient).

## FAQ

### Vilka färger passar ihop med blått i en gradient?

Turkos, cyan, indigo och violett blandas rent med blått. Varma färger som korall och guld fungerar bra som accenter om de hålls korta, eftersom blått som tonas rakt in i orange eller gult blir grått.

### Vilken CSS-kod är bra för en blå gradient?

För ett djupt, lugnt blått kan du prova linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Varje palett på den här sidan går att kopiera som CSS.

### Går vit text att läsa på en blå gradient?

På djupa och mörka mellanblå toner, ja. På ljusare blått som #3b82f6 hamnar vit text under den kontrast på 4,5:1 som rekommenderas för brödtext.

### Hur får jag en blå gradient att se mindre företagslik ut?

Luta den mot turkos eller violett, välj mycket djupa eller mycket bleka blå toner i stället för mellanblått, lägg på korn och använd en liten varm accent.