# Grønn og blå gradient: friske koder med naturlig uttrykk

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

Grønt som møter blått, er fargen på grunt vann over sand, en innsjø under furutrær og nordlys. Derfor virker paret lett naturlig. Slik beholder du det uttrykket.

## The short version

- En grønn og blå gradient blander kjølige nabofarger som smaragdgrønn #10b981, blågrønn #0d9488 og himmelblå #0284c7, med blågrønn eller akva i midten.
- Fordi grønt og blått er naboer på fargesirkelen, holder overgangen seg ren. Den virker naturlig fordi den speiler vann, is og himmel.
- Sterke grønne og akvafarger er for lyse til hvit tekst. Bruk dyp blågrønn tekst på lyse versjoner og hvitt eller mint på mørke.
- Mørke grønne og blå gradienter virker rolige og pålitelige, mens lyse versjoner virker friske og rene.
- Paret passer til reiseliv, velvære, finans, friluftsmerker og teknologi. En varm aksent som sand eller korall hindrer et kaldt uttrykk.

En **grønn og blå gradient** blander to kjølige naboer: grønt som smaragd `#10b981` eller mint `#a7f3d0`, og blått som `#0284c7` eller himmelblå `#bae6fd`. Blågrønt og akva danner broen mellom dem. Overgangen holder seg ren fordi det ikke finnes et grått punkt mellom fargetonene. Den virker naturlig fordi du har sett den hele livet i vann, is og himmel. Kodene her følger fire landskap, med lesbare tekstfarger til hvert og CSS for lyst og mørkt tema.

## Derfor virker grønt og blått naturlig sammen

