# Grönblå gradienter: friska koder som känns naturliga

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

Grönt som möter blått är färgen på grunt vatten över sand, på en sjö under tallar, på norrsken. Därför känns paret naturligt så lätt. Så håller du det så.

## The short version

- En grönblå gradient blandar närliggande kalla nyanser som smaragd #10b981, teal #0d9488 och himmelsblå #0284c7, med teal eller aqua i mitten.
- Eftersom grönt och blått ligger intill varandra på färghjulet förblir blandningen ren, och den läses som naturlig eftersom den speglar vatten, is och himmel.
- Klargröna och aquafärger är för ljusa för vit text, så använd en djup tealfärgad text på ljusa versioner och vit eller mint på mörka.
- Mörka grönblå gradienter känns lugna och pålitliga, medan ljusa versioner känns friska och rena.
- Paret passar resor, välmående, finans, friluftsvarumärken och teknik, och en varm accent som sand eller korall hindrar det från att kännas kallt.

En **grönblå gradient** blandar två kalla grannar: gröna som smaragd `#10b981` eller mint `#a7f3d0` och blå som `#0284c7` eller himmel `#bae6fd`, med teal och aqua som bro mellan dem. Blandningen förblir ren eftersom det inte finns någon grå punkt mellan de två nyanserna. Den känns naturlig eftersom du sett den hela livet i vatten, is och himmel. Koderna här följer fyra landskap, med de textfärger som läses på var och en och CSS för ljust och mörkt läge.

## Därför ser grönt och blått naturligt ut tillsammans

