# Blå gradienter: 20 paletter fra is til midnat

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

Blå er designs sikreste farve, og det er netop derfor, så mange blå gradienter ligner hinanden. Her er tyve, der ikke gør, ordnet fra lysest til mørkest, med koderne og tankerne bag dem.

## The short version

- En blå gradient blander nuancer af blå, ofte med en nabofarve som turkis, cyan eller violet, fra bleg is til dyb marineblå.
- Blå forbindes bredt med ro, pålidelighed og teknologi, hvilket gør den populær og let at forveksle med alle andres.
- Blå blander rent mod turkis, cyan, indigo og violet, men bliver let grå, hvis den blandes direkte mod orange eller gul.
- Hvid tekst virker på dybe og mellemblå toner som #1e3a8a og #2563eb, men holder ikke som brødtekst på lysere blå som #3b82f6.
- At lade en blå gradient læne sig mod turkis eller violet, gå dybere eller blegere og tilføje en varm accent er de hurtigste veje væk fra det virksomhedsagtige look.

En **blå gradient** blander nuancer af blå, ofte med en nabofarve som turkis, cyan eller violet. Den kan føles som en klar himmel, et dybt hav, en skærm om natten eller en banks årsrapport, alt efter hvilke blå toner du vælger, og hvordan du bruger dem. Nedenfor finder du tyve blå gradientpaletter med kopierbar CSS, ordnet fra den blegeste til den mørkeste, efterfulgt af de tekstfarver, der virker på dem, og hvordan du undgår, at blå føles fad.

## Lyseblå gradienter: is og himmel

Blege blå gradienter føles åbne, rene og stille. De passer til sundhed, rejser, wellness og produktsider, der har brug for luft. Brug mørk tekst på dem, og tilføj et strejf af varme eller lilla, så de ikke ser kolde og kliniske ud.

- 1. Is: `linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%)`
- 2. Morgenhimmel: `linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 70%, #fef3c7 100%)`
- 3. Iris i dis: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Gletsjer: `linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%)`
- 5. Skyer med rødme: `linear-gradient(135deg, #e0f2fe 0%, #fce7f3 100%)`

Fem lyseblå gradienter. De varme eller lilla ender i 2, 3 og 5 forhindrer, at de føles sterile.

## Havblå og turkise gradienter

Når blå læner sig mod grøn, får den liv. Havgradienter føles friske og naturlige, og de undgår de virksomhedsagtige associationer, som ren blå har. De passer til rejser, mad, bæredygtighed og outdoor-brands.

- 6. Åbent vand: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Dybt dyk: `linear-gradient(180deg, #a5f3fc 0%, #0e7490 60%, #083344 100%)`
- 8. Lagune: `linear-gradient(135deg, #1e3a8a 0%, #0f766e 55%, #5eead4 100%)`
- 9. Havn: `linear-gradient(135deg, #164e63 0%, #0d9488 100%)`
- 10. Lavvande: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Blå over i turkis og akvamarin. Nabofarver holder alle overgange rene.

## Klare og elektriske blå gradienter

Mættede blå toner er energiske og tekniske. De passer til lanceringer, apps, sport og events. De er også de mest almindelige blå toner på nettet, så de har mest gavn af en uventet form eller en varm accent.

