Havgradient: koder fra lavt vand til dybet

En havgradient blander blå og blågrønne i samme rækkefølge som havet: bleg aqua over sand, turkis på lavt vand, klar blå på åbent hav og en næsten sort marineblå i dybet. Lad den gå fra top til bund, fra lys til mørk, så opfatter folk den som dybde uden at få det at vide. Koderne nedenfor følger det dyk og tilføjer derefter horisontblandinger, et helsides hav i CSS og de tekstfarver, der holder ord læsbare på vand.

Hvorfor havet er blåt, og hvorfor det betyder noget for din gradient

Vand absorberer den røde ende af sollyset først, derefter gul og grøn, så jo dybere du kommer, desto mere er der kun blåt tilbage, og så forsvinder selv det. Lavt vand over lyst sand reflekterer meget lys og ser turkis ud; dybt vand ser mørkt marineblåt ud. En havgradient, der holder den rækkefølge, føles naturlig; en, der sætter mørkeblå over turkis, ser ud til at stå på hovedet, selv om ingen kan sige hvorfor.

Havgradienter med lavt vand

Den lyse ende: det vand, du ser fra en strand eller en båd i klart vejr. Solrigt, rent og indbydende, og det passer til feriebrands, badetøj, poolfirmaer og sommermenuer. Den mere tropiske side gennemgås i turkise gradienter.

Gradienter med åbent hav

Længere ude mister havet sin grønne tone og bliver en klar, selvsikker blå. Disse blandinger føles pålidelige, rolige og kompetente, og derfor passer de til sejlklubber, rejseforsikringer, havforskning og teknologibrands, der vil have blå uden kulden fra korporativ marineblå. Blå gradienter har den bredere blå familie.

Gradienter med dybt hav

I bunden af dykket bliver havet næsten sort med kun et spor af blåt. De er dramatiske og stille på én gang: dykkerskoler, dokumentarer, luksusure, fiskerestauranter efter mørkets frembrud. Et svagt skær ovenfra, som lys fra overfladen, forhindrer dem i at føles tomme. Mørke blandinger får nemt banding, så læs banding i gradienter, før du eksporterer.

Gradienter med horisont og kystlinje

Havdesign rummer ofte himlen eller stranden. Tricket til en horisont er et skarpt stop: to farvestop på samme position, så himlen slutter, og havet begynder på en ren linje. En kystlinje virker modsat og toner havet over i sand gennem et blegt skumstop, så de varme og kølige farver aldrig mødes som grå. Farvestop i gradienter forklarer, hvordan stoppositioner virker.

Vælg retning til hvert format

Fordi en havgradient betyder dybde, virker den bedst lodret, og høje formater viser hele dykket. I brede formater virker en horisontblanding eller et radialt skær som regel bedre end at presse hele havet ned i en lav højde. Et stående opslag ligger midt imellem: en blid lodret blanding fra åbent hav til dyb virker, så længe overskriften lander i ét bånd frem for hen over skiftet.

Det er her, et enkelt beskåret billede svigter dig: lyset ender det forkerte sted i halvdelen af dine størrelser. En Gradiently Mark gengives i stedet på ny i hvert format, og Designer kan lave storyen, opslaget og banneret ud fra én brief, så havet sidder rigtigt i hver af dem.

En havgradient i CSS til en hel side

En lang side kan blive et dyk: lys øverst, dyb ved footeren. Knyt gradienten til hele dokumentets højde frem for vinduet, giv den en ensfarvet reserve, og tilføj et blødt overfladeskær øverst. Lineære gradienter i CSS gennemgår syntaksen.

html {
  background-color: #082f49; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  color: #082f49;
  background-image:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%),
    linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%);
}

/* switch to light text once the page reaches deep water */
.deep { color: #e0f7f4; }

Tekst på en havgradient

En havblanding skifter fra meget lys til meget mørk, så ingen enkelt tekstfarve virker over det hele. Dyb marineblå #082f49 på bleg himmelblå #7dd3fc måler omkring 8,3 til 1. Hvid på dønning #075985 måler omkring 7,6 til 1, og på åbent hav #0284c7 falder den til omkring 4,1 til 1, fint til store overskrifter, men ikke nok til brødtekst. Placér ordene, hvor farven passer dem, og se tekst på gradienter for flere teknikker.