Grønn og blå gradient: friske koder med naturlig 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. 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.

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.

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.

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.

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 dekker hele teknikken.

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 viser hva du gjør når en linje krysser begge ender.

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 forklarer hvorfor blanding på tvers av sirkelen blir grå.

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

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

Å 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 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.