# Blågrønn gradient: fargekoder fra lagune til dyphav

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

Blågrønn ligger midt mellom blått og grønt, noe som gjør den rolig, smart og uvanlig lett å blande. Gå fra lagunen til dyphavet med koder for hver dybde.

## The short version

- En blågrønn gradient blander blågrønne toner, vanligvis fra lys akva til dyp grønnblå.
- Blågrønn blandes rent med naboene cyan, smaragd, blått og marineblått.
- Varme aksenter som korall, fersken og kobber ligger motsatt blågrønn og får den til å gløde når de holdes utenfor blandingen.
- Hvit tekst trenger blågrønn minst så dyp som #0f766e for godkjent kontrast. Lysere toner trenger mørk skrift.
- Svært mørk blågrønn er en god bakgrunn i mørk modus fordi den er mykere enn svart og mindre forventet enn marineblått.

En **blågrønn gradient** går mellom blågrønne toner: lys akva i den lyse enden, en klar mellomtone i midten og mørk, blekkaktig grønnblå nederst. Fordi blågrønn ligger midt mellom blått og grønt, blandes den lett mot begge sider og blir nesten aldri grumsete. Kodene nedenfor følger den nedover i dybde fra solfylt lagune til dyphav, med råd om aksenter, CSS og skrift for hver.

## En blågrønn skala for alle gradienter

De fleste gode blågrønne gradienter bruker to til fire trinn fra denne skalaen. Velg nabotoner for en forsiktig overgang, eller hopp over tre trinn for dramatikk. Navnene nedenfor brukes videre i artikkelen.

- Grunne: #ccfbf1
- Lagune: #5eead4
- Akva: #2dd4bf
- Blågrønn: #14b8a6
- Rev: #0d9488
- Tare: #0f766e
- Dyp blågrønn: #115e59
- Avgrunn: #042f2e

Åtte blågrønne toner fra lyst til mørkt. To eller tre naboer gir en rolig blanding. Lyst til mørkt gir dybde.

## Lyse blågrønne gradienter: lagune og grunne

Lys blågrønn er ren, frisk og stille glad. Den passer til velvære, bassenger og badetøy, tann- og helseklinikker og produkter som vil virke hygieniske uten kulden fra rent blått. La den gå mot hvitt eller lys mint for å holde den myk.

- Grunne: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)`
- Lagune: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)`
- Himmel til lagune: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)`
- Solfylt basseng: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Lyse blågrønne toner som forblir friske. Hver beholder et nesten hvitt stopp som gir plass til mørk tekst.

## Mellomlyse blågrønne gradienter: rev og jade

I midten av skalaen er blågrønn mest selvsikker. Disse passer til apper, fintech-kontrollpaneler, bærekraftsmerker og undervisning, fordi de virker både trygge gjennom blått og levende gjennom grønt. Mot smaragd virker de naturlige. Mot blått virker de tekniske.

- Rev: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Cyan til tare: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Blågrønn til blått: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)`
- Blågrønn i tre trinn: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)`

Mellomtonene trekker mot smaragd eller blått. Velg retningen etter hvordan merkevaren skal føles.

## Mørke blågrønne gradienter: dyphavet

I den mørke enden blir blågrønn nesten svart med et kjølig grønt pust. Dette er den mest sofistikerte varianten: advokatfirmaer, brennevin, hoteller, arkitektur og kveldsarrangementer. Den gir også en god bakgrunn for én lys aksent, fordi ingenting konkurrerer med den. Mørke blandinger får fargebånd i komprimerte eksporter, så litt korn hjelper. Se [fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding).

- Nedstigning: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)`
- Lys ovenfra: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)`
- Dyp blågrønn til midnatt: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)`
- Lysstråle: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)`

Mørke blågrønne toner med én lyskilde. De føles kostbare og rolige.

## Varme aksenter til en blågrønn gradient

Motsatsen på fargesirkelen er varm rødoransje, så korall, fersken, aprikos og kobber får blågrønn til å skinne. Hold den varme fargen utenfor selve blandingen: blågrønn til korall går gjennom matt grått i midten. Bruk heller aksenten til en knapp, overskrift eller liten form. [Komplementærfarger](https://gradiently.design/nb/guide/complementary-colors) forklarer spenningen, og [korallgradienter](https://gradiently.design/nb/guide/coral-gradient) gir koder for den andre siden.

- Unngå: grå midte: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Kobbersol på dyp blågrønn: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Lys blågrønn til fersken: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

En mettet blågrønn-til-korall-blanding blir grå i midten. Et lite varmt lys på blågrønn, eller to lyse toner, fungerer langt bedre.

Legg merke til den tredje prøven: svært lyse toner av motsatte farger blandes fint, fordi det er lite metning å miste. Det er et nyttig triks for myk emballasje og bryllupstrykksaker.

## Velg en blågrønn gradient til merkevaren

Blågrønn er populær innen helse, økonomi og bærekraft, så tonen alene skiller deg ikke ut. Det som gjør det, er dybden, aksenten du kobler til og overflaten. Start med oppgaven designet skal løse.

| Hvis du er | Prøv | Kombiner med |
| --- | --- | --- |
| En klinikk, et basseng eller et hudpleiemerke | Grunne eller Lagune | Kullfarget skrift, hvitt rom |
| En app eller et fintech-produkt | Blågrønn til blått | Én korallfarge til knapper |
| En kafé, blomsterbutikk eller et hagesenter | Jade | Krem og terrakotta |
| Et hotell, en bar eller et advokatfirma | Lys ovenfra | Detaljer i kobber eller messing |
| Et kveldsarrangement | Lysstråle | Overskrift i lys lagune |

Utgangspunkter, ikke regler. Test hver med den faktiske overskriften og logoen.

## CSS for blågrønn gradient i mørkt grensesnitt

Dyp blågrønn er et fint alternativ til svart eller marineblått i et mørkt grensesnitt. Den virker mykere enn rent svart og gir fortsatt lys tekst god kontrast. Her er en bakgrunn for en appramme med myk glød bak toppen av siden. Mer om metoden i [design i mørk modus](https://gradiently.design/nb/guide/dark-mode-design).

```css
:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }
```

En dyp blågrønn appramme med blågrønn glød øverst. Lyse lagunelenker forblir lesbare på den.

## Lesbar tekst på blågrønn

Mellomlys blågrønn lurer øyet. `#14b8a6` ser sterk nok ut for hvit skrift, men måler omtrent 2,5 til 1, klart under kravet. Hvitt trenger Tare (`#0f766e`, omtrent 5,5 til 1) eller mørkere. På alt fra Akva og lysere bruker du Avgrunn `#042f2e` som tekstfarge. Det holder teksten i den blågrønne familien og er lett å lese.

