Svarte gradienter: design med nesten svart

En svart gradient er en overgang som beveger seg mellom nesten-svarte toner, eller fra svart til en farge, slik at et mørkt design får dybde og lys i stedet for et flatt tomrom. De som ser eksklusive ut, bruker nesten aldri ren #000000. De starter fra en tonet svart, som #0b0b10, lar lysheten endre seg med bare noen få prosent og legger til én enkelt kilde til farge eller lys et sted i feltet.

Denne guiden gir deg tonede svartfarger, svarte gradientkoder du kan kopiere, løsningen på bånd som plager mørke overganger, og regler for tekst. For mørke bakgrunner generelt, se mørke gradientbakgrunner. For det grunnleggende om hvordan overganger fungerer, start med hva en gradient er.

Hvorfor ren svart ser flat ut

#000000 har ingen nyanse og ingen steder mørkere å gå, så et design bygget på det har ingen skygger, bare fravær. Ingenting i virkeligheten er så svart: et mørkt rom, en nattehimmel og svart stoff bærer alle et spor av farge og en langsom endring i lysstyrke. Øyet leser den endringen som dybde.

Det finnes en praktisk grunn også. På OLED-skjermer slås rene svarte piksler helt av, og på enkelte mobiler bruker de et øyeblikk på å slå seg på igjen, noe som kan gi en kort utsmøring når mørkt innhold scroller. Å løfte den mørkeste verdien noen trinn over null unngår det og koster deg ingenting visuelt.

Tonede svartfarger: fargene inni en god svart

En tonet svart er en veldig mørk farge med litt metning igjen i seg. I HSL-termer holder du lysheten mellom omtrent 4 % og 9 % og lar metningen ligge et sted mellom 15 % og 40 %. Nyansen bestemmer stemningen: blåsvarte føles tekniske og kjølige, varme brune føles som skinn og kaffe, og aubergine føles som kveld.

Jobber du i OKLCH, er tallene enklere å resonnere om: lyshet rundt 15 % til 20 % og kromaverdi mellom 0,005 og 0,025. Blekk over er oklch(15.2% 0.011 285), en svart med en hvisking av blått. Guiden vår om fargekoder forklarer hvordan du leser disse verdiene.

Svarte gradientkoder du kan kopiere

Hver av disse holder den mørkeste verdien over ren svart og endrer lysheten forsiktig. Bruk dem som hele bakgrunner, hero-seksjoner eller lysbildeunderlag, og velg den hvis temperatur matcher aksentfargen din.

Retning betyr mer på svart enn noe annet sted, fordi det er så lite annet som skjer. Lys som faller fra toppen, leses som naturlig og rolig. Lys som stiger fra et hjørne nederst, leses som en glød, som en skjerm eller en flamme, og trekker blikket til det hjørnet. For mer om dette, se gradientvinkler.

Gradienter fra svart til farge

De mest slående svarte gradientene lar én farge komme fram av mørket. To regler holder dem rike. For det første gir du fargen ikke mer enn en tredjedel av feltet, så svart forblir hovedtonen. For det andre mørkner du fargen mot svart langs sin egen nyanse i stedet for å tone gjennom grått: en fiolett bør passere gjennom dyp indigo på vei ned, ikke gjennom kull. En grå midte er den vanligste årsaken til grumsete gradienter.

Moderne nettlesere kan gjøre noe av dette for deg. Å interpolere i OKLCH holder fargens kroma i live gjennom de mørkere stoppene, og en enkel reservelinje dekker eldre nettlesere.

.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}

Slik stopper du bånd i mørke gradienter

Skjermer viser som regel 256 nivåer per fargekanal. En gradient fra #0a0a0a til #1a1a1a har bare 16 av disse nivåene å jobbe med, så over en hero som er 1920 piksler bred, blir hvert trinn omtrent 120 piksler bredt, og du ser striper. Dette er gradientbånd, og mørke gradienter lider mest av det.

Korn er den mest pålitelige løsningen, fordi det bryter den harde kanten på hvert trinn opp til tekstur øyet blander sammen igjen. Noen få prosent dekkevne er nok. Kornete gradienter tar for seg uttrykket i dybden. Dette er den minimale CSS-en.

.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Tekst og farge på en svart gradient

Svarte underlag får nesten all lys tekst til å bestå kontrasttesten, så risikoen flytter seg til sekundærteksten din. Mellomgrå som ser fine ut på en lys skjerm, kan falle under minimumet på 4,5:1 for brødtekst. Ren hvit har også en pris: noen lesere synes skarp hvit på nesten-svart er hard over lengre avsnitt, så en varm off-white er vennligere og leses fortsatt skarpt. Se fargekontrast for de fulle reglene.

Hvor svarte gradienter fungerer best

• Lanseringer og avsløringer, der et mørkt felt får ett produkt eller én overskrift til å føles belyst
• Luksus, parfyme og smykker, kombinert med en metallaksent som #c9a96e
• Musikk, uteliv og arrangementer, med én mettet farge som stiger opp fra et hjørne
• Tekniske produkter og utviklerprodukter, der blåsvarte føles presise
• Grensesnitt i mørk modus, med to eller tre tonede svartfarger som overflatelag
• Fotoporteføljer, der en stille svart ramme lar bildene bære fargen

I Gradiently lar Markedet deg søke i Marks med fargeord som «nesten svart» eller «svart og gull», og hver Mark bærer allerede korn og lys, så problemene med bånd og flathet over er håndtert før du begynner.