# Havgradient: koder fra lavt vand til dybet [Canonical HTML page](https://gradiently.design/da/guide/ocean-gradient) Havet er allerede en gradient: blegt over sand, klart hvor solen når ned, næsten sort hvor den ikke gør. Kopiér den rækkefølge, så ser en havblanding ægte ud. Her er koderne, dybde for dybde. ## The short version - En havgradient blander blå og blågrønne i den rækkefølge, rigtigt vand viser dem: blegt og turkis på lavt vand, klar blå på åbent hav og næsten sort marineblå i dybet. - Vand absorberer rødt lys først, og derfor bliver havet blåere og mørkere med dybden. - Lodrette havgradienter, lyse øverst og mørke nederst, opfattes som dybde; et skarpt stop mellem to blå opfattes som en horisont. - Hvid tekst virker på den dybblå halvdel af en havgradient; det blege lavvande kræver mørk marineblå tekst. - Havgradienter passer til rejser, svømning, sejlads, fisk og skaldyr, bæredygtighed og rolige teknologiprodukter. 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. - Skum: #e0f7f4 - Lavvande: #7ee0d6 - Lagune: #22b8cf - Åbent hav: #0284c7 - Dønning: #075985 - Tusmørkezonen: #0c3b66 - Dybet: #082f49 - Afgrund: #020c1b Havet fra top til bund. De fleste havgradienter bruger tre eller fire nabostop fra denne kolonne. ## 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](https://gradiently.design/da/guide/turquoise-gradient). - Skum til lavvande: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)` - Klart vand: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)` - Sol på vandet: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)` - Revkant: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)` Blandinger med lavt vand. Hver starter med et blegt eller klart stop, sådan som lyst vand ser ud over sand. ## 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](https://gradiently.design/da/guide/blue-gradient) har den bredere blå familie. - Åbent hav: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)` - Atlanterhavet: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)` - Offshore: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)` - Dønning: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)` Blå fra åbent vand. Mindre grønt, mere dybde og stadig lyse nok øverst til at føles som dagslys. ## 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](https://gradiently.design/da/guide/gradient-banding), før du eksporterer. - Nedstigning: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)` - Lys fra overfladen: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)` - Morild: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)` Blandinger fra dybhavet. Én blød lyskilde er nok; alt andet er dybde. ## 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](https://gradiently.design/da/guide/gradient-stops) forklarer, hvordan stoppositioner virker. - Horisont ved daggry: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)` - Horisont ved middag: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)` - Kystlinje: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)` Skarpe stop giver en horisont; et blegt skumstop giver en blød kystlinje. ## 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. - Story 1080×1920: 1080 × 1920 - Pin 1000×1500: 1000 × 1500 - Opslag 1080×1350: 1080 × 1350 - Hero på website 1920×1080: 1920 × 1080 - LinkedIn-banner 1584×396: 1584 × 396 På stories og pins bruger du hele højden til dykket. På hero og banner kan du i stedet prøve en horisont eller lys fra én side. 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](https://gradiently.design/da/guide/css-linear-gradient) gennemgår syntaksen. ```css 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; } ``` En side, der bliver dybere, mens du scroller. Brug mørk tekst i de lyse øvre afsnit og lys tekst i de nederste. ## 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](https://gradiently.design/da/guide/text-on-gradient) for flere teknikker. En story for en sejlklub med tydelig overskrift på en havgradient, der bliver mørkere fra klar blå til dyb marineblå En story, der går fra klart vand øverst til dybblå nederst, med ordene i det roligste bånd. ## FAQ ### Hvilke farver giver en havgradient? Bleg aqua, turkis, klar blå, dybblå og næsten sort marineblå, i den rækkefølge fra top til bund. Koder som `#7ee0d6`, `#0284c7` og `#082f49` dækker spændet. ### Skal en havgradient gå fra lys til mørk eller fra mørk til lys? Lys øverst og mørk nederst, hvilket svarer til, hvordan lyset aftager med dybden i rigtigt vand. ### Hvordan laver jeg en horisontlinje i en CSS-gradient? Giv to farvestop samme position, som `#bae6fd 45%, #0284c7 45%`. Så skifter farven på en skarp linje i stedet for en blanding. ### Hvilken tekstfarve virker på en havgradient? Mørk marineblå på den lyse øvre del og hvid på den dybe nedre del. Tjek punktet lige bag hver tekstlinje. ### Hvad er forskellen på en havgradient og en blå gradient? En havgradient følger rækkefølgen i rigtigt vand og rummer som regel turkis og næsten sort marineblå. En blå gradient kan være enhver blanding af blå.