| Bakgrunn | Hvit tekst | Avgrunnstekst #042f2e |
| --- | --- | --- |
| Lagune `#5eead4` | Ikke godkjent | Omtrent 9,8:1 |
| Blågrønn `#14b8a6` | Omtrent 2,5:1, ikke godkjent | Omtrent 5,8:1 |
| Rev `#0d9488` | Omtrent 3,7:1, bare stor tekst | Svak |
| Tare `#0f766e` | Omtrent 5,5:1, godkjent | Ikke godkjent |
| Dyp blågrønn `#115e59` | Omtrent 7,6:1, godkjent | Ikke godkjent |

Blågrønn skifter fra mørk til hvit skrift mellom Rev og Tare.

Et stående spainnlegg med hvit tekst på dyp blågrønn gradient

Som stående innlegg ligger overskriften i den roligste blågrønne tonen.

Samme spadesign som høy story, med blågrønt lys flyttet for å passe formatet

Samme design som story, gjengitt på nytt fremfor beskåret.

Det siste betyr mer enn det ser ut til. En gradient beskåret fra innlegg til story flytter lyset til feil sted. I Gradiently gjengis en Mark i hver størrelse, og Designer kan lage de andre størrelsene for deg. Det blågrønne uttrykket forblir dermed balansert i strømmen, storyen og [toppbildet på nettstedet](https://gradiently.design/nb/guide/website-hero-background).

## FAQ

### Hvilke farger passer til en blågrønn gradient?

Cyan, smaragd, blått og marineblått blandes inn i den. Korall, fersken, kobber og gull gir sterke varme aksenter utenfor blandingen.

### Hva er hex-koden for blågrønn?

Nettfargen `teal` er `#008080`. Moderne paletter bruker ofte livligere varianter som `#14b8a6` som mellomtone og `#0f766e` som en dypere.

### Hva er forskjellen på blågrønn og turkis?

Blågrønn er dypere og mer dempet. Turkis er lysere, klarere og trekker litt mer mot grønt. Begge ligger mellom blått og grønt.

### Kan jeg bruke hvit tekst på blågrønn?

Bare på dyp blågrønn, fra omtrent `#0f766e` og mørkere. Klare og lyse toner trenger mørk tekst for godkjent kontrast.

### Er blågrønn en god farge for mørk modus?

Ja. En svært mørk blågrønn som `#042f2e` er mykere enn svart og mer særpreget enn marineblått. Lyse blågrønne aksenter leses godt på den.