Grønt og blått er [analoge farger](https://gradiently.design/nb/guide/analogous-colors). De er naboer på fargesirkelen, så alle trinn mellom dem er tydelige farger, stort sett blågrønt og akva. Naturen viser paret stadig, fra grunne hav der blått vann ligger over grønne alger og sand, til bresjøer og furuskog speilet i stille vann. Å låne fra disse scenene er den enkleste måten å få gradienten til å virke rolig fremfor upersonlig.

- Dyp blågrønn tekst: #042f2e
- Furu: #065f46
- Smaragdgrønn: #10b981
- Blågrønn: #0d9488
- Akva: #22d3ee
- Innsjøblå: #0284c7
- Mint: #a7f3d0
- Himmel: #bae6fd

Spennet fra grønt til blått med en dyp tekstfarge. Blågrønt og akva er brofargene som holder overgangen sammenhengende.

## Lagune: klare gradienter i akva og grønt

Grunt tropisk vann er stort sett akva, med grønt der det er grunnest og blått der det blir dypere. Disse gradientene har et lyst feriepreg. Legg til et varmt sandfarget stopp hvis du vil at de skal ligne en strand fremfor et svømmebasseng.

- 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 legger til sand nederst, som gjør hele flaten varmere. [Havgradienter](https://gradiently.design/nb/guide/ocean-gradient) har flere.

## Skogssjø: dype grønne og blå gradienter

Mørkegrønt som går over i mørkeblått, virker stille, påkostet og pålitelig. Tenk på en skogssjø i skumringen eller fargen på en gammel flaske. Disse bærer hvit tekst godt og passer til finans, friluftsutstyr, arkitektur og alle merkevarer som vil virke stabile.

- Skogssjø: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Blågrønt i måneskinn: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- Flaskegrønt til marineblått: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Mørkegrønt og blått. Disse får lett synlige bånd i komprimerte bilder, så legg til fine korn før eksport.

## Isbre: lyse gradienter i mint og himmelblått

Gjør paret svært lyst, og du får breis og kalde morgener: rent, luftig og veldig rolig. Dette passer til helse, hudpleie, rengjøring og produktivitetsapper. Det kan virke klinisk, så et hint av varmt hvitt hjelper.

- Isbre: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Kald 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%)`

Lysegrønt og lyseblått. Dyp blågrønn tekst er lesbar på alle. [Mintgradienter](https://gradiently.design/nb/guide/mint-gradient) går videre inn i det grønne.

## Nordlys: grønt og blått på nattehimmelen

Nordlys er grønt og blått lys mot svart. Derfor er nordlysgradienter blant de mest populære mørke bakgrunnene. Hold fargen i myke bånd, og la den mørke flaten fylle mesteparten av bildet. [Nordlysgradienter](https://gradiently.design/nb/guide/aurora-gradients) dekker 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%)`
- Polarvirvel: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Grønt og blått mot nesten svart. Mint og akva gir begge slående tekstfarger på disse.

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

Smaragdgrønt og akva er overraskende lyse, så hvit tekst på de klare versjonene består ofte ikke kontrastkravet. Dyp blågrønn tekst fungerer på lyse overganger og holder alt i én fargefamilie. Hvitt og mint er lesbare på mørke versjoner. Forholdene under bruker WCAG-formelen. [Tekst på en gradient](https://gradiently.design/nb/guide/text-on-gradient) viser hva du gjør når en linje krysser begge ender.

| Bakgrunn | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Smaragdgrønn `#10b981` | Hvit | 2,5:1 | Består ikke |
| Akva `#22d3ee` | Hvit | 1,8:1 | Består ikke |
| Blågrønn `#0d9488` | Hvit | 3,7:1 | Bare store overskrifter |
| Mint `#a7f3d0` | Dyp blågrønn `#042f2e` | 11,3:1 | Utmerket |
| Furu `#065f46` | Hvit | 7,7:1 | Utmerket |
| Natt `#04202a` | Akvamint `#5eead4` | 11,4:1 | Utmerket, farge som tekst |

I en grønn og blå overgang er den grønne enden vanligvis lysest. Kontroller derfor kontrasten der først.

Et stående reiseinnlegg med dyp blågrønn tekst på en klar akva- og grønn gradient

Et reisebyråinnlegg med klare lagunetoner og dyp blågrønn tekst.

Et liggende lenkebilde for en finansapp med hvit tekst på en mørkegrønn til marineblå gradient

Et LinkedIn-lenkebilde i furu- og marineblått for en finansapp.

## Gjør en grønn og blå palett varmere

Grønt og blått er begge kjølige, så en hel merkevare i disse fargene kan virke fjern. Én varm aksent løser det. Sand, korall og mykt gull ligger alle på motsatt side av fargesirkelen fra blågrønt. Bruk dem derfor ved siden av gradienten, i en knapp, en logo eller en smal stripe ved kanten, fremfor å blande dem inn. [Komplementærfarger](https://gradiently.design/nb/guide/complementary-colors) forklarer hvorfor blanding på tvers av sirkelen blir grå.

### Unngå

- Blågrønt blandet rett inn i korall
- Hvit tekst på smaragdgrønt eller akva
- Alle flater i kjølige farger
- Mettet grønt på mettet blått i full styrke

### Gjør dette

- Korall eller sand som aksent ved siden av gradienten
- Dyp blågrønn tekst på lyse overganger
- Varmt hvitt eller krem til paneler og tekst
- Én farge leder, den andre støtter

## Grønn og blå gradient i CSS for lyst og mørkt tema

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

Isbre i lyst tema, skogssjø i mørkt. Samme fargetoner, så merkevaren fortsatt virker samlet.

Å kombinere en lys og mørk versjon av samme grønt og blått får et temabytte til å virke gjennomtenkt fremfor invertert. [Gradienter i mørkt tema](https://gradiently.design/nb/guide/dark-mode-gradients) går dypere. I Gradiently gjengis én Mark i alle størrelsene du designer i. Den velger lys eller mørk tekst per linje fra sin egen palett, slik at både klare laguner og mørke skogstoner beholder lesbare ord.

## FAQ

### Hva er en god kode for en grønn og blå gradient?

Et klart alternativ er `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. For noe mørkere og roligere, prøv `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Passer grønt og blått sammen?

Ja. De er naboer på fargesirkelen, med blågrønt og akva mellom seg. Derfor holder overgangen seg ren og virker naturlig.

### Hvilken farge ligger mellom grønt og blått?

Blågrønt, rundt `#0d9488`, med akva og turkis som klarere slektninger.

### Hvilken tekstfarge passer på en grønn og blå gradient?

Dyp blågrønn som `#042f2e` på lyse versjoner, og hvitt eller mint på mørke. Hvitt på klar smaragdgrønn eller akva består ikke kontrastkravet.

### Hva uttrykker en grønn og blå gradient for en merkevare?

Den virker vanligvis rolig, frisk og pålitelig fordi den minner om vann, himmel og planter. Mørke versjoner virker stabile, lyse versjoner rene.