Havsgradient: koder från grunt vatten till djupet

En havsgradient blandar blått och blågrönt i samma ordning som havet: blek akvamarin över sand, turkost på grunt vatten, klarblått på öppet vatten och ett nästan svart marinblått på djupet. Kör den uppifrån och ner, ljust till mörkt, så läser folk den som djup utan att få veta det. Koderna nedan följer det dyket och lägger sedan till horisontblandningar, ett helsides-CSS-hav och de textfärger som håller orden läsbara på vatten.

Varför havet är blått, och varför det spelar roll för din gradient

Vatten absorberar solljusets röda ände först, sedan gult och grönt, så ju djupare du går desto mer är det bara blått som återstår, och sedan försvinner även det. Grunt vatten över blek sand reflekterar mycket ljus och ser turkost ut, djupt vatten ser mörkt marinblått ut. En havsgradient som behåller den här ordningen känns naturlig, en som lägger mörkblått ovanför turkost ser upp och ner ut, även om ingen kan säga varför.

Gradienter för grunt hav

Den ljusa änden: vattnet du ser från en strand eller en båt i klart väder. Soliga, rena och inbjudande passar de semestervarumärken, badkläder, poolföretag och sommarmenyer. Den mer tropiska sidan tas upp i turkosa gradienter.

Gradienter för öppet hav

Längre ut tappar havet sitt gröna och blir ett klart, självsäkert blått. De här blandningarna känns pålitliga, lugna och kompetenta, vilket är varför de passar seglarklubbar, reseförsäkringsbolag, marinvetenskap och teknikvarumärken som vill ha blått utan kylan i företagsmarinblått. Blå gradienter har den bredare blå familjen.

Gradienter för djuphav

Längst ner i dyket blir havet nästan svart med bara en antydan till blått. De är dramatiska och tysta på en gång: dykskolor, dokumentärer, lyxklockor, fiskrestauranger efter mörkrets inbrott. Ett svagt sken uppifrån, som ljus från ytan, hindrar dem från att kännas tomma. Mörka blandningar får lätt bandning, så läs bandning i gradienter innan du exporterar.

Gradienter för horisont och strandlinje

Havsdesigner innehåller ofta himlen eller stranden. Knepet för en horisont är ett hårt stopp: två färgstopp på samma position, så att himlen slutar och havet börjar på en ren linje. En strandlinje fungerar tvärtom, med hav som tonar ut i sand via ett blekt skumstopp så att de varma och kalla färgerna aldrig möts som grått. Färgstopp förklarar hur stoppens positioner fungerar.

Välj riktning för varje format

Eftersom en havsgradient betyder djup fungerar den bäst vertikalt, och höga format visar hela dyket. I breda format fungerar en horisontblandning eller ett radiellt sken oftast bättre än att pressa in hela havet i en låg höjd. Ett inlägg i porträtt ligger mittemellan: en mild vertikal blandning från öppet hav till djup fungerar, så länge rubriken landar i ett band i stället för över förändringen.

Här sviker en enda beskuren bild dig: ljuset hamnar fel i hälften av dina storlekar. En Mark i Gradiently renderas i stället på nytt i varje format, och Designer kan skapa storyn, inlägget och bannern från en brief, så att havet sitter rätt i varje.

En havsgradient i CSS för en hel sida

En lång sida kan bli ett dyk: ljus överst, djup vid sidfoten. Fäst gradienten vid hela dokumentets höjd i stället för fönstrets, ge den en enfärgad reserv och lägg till ett mjukt ytsken överst. CSS linjära gradienter tar upp syntaxen.

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

Text på en havsgradient

En havsblandning skiftar från mycket ljus till mycket mörk, så ingen enskild textfärg fungerar över hela den. Mörkt marinblått #082f49 på blekt himmelsblått #7dd3fc mäter ungefär 8,3 till 1. Vitt på dyning #075985 mäter ungefär 7,6 till 1, och på öppet hav #0284c7 sjunker det till ungefär 4,1 till 1, fint för stora rubriker men otillräckligt för brödtext. Placera orden där färgen passar dem, och se text på gradienter för fler tekniker.