Sorte gradienter: sådan designer du med næsten sort

En sort gradient er en overgang mellem næsten-sorte toner, eller fra sort over i en farve, så et mørkt design får dybde og lys i stedet for en flad tomhed. De gradienter, der ser dyre ud, bruger næsten aldrig ren #000000. De starter i en nuanceret sort, for eksempel #0b0b10, lader lysstyrken ændre sig med blot nogle få procent og tilføjer én enkelt kilde til farve eller lys et sted i feltet.

Her får du nuancerede sorte toner, kopierbare koder til sorte gradienter, løsningen på de striber, der plager mørke overgange, og regler for tekst. Vil du vide mere om mørke baggrunde generelt, så se mørke gradientbaggrunde. Og for at forstå, hvordan overgange virker, så begynd med hvad en gradient er.

Hvorfor ren sort ser flad ud

#000000 har ingen farvetone og ingen mørkere sted at gå hen, så et design bygget på den har ingen skygger, kun fravær. Intet i virkeligheden er så sort: et mørkt rum, en nattehimmel og sort stof bærer alle et spor af farve og en langsom ændring i lysstyrke. Dit øje læser den ændring som dybde.

Der er også en praktisk grund. På OLED-skærme slukker rene sorte pixels helt, og på nogle telefoner tager det et øjeblik at tænde dem igen, hvilket kan give en kort udtværing, når mørkt indhold ruller. Løfter du din mørkeste værdi et par trin over nul, undgår du det, og det koster dig ingenting visuelt.

Nuancerede sorte toner: farverne inde i en god sort

En nuanceret sort er en meget mørk farve med lidt mætning tilbage. I HSL bør lysstyrken ligge mellem cirka 4 % og 9 %, mens mætningen kan ligge et sted mellem 15 % og 40 %. Farvetonen bestemmer stemningen: blåsort føles teknisk og kølig, varme brune toner minder om læder og kaffe, og aubergine føles som aften.

Arbejder du i OKLCH, er tallene lettere at ræsonnere over: lysstyrke omkring 15 % til 20 % og kromatik mellem 0,005 og 0,025. Blæk ovenfor er oklch(15.2% 0.011 285), en sort med et let strejf af blå. Vores guide til farvekoder forklarer, hvordan du læser værdierne.

Koder til sorte gradienter, du kan kopiere

Hver af dem holder sin mørkeste værdi over ren sort og ændrer lysstyrken forsigtigt. Brug dem som hele baggrunde, hero-sektioner eller slidebaggrunde, og vælg den, hvis temperatur passer til din accentfarve.

Retning betyder mere på sort end noget andet sted, fordi der ellers sker så lidt. Lys, der falder oppefra, læses som naturligt og roligt. Lys, der stiger op fra et hjørne forneden, læses som et skær, som en skærm eller en flamme, og trækker øjet mod hjørnet. Læs mere i gradientvinkler.

Gradienter fra sort til farve

De mest slående sorte gradienter lader én farve træde frem af mørket. To regler holder dem rige. For det første: giv farven højst en tredjedel af feltet, så sort forbliver hovedtonen. For det andet: mørkn farven mod sort langs sin egen farvetone i stedet for at lade den blegne gennem gråt. En violet skal passere dyb indigo på vej ned, ikke trækul. En grå midte er den hyppigste årsag til mudrede gradienter.

Moderne browsere kan klare noget af det for dig. Interpolerer du i OKLCH, bevarer farvens kromatik livet gennem de mørkere stop, og en almindelig reservelinje dækker ældre browsere.

.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%);
}

Sådan stopper du striber i mørke gradienter

Skærme viser som regel 256 niveauer pr. farvekanal. En gradient fra #0a0a0a til #1a1a1a har kun 16 af dem at arbejde med, så over en hero på 1920 pixel i bredden er hvert trin cirka 120 pixel bredt, og du ser striber. Det kaldes gradientstriber, og mørke gradienter rammes hårdest.

Korn er den mest pålidelige løsning, fordi det bryder hvert trins skarpe kant op til tekstur, som øjet blander sammen igen. Nogle få procents dækning er nok. Kornede gradienter går i dybden med udtrykket. Her er den minimale CSS.

.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 farve på en sort gradient

Sorte flader lader næsten enhver lys tekst bestå kontrasttesten, så risikoen flytter sig til din sekundære tekst. Mellemgrå toner, der ser fine ud på en lys skærm, kan falde under minimummet på 4,5:1 for brødtekst. Ren hvid har også en pris: nogle læsere oplever skarp hvid på næsten sort som hård i lange afsnit, så en varm off-white er mildere og læses stadig knivskarpt. Se farvekontrast for de fulde regler.

Hvor sorte gradienter virker bedst

• Lanceringer og afsløringer, hvor et mørkt felt får ét produkt eller én overskrift til at føles oplyst
• Luksus, parfume og smykker, parret med en metalaccent som #c9a96e
• Musik, natteliv og events, med én mættet farve, der stiger op fra et hjørne
• Tech- og udviklerprodukter, hvor blåsort føles præcis
• Grænseflader i mørk tilstand, med to eller tre nuancerede sorte toner som overfladelag
• Fotografiporteføljer, hvor en stille sort ramme lader billederne bære farven

I Gradiently lader Markedet dig søge Marks på farveord som »næsten sort« eller »sort og guld«, og hver Mark har allerede korn og lys, så problemerne med striber og fladhed ovenfor er løst, før du går i gang.