Grönt och blått är [analoga färger](https://gradiently.design/sv/guide/analogous-colors): de ligger bredvid varandra på hjulet, så varje steg mellan dem är en riktig färg, mest teal och aqua. Naturen visar paret hela tiden, från grunda hav där blått vatten rinner över grön tång och sand till glaciärsjöar och tallskogar som speglar sig i stilla vatten. Att låna från de scenerna är det enklaste sättet att få gradienten att kännas lugn snarare än korporativ.

- Djup tealtext: #042f2e
- Tall: #065f46
- Smaragd: #10b981
- Teal: #0d9488
- Aqua: #22d3ee
- Sjöblå: #0284c7
- Mint: #a7f3d0
- Himmel: #bae6fd

Spannet från grönt till blått med en djup textfärg. Teal och aqua är brofärgerna som håller blandningen sammanhängande.

## Lagun: klara aqua- och gröna gradienter

Grunt tropiskt vatten är mest aqua, med grönt där det är grundast och blått där det blir djupare. De här gradienterna känns semesterljusa. Lägg till ett varmt sandstopp om du vill att de ska kännas som en strand snarare än en simbassäng.

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

Klargröna och blå gradienter. Den tredje lägger sand i botten, vilket värmer hela bilden. [Havsgradienter](https://gradiently.design/sv/guide/ocean-gradient) har fler.

## Tallsjö: djupgröna och blå gradienter

Mörkgrönt som går över i mörkblått känns stilla, påkostat och pålitligt. Tänk på en skogssjö i skymningen, eller färgen på en gammal flaska. De bär vit text väl och passar finans, friluftsutrustning, arkitektur och varje varumärke som vill kännas stadigt.

- Tallsjö: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Månbelyst teal: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- Flaska till marin: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Mörkgrönt och blått. De får lätt färgband i komprimerade bilder, så lägg på ett fint korn före exporten.

## Glaciär: bleka mint- och himmelsgradienter

Lyft paret ända upp så får du glaciäris och kalla morgnar: rent, luftigt och mycket lugnt. De passar vård, hudvård, städning och produktivitetsappar. De kan kännas kliniska, så en nyans av varmvitt hjälper.

- Glaciär: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Kall morgon: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- Is i solljus: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Blekt grönt och blått. Djup tealtext läses på varje. [Mintgradienter](https://gradiently.design/sv/guide/mint-gradient) går längre in på grönt.

## Norrsken: grönt och blått på en natthimmel

Norrskenet är grönt och blått ljus på svart, vilket är varför norrskensgradienter hör till de mest älskade mörka bakgrunderna. Håll färgen i mjuka band och låt den mörka grunden bära det mesta av bilden. [Norrskensgradienter](https://gradiently.design/sv/guide/aurora-gradients) går igenom hela tekniken.

- Norrsken: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Ljust band: `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 och blått på nästan svart. Mint och aqua blir båda slående textfärger på dessa.

## Textfärger på grönblå gradienter

Smaragd och aqua är förvånansvärt ljusa, så vit text på de klara versionerna misslyckas ofta. Djup tealtext fungerar på ljusa blandningar och håller allt i en färgfamilj. Vitt och mint läses bra på de mörka. Kvoterna nedan använder WCAG-formeln. [Text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) visar vad du gör när en rad korsar båda ändarna.

| Bakgrund | Text | Kontrast | Utlåtande |
| --- | --- | --- | --- |
| Smaragd `#10b981` | Vit | 2,5:1 | Underkänd |
| Aqua `#22d3ee` | Vit | 1,8:1 | Underkänd |
| Teal `#0d9488` | Vit | 3,7:1 | Bara stora rubriker |
| Mint `#a7f3d0` | Djup teal `#042f2e` | 11,3:1 | Utmärkt |
| Tall `#065f46` | Vit | 7,7:1 | Utmärkt |
| Natt `#04202a` | Aquamint `#5eead4` | 11,4:1 | Utmärkt, färg som text |

I en grönblå blandning är den gröna änden oftast den ljusare, så kontrollera kontrasten där först.

Ett stående reseinlägg med djup tealfärgad text på en klar aqua- och grön gradient

Ett researbyrå-inlägg i klara lagunnyanser, med djup tealtext.

En liggande länkbild för en finansapp med vit text på en gradient från mörkgrönt till marin

En LinkedIn-länkbild i tall till marin för en finansapp.

## Så värmer du upp en grönblå palett

Grönt och blått är båda kalla, så ett helt varumärke i dem kan kännas avlägset. En varm accent löser det. Sand, korall och mjukt guld ligger alla mitt emot teal på hjulet, så använd dem bredvid gradienten, i en knapp, en logotyp eller en list längs en kant, i stället för att blanda in dem. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) förklarar varför en blandning tvärs över hjulet blir grå.

### Undvik

- Teal blandad rakt in i korall
- Vit text på smaragd eller aqua
- Alla ytor i kalla färger
- Mättat grönt på mättat blått i full styrka

### Gör

- Korall eller sand bredvid gradienten som accent
- Djup tealtext på ljusa blandningar
- Ett varmt vitt eller grädde till paneler och text
- En färg som leder, den andra som stöd

## CSS för grönblå gradient i ljust och mörkt läge

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

Glaciär i ljust läge, tallsjö i mörkt läge. Samma nyanser, så varumärket känns fortfarande som en enda sak.

Att para en ljus och en mörk version av samma gröna och blå är ett snyggt sätt att få ett temabyte att kännas designat snarare än inverterat. [Gradienter för mörkt läge](https://gradiently.design/sv/guide/dark-mode-gradients) går djupare. I Gradiently renderas en Mark i varje storlek du designar och väljer ljus eller mörk färg per rad ur sin egen palett, så både lagunens klara toner och tallskogens mörka behåller läsbar text.

## FAQ

### Vilken är en bra kod för en grönblå gradient?

Ett klart alternativ är `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. För något mörkare och lugnare, prova `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Passar grönt och blått ihop?

Ja. De är grannar på färghjulet, med teal och aqua emellan, så blandningen förblir ren och känns naturlig.

### Vilken färg ligger mellan grönt och blått?

Teal, runt `#0d9488`, med aqua och turkos som dess ljusare släktingar.

### Vilken textfärg passar på en grönblå gradient?

Djup teal som `#042f2e` på ljusa versioner, och vit eller mint på mörka. Vitt på klar smaragd eller aqua klarar inte kontrasten.

### Vad betyder en grönblå gradient för ett varumärke?

Den läses oftast som lugn, frisk och pålitlig, eftersom den ekar av vatten, himmel och växter. Mörka versioner känns stadiga, ljusa känns rena.