Grøn og blå gradient: friske koder, der føles naturlige

En grøn og blå gradient blander to kølige naboer: grønne som smaragd #10b981 eller mint #a7f3d0 og blå som #0284c7 eller himmelblå #bae6fd, med petrol og aqua som broen imellem. Blandingen forbliver ren, fordi der ikke er noget gråt punkt mellem de to nuancer. Den føles naturlig, fordi du har set den hele livet i vand, is og himmel. Koderne her følger fire landskaber, med de tekstfarver, der kan læses på hvert af dem, og CSS til lys og mørk tilstand.

Hvorfor grøn og blå ser naturlige ud sammen

Grøn og blå er analoge farver: de ligger ved siden af hinanden i farvecirklen, så hvert trin imellem dem er en rigtig farve, mest petrol og aqua. Naturen viser parret hele tiden, fra lavvandede have, hvor blåt vand løber over grønt tang og sand, til gletsjersøer og fyrreskove, der spejler sig i stille vand. At låne fra de scener er den nemmeste måde at få gradienten til at føles rolig i stedet for korporativ.

Lagune: klare aqua og grønne gradienter

Lavt tropisk vand er mest aqua, med grønt hvor det er lavest og blåt hvor det bliver dybere. Disse gradienter føles ferieklare. Tilføj et varmt sandstop, hvis de skal føles som en strand og ikke som en swimmingpool.

Skovsø: dybe grønne og blå gradienter

Mørkegrøn, der løber over i mørkeblå, føles stille, eksklusiv og troværdig. Tænk på en skovsø i skumringen eller farven på en gammel flaske. De bærer hvid tekst godt og passer til finans, outdoorudstyr, arkitektur og ethvert brand, der vil virke stabilt.

Gletsjer: blege mint- og himmelgradienter

Løft parret helt op, og du får gletsjeris og kolde morgener: rent, luftigt og meget roligt. De passer til sundhed, hudpleje, rengøring og produktivitetsapps. De kan virke kliniske, så et strejf af varm hvid hjælper.

Nordlys: grøn og blå på en nattehimmel

Nordlyset er grønt og blåt lys på sort, og derfor er aurora-gradienter blandt de mest elskede mørke baggrunde. Hold farven i bløde bånd, og lad den mørke grund fylde det meste af billedet. Aurora-gradienter gennemgår hele teknikken.

Tekstfarver på grønne og blå gradienter

Smaragdgrøn og aqua er overraskende lyse, så hvid tekst på de klare versioner fejler ofte. Dyb petrol skrift virker på lyse blandinger og holder alt i én familie; hvid og mint læses godt på de mørke. Forholdene nedenfor bruger WCAG-formlen. Tekst på en gradient viser, hvad du gør, når en linje krydser begge ender.

Sådan varmer du en grøn og blå palet op

Grøn og blå er begge kølige, så et helt brand i dem kan føles fjernt. Én varm accent løser det. Sand, koral og blød guld ligger alle over for petrol i farvecirklen, så brug dem ved siden af gradienten, i en knap, et logo eller en smal stribe i den ene kant, i stedet for at blande dem ind. Komplementærfarver forklarer, hvorfor blandinger på tværs af cirklen bliver grå.

CSS til grøn og blå gradient i lys og mørk tilstand

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

At parre en lys og en mørk version af den samme grønne og blå er en elegant måde at få et temaskift til at føles designet i stedet for vendt om. Gradienter til mørk tilstand går i dybden. I Gradiently gengives én Mark i alle de størrelser, du designer i, og den vælger lys eller mørk skrift pr. linje ud fra sin egen palet, så både klare lagunetoner og mørk fyrregrøn holder teksten læselig.