- 11. Kobolt til cyan: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. Ultramarin til violet: `linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #8b5cf6 100%)`
- 13. Blåt skær: `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. Stigende signal: `linear-gradient(180deg, #0b1437 0%, #1d4ed8 60%, #38bdf8 100%)`

Livlige blå toner. Nummer 14 holder sin varme accent som en hård kant, så blå og guld aldrig blandes til grå.

## Mørkeblå og midnatsgradienter

Dyb marineblå og midnatsgradienter føles seriøse, eksklusive og rolige. De er fremragende bagtæpper til hvid tekst og skarpe accenter. Hold øje med striber, som let viser sig i langsomme, mørke blå toner. Et fint korn løser det. Se [gradientstriber](https://gradiently.design/da/guide/gradient-banding).

- 16. Midnat: `linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%)`
- 17. Skifernat: `linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%)`
- 18. Horisontskær: `radial-gradient(circle at 50% 110%, #1e40af 0%, #0b1437 50%, #020617 100%)`
- 19. Marineblå til indigo: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Skumring over vandet: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

Fem mørkeblå toner. Den sidste ender i en varm koral, som det sidste lys over havet.

## Hvilken blå gradient til hvilken opgave

Tyve paletter er mange at vælge imellem. Start med den opgave, designet skal løse, og de ord, det skal bære, og vælg så fra den gruppe, der passer.

| Opgave | Prøv | Hvorfor |
| --- | --- | --- |
| Rolig produkt- eller sundhedsside | 1, 3, 4 | Bleg, åben og let under mørk tekst |
| Rejser, mad, friluftsliv | 6, 8, 10 | Blå med et strejf af grøn føles naturlig |
| App-lancering eller tech-event | 11, 13, 15 | Mættet og oplyst, læses som energi |
| Eksklusivt eller finans | 16, 17, 19 | Dybe flader føles seriøse og bærer hvid tekst |
| Noget mindeværdigt | 2, 14, 20 | En varm tone får blå til at føles specifik |

Et udgangspunkt til hver slags design. Tallene henviser til paletterne ovenfor.

## Hvad blå signalerer, og problemet med det fade

I store dele af verden forbindes blå med ro, pålidelighed og dybde, blandt andet på grund af himmel og vand. Derfor er den så almindelig i bank, forsikring, sundhed og teknologi. Det er også derfor, en mellemblå gradient sjældent hjælper nogen med at genkende dig: den ligner kategorien frem for virksomheden. [Farvepsykologi](https://gradiently.design/da/guide/color-psychology) forklarer, hvorfor konventioner virker begge veje.

### Virksomhedsblå

- Én mellemblå, der går over i en lysere blå ved 135 grader
- Ren, fuldt mættet primærblå
- Glat og flad, uden struktur
- Blå alle vegne, intet varmt

### Karakterfuld blå

- Læner sig mod turkis, indigo eller violet
- Meget dyb eller meget bleg, ikke midten
- Korn, glans eller et blødt skær
- Én varm accent: koral, guld eller abrikos

Blå blander godt mod sine naboer: turkis, cyan, indigo og violet. Den blander dårligt mod sine modsætninger. Blå direkte over i orange eller gul passerer en grålig midte, så hold varme accenter korte, eller led dem gennem violet eller pink. [Komplementærfarver](https://gradiently.design/da/guide/complementary-colors) forklarer hvorfor.

## Tekst på blå gradienter

| Tekst på baggrund | Kontrast | Vurdering |
| --- | --- | --- |
| Hvid på `#0b1437` | 18,0:1 | Fremragende |
| Hvid på `#1e3a8a` | 10,4:1 | Fremragende |
| Hvid på `#2563eb` | 5,2:1 | Fin til brødtekst |
| Hvid på `#3b82f6` | 3,7:1 | Kun stor tekst |
| `#0b1a33` på `#60a5fa` | 6,8:1 | Mørk tekst virker her |
| `#0b1a33` på `#bae6fd` | 13,1:1 | Fremragende |

WCAG-kontrastforhold, beregnet. Brødtekst kræver 4,5:1, stor tekst 3:1.

Faldgruben er midten af det blå spænd: en klar kornblomstblå som `#3b82f6` ser stærk nok ud til hvid tekst, men falder under 4,5:1. På en gradient skal du tjekke kontrasten der, hvor blå er lysest bag dine ord. [Tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) har den fulde metode.

Et opslag i højformat med tallet 98 % i stor skrift på en dyb gradient

Et dybt felt lader ét tal føre ordet.

En lodret story med ordene Pust ud på en rolig gradient

En roligere story med masser af åben plads.

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

Palet 20, Skumring over vandet, som hero-baggrund. Hold overskrifter i den øverste, mørkere del.

At eksportere en blå gradient som billede til sociale medier kræver ét ekstra trin. Platformene komprimerer uploads igen, og langsomme, mørke blå toner er blandt de første, der brydes op i synlige striber. Eksportér i platformens anbefalede størrelse, læg et fint korn på, før du gemmer, og brug PNG, hvor platformen tillader det. [Kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) viser, hvor meget korn der er nok.

Til lilla toner ved siden af blå, se [lilla gradienter](https://gradiently.design/da/guide/purple-gradient). Til grønnere valg, se [grønne gradienter](https://gradiently.design/da/guide/green-gradient).

## FAQ

### Hvilke farver klæder blå i en gradient?

Turkis, cyan, indigo og violet blander rent med blå. Varme farver som koral og guld er gode accenter, hvis de holdes korte, for at blande blå direkte over i orange eller gul giver grå.

### Hvad er en god CSS-kode til en blå gradient?

Til en dyb, rolig blå kan du prøve linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Alle paletter på denne side kan kopieres som CSS.

### Er hvid tekst læsbar på en blå gradient?

På dybe og mørke mellemblå toner, ja. På lysere blå som #3b82f6 falder hvid tekst under de 4,5:1, der anbefales til brødtekst.

### Hvordan får jeg en blå gradient til at se mindre virksomhedsagtig ud?

Lad den læne sig mod turkis eller violet, vælg meget dybe eller meget blege blå toner frem for mellemblå, tilføj korn og brug en lille varm accent.