Blågrønn gradient: fargekoder fra lagune til dyphav

En blågrønn gradient går mellom blågrønne toner: lys akva i den lyse enden, en klar mellomtone i midten og mørk, blekkaktig grønnblå nederst. Fordi blågrønn ligger midt mellom blått og grønt, blandes den lett mot begge sider og blir nesten aldri grumsete. Kodene nedenfor følger den nedover i dybde fra solfylt lagune til dyphav, med råd om aksenter, CSS og skrift for hver.

En blågrønn skala for alle gradienter

De fleste gode blågrønne gradienter bruker to til fire trinn fra denne skalaen. Velg nabotoner for en forsiktig overgang, eller hopp over tre trinn for dramatikk. Navnene nedenfor brukes videre i artikkelen.

Lyse blågrønne gradienter: lagune og grunne

Lys blågrønn er ren, frisk og stille glad. Den passer til velvære, bassenger og badetøy, tann- og helseklinikker og produkter som vil virke hygieniske uten kulden fra rent blått. La den gå mot hvitt eller lys mint for å holde den myk.

Mellomlyse blågrønne gradienter: rev og jade

I midten av skalaen er blågrønn mest selvsikker. Disse passer til apper, fintech-kontrollpaneler, bærekraftsmerker og undervisning, fordi de virker både trygge gjennom blått og levende gjennom grønt. Mot smaragd virker de naturlige. Mot blått virker de tekniske.

Mørke blågrønne gradienter: dyphavet

I den mørke enden blir blågrønn nesten svart med et kjølig grønt pust. Dette er den mest sofistikerte varianten: advokatfirmaer, brennevin, hoteller, arkitektur og kveldsarrangementer. Den gir også en god bakgrunn for én lys aksent, fordi ingenting konkurrerer med den. Mørke blandinger får fargebånd i komprimerte eksporter, så litt korn hjelper. Se fargebånd i gradienter.

Varme aksenter til en blågrønn gradient

Motsatsen på fargesirkelen er varm rødoransje, så korall, fersken, aprikos og kobber får blågrønn til å skinne. Hold den varme fargen utenfor selve blandingen: blågrønn til korall går gjennom matt grått i midten. Bruk heller aksenten til en knapp, overskrift eller liten form. Komplementærfarger forklarer spenningen, og korallgradienter gir koder for den andre siden.

Legg merke til den tredje prøven: svært lyse toner av motsatte farger blandes fint, fordi det er lite metning å miste. Det er et nyttig triks for myk emballasje og bryllupstrykksaker.

Velg en blågrønn gradient til merkevaren

Blågrønn er populær innen helse, økonomi og bærekraft, så tonen alene skiller deg ikke ut. Det som gjør det, er dybden, aksenten du kobler til og overflaten. Start med oppgaven designet skal løse.

CSS for blågrønn gradient i mørkt grensesnitt

Dyp blågrønn er et fint alternativ til svart eller marineblått i et mørkt grensesnitt. Den virker mykere enn rent svart og gir fortsatt lys tekst god kontrast. Her er en bakgrunn for en appramme med myk glød bak toppen av siden. Mer om metoden i design i mørk modus.

:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }

Lesbar tekst på blågrønn

Mellomlys blågrønn lurer øyet. #14b8a6 ser sterk nok ut for hvit skrift, men måler omtrent 2,5 til 1, klart under kravet. Hvitt trenger Tare (#0f766e, omtrent 5,5 til 1) eller mørkere. På alt fra Akva og lysere bruker du Avgrunn #042f2e som tekstfarge. Det holder teksten i den blågrønne familien og er lett å lese.

Det siste betyr mer enn det ser ut til. En gradient beskåret fra innlegg til story flytter lyset til feil sted. I Gradiently gjengis en Mark i hver størrelse, og Designer kan lage de andre størrelsene for deg. Det blågrønne uttrykket forblir dermed balansert i strømmen, storyen og toppbildet på nettstedet.