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

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

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.

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.

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.

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 går igenom hela tekniken.

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 visar vad du gör när en rad korsar båda ändarna.

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 förklarar varför en blandning tvärs över hjulet blir grå.

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

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

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