Havgradient: fargekoder fra grunt vann til dypet

En havgradient blander blått og blågrønt i samme rekkefølge som havet: lys akva over sand, turkis på grunt vann, klart blått på åpent hav og nesten svart marineblått i dypet. La den gå fra topp til bunn, lyst til mørkt, så oppfatter folk dybde uten forklaring. Kodene nedenfor følger dykket, før du får horisontblandinger, et CSS-hav over hele siden og tekstfarger som holder ordene leselige på vann.

Hvorfor havet er blått, og hva det betyr for gradienten

Vann absorberer den røde delen av sollyset først, så gult og grønt. Jo dypere du går, desto mer blir bare blått igjen, før også det forsvinner. Grunt vann over lys sand reflekterer mye lys og virker turkist; dypt vann virker mørkt marineblått. En havgradient som følger denne rekkefølgen, føles naturlig. En som legger mørkeblått over turkis, virker opp ned, selv om ingen kan si hvorfor.

Gradienter med grunt hav

Den lyse enden: vannet du ser fra en strand eller båt i klarvær. Solrike, rene og innbydende blandinger passer reisemerkevarer, badetøy, bassengbedrifter og sommermenyer. Den mer tropiske siden dekkes i turkise gradienter.

Gradienter med åpent hav

Lenger ute mister havet grønnskjæret og blir klart, selvsikkert blått. Disse blandingene virker pålitelige, rolige og kompetente, og passer derfor seilklubber, reiseforsikring, havforskning og teknologimerkevarer som vil ha blått uten kulden i bedriftsmarineblått. Blå gradienter dekker den større blåfamilien.

Gradienter med dypt hav

Nederst i dykket blir havet nesten svart med bare et spor av blått. Disse er dramatiske og stille på samme tid: dykkerskoler, dokumentarer, luksusklokker og sjømatrestauranter etter mørkets frembrudd. Et svakt skjær ovenfra, som lys fra overflaten, hindrer at de virker tomme. Mørke blandinger får lett fargebånd, så les fargebånd i gradienter før eksport.

Horisont- og strandgradienter

Havdesign har ofte med himmelen eller stranden. Trikset for en horisont er en skarp overgang: to fargestopp på samme posisjon, slik at himmelen slutter og havet begynner langs en ren linje. En strand virker motsatt, med hav som tones inn i sand gjennom et lyst skumstopp, slik at varme og kjølige farger aldri møtes som grått. Gradientstopp forklarer hvordan posisjonene fungerer.

Velge retning til hvert format

Fordi en havgradient betyr dybde, fungerer den best loddrett, og høye formater viser hele dykket. I brede formater fungerer en horisontblanding eller et radialt skjær vanligvis bedre enn å presse hele havet inn i liten høyde. Et stående innlegg ligger mellom disse: En forsiktig loddrett blanding fra åpent hav til dyp fungerer, så lenge overskriften ligger i ett bånd fremfor over endringen.

Her svikter ett beskåret bilde: Lyset havner feil i halvparten av størrelsene. En Mark fra Gradiently rendres i stedet på nytt i hvert format, og Designer kan lage storyen, innlegget og banneret fra én brief, slik at havet ligger riktig i hver.

En havgradient i CSS over hele siden

En lang side kan bli et dykk: lys øverst, dyp ved bunnteksten. Fest gradienten til hele dokumenthøyden fremfor vinduet, gi den en ensfarget reserve, og legg til et mykt overflateskjær øverst. Lineære CSS-gradienter dekker 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 går fra svært lyst til svært mørkt, så ingen enkelt tekstfarge fungerer overalt. Dyp marineblå #082f49 på lys himmelblå #7dd3fc gir omtrent 8,3 til 1. Hvitt på dønning #075985 gir omtrent 7,6 til 1, og på åpent hav #0284c7 faller det til omtrent 4,1 til 1. Det holder til store overskrifter, men ikke brødtekst. Plasser ordene der fargen passer dem, og se tekst på gradienter for flere teknikker.