# Grøn og blå gradient: friske koder, der føles naturlige

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

Grøn, der møder blå, er farven på lavt vand over sand, på en sø under fyrretræer og på nordlyset. Derfor føles parret så let naturligt. Sådan holder du det sådan.

## The short version

- En grøn og blå gradient blander kølige nabonuancer som smaragdgrøn #10b981, petrol #0d9488 og himmelblå #0284c7, med petrol eller aqua i midten.
- Fordi grøn og blå ligger side om side i farvecirklen, forbliver blandingen ren, og den virker naturlig, fordi den spejler vand, is og himmel.
- Klare grønne og aquafarvede nuancer er for lyse til hvid tekst, så brug en dyb petrol skrift på lyse versioner og hvid eller mint på mørke.
- Mørke grønne og blå gradienter føles rolige og troværdige, mens lyse versioner føles friske og rene.
- Parret passer til rejser, wellness, finans, outdoorbrands og teknologi, og en varm accent som sand eller koral forhindrer det i at føles koldt.

En **grøn og blå gradient** blander to kølige naboer: grønne som smaragd `#10b981` eller mint `#a7f3d0` og blå som `#0284c7` eller himmelblå `#bae6fd`, med petrol og aqua som broen imellem. Blandingen forbliver ren, fordi der ikke er noget gråt punkt mellem de to nuancer. Den føles naturlig, fordi du har set den hele livet i vand, is og himmel. Koderne her følger fire landskaber, med de tekstfarver, der kan læses på hvert af dem, og CSS til lys og mørk tilstand.

## Hvorfor grøn og blå ser naturlige ud sammen

Grøn og blå er [analoge farver](https://gradiently.design/da/guide/analogous-colors): de ligger ved siden af hinanden i farvecirklen, så hvert trin imellem dem er en rigtig farve, mest petrol og aqua. Naturen viser parret hele tiden, fra lavvandede have, hvor blåt vand løber over grønt tang og sand, til gletsjersøer og fyrreskove, der spejler sig i stille vand. At låne fra de scener er den nemmeste måde at få gradienten til at føles rolig i stedet for korporativ.

- Dyb petrol skrift: #042f2e
- Fyr: #065f46
- Smaragd: #10b981
- Petrol: #0d9488
- Aqua: #22d3ee
- Søblå: #0284c7
- Mint: #a7f3d0
- Himmel: #bae6fd

Spektret fra grøn til blå med en dyb farve til tekst. Petrol og aqua er brofarverne, der holder blandingen sammenhængende.

## Lagune: klare aqua og grønne gradienter

Lavt tropisk vand er mest aqua, med grønt hvor det er lavest og blåt hvor det bliver dybere. Disse gradienter føles ferieklare. Tilføj et varmt sandstop, hvis de skal føles som en strand og ikke som en swimmingpool.

- Lagune: `linear-gradient(180deg, #a5f3fc 0%, #2dd4bf 50%, #0891b2 100%)`
- Rev: `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`
- Sandbanke: `linear-gradient(0deg, #fde68a 0%, #5eead4 30%, #0ea5e9 100%)`

Klare grønne og blå gradienter. Den tredje tilføjer sand nederst, hvilket varmer hele billedet op. [Havgradienter](https://gradiently.design/da/guide/ocean-gradient) har flere.

## Skovsø: dybe grønne og blå gradienter

Mørkegrøn, der løber over i mørkeblå, føles stille, eksklusiv og troværdig. Tænk på en skovsø i skumringen eller farven på en gammel flaske. De bærer hvid tekst godt og passer til finans, outdoorudstyr, arkitektur og ethvert brand, der vil virke stabilt.

- Skovsø: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Petrol i måneskin: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- Flaskegrøn til marine: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Mørk grøn og blå. De får let striber i komprimerede billeder, så tilføj et fint korn før eksport.

## Gletsjer: blege mint- og himmelgradienter

Løft parret helt op, og du får gletsjeris og kolde morgener: rent, luftigt og meget roligt. De passer til sundhed, hudpleje, rengøring og produktivitetsapps. De kan virke kliniske, så et strejf af varm hvid hjælper.

- Gletsjer: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Kold morgen: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- Is i sollys: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Bleg grøn og blå. Dyb petrol skrift kan læses på dem alle. [Mintgradienter](https://gradiently.design/da/guide/mint-gradient) går længere over i grønt.

## Nordlys: grøn og blå på en nattehimmel

Nordlyset er grønt og blåt lys på sort, og derfor er aurora-gradienter blandt de mest elskede mørke baggrunde. Hold farven i bløde bånd, og lad den mørke grund fylde det meste af billedet. [Aurora-gradienter](https://gradiently.design/da/guide/aurora-gradients) gennemgår hele teknikken.

- Nordlys: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Lysbånd: `linear-gradient(170deg, #030712 0%, #064e3b 40%, #0e7490 70%, #030712 100%)`
- Polarhvirvel: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Grøn og blå på næsten sort. Både mint og aqua er slående tekstfarver på disse.

## Tekstfarver på grønne og blå gradienter

Smaragdgrøn og aqua er overraskende lyse, så hvid tekst på de klare versioner fejler ofte. Dyb petrol skrift virker på lyse blandinger og holder alt i én familie; hvid og mint læses godt på de mørke. Forholdene nedenfor bruger WCAG-formlen. [Tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) viser, hvad du gør, når en linje krydser begge ender.

| Baggrund | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Smaragd `#10b981` | Hvid | 2,5:1 | Fejler |
| Aqua `#22d3ee` | Hvid | 1,8:1 | Fejler |
| Petrol `#0d9488` | Hvid | 3,7:1 | Kun store overskrifter |
| Mint `#a7f3d0` | Dyb petrol `#042f2e` | 11,3:1 | Fremragende |
| Fyr `#065f46` | Hvid | 7,7:1 | Fremragende |
| Nat `#04202a` | Aquamint `#5eead4` | 11,4:1 | Fremragende, farve som skrift |

I en grøn og blå blanding er den grønne ende som regel den lyseste, så tjek kontrasten der først.

Et stående rejseopslag med dyb petrol skrift på en klar aqua og grøn gradient

Et opslag for et rejsebureau i klare lagunetoner med dyb petrol skrift.

Et liggende linkbillede for en finansapp med hvid skrift på en gradient fra mørkegrøn til marineblå

Et LinkedIn-linkbillede i fyrregrøn til marine for en finansapp.

## Sådan varmer du en grøn og blå palet op

Grøn og blå er begge kølige, så et helt brand i dem kan føles fjernt. Én varm accent løser det. Sand, koral og blød guld ligger alle over for petrol i farvecirklen, så brug dem ved siden af gradienten, i en knap, et logo eller en smal stribe i den ene kant, i stedet for at blande dem ind. [Komplementærfarver](https://gradiently.design/da/guide/complementary-colors) forklarer, hvorfor blandinger på tværs af cirklen bliver grå.

### Undgå

- Petrol blandet direkte over i koral
- Hvid tekst på smaragd eller aqua
- Alle flader i kølige farver
- Mættet grøn på mættet blå i fuld styrke

### Gør

- Koral eller sand ved siden af gradienten som accent
- Dyb petrol skrift på lyse blandinger
- En varm hvid eller creme til paneler og tekst
- Én farve fører, den anden støtter

## CSS til grøn og blå gradient i lys og mørk tilstand

```css
.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}
```

Gletsjer i lys tilstand, skovsø i mørk tilstand. Samme nuancer, så brandet stadig føles som én ting.

At parre en lys og en mørk version af den samme grønne og blå er en elegant måde at få et temaskift til at føles designet i stedet for vendt om. [Gradienter til mørk tilstand](https://gradiently.design/da/guide/dark-mode-gradients) går i dybden. I Gradiently gengives én Mark i alle de størrelser, du designer i, og den vælger lys eller mørk skrift pr. linje ud fra sin egen palet, så både klare lagunetoner og mørk fyrregrøn holder teksten læselig.

## FAQ

### Hvad er en god kode til en grøn og blå gradient?

En klar mulighed er `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. Til noget mørkere og roligere kan du prøve `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Passer grøn og blå sammen?

Ja. De er naboer i farvecirklen med petrol og aqua imellem, så blandingen forbliver ren og føles naturlig.

### Hvilken farve ligger mellem grøn og blå?

Petrol, omkring `#0d9488`, med aqua og turkis som dens klarere slægtninge.

### Hvilken tekstfarve passer på en grøn og blå gradient?

Dyb petrol som `#042f2e` på lyse versioner og hvid eller mint på mørke. Hvid på klar smaragd eller aqua fejler på kontrast.

### Hvad betyder en grøn og blå gradient for et brand?

Den opfattes som regel som rolig, frisk og troværdig, fordi den minder om vand, himmel og planter. Mørke versioner føles stabile; lyse versioner føles rene.