Mørke gradientbaggrunde: dybde uden dysterhed

En god mørk gradientbaggrund er et farvet næsten-sort med én farve, der gløder ud af det, som om et enkelt lys var tændt i et mørkt rum. Farvetonen giver det sorte dybde, den oplyste farve giver øjet et sted at gå hen, og det store mørke område får hvid typografi til at se skarp ud. Uden de tre ting ligner en mørk gradient blot en dæmpet skærm.

Start med et farvet næsten-sort

Rent sort #000000 er en blindgyde: der er intet at blande fra, og enhver farve ved siden af ser klistret på. Et næsten-sort med et strejf af farvetone giver gradienten en familie at høre til. Blåsort føles køligt og teknisk, violetsort føles eksklusivt, grønsort føles naturligt, og varme brune toner føles som læder og træ. Vælg den farvetone, der matcher den farve, du planlægger at oplyse.

Tilføj én oplyst farve

Den oplyste farve er det, der gør mørke til stemning. Placér den skævt, som regel nær en kant eller et hjørne, så den læses som en lyskilde. Hold den i samme familie som farvetonen: violet lys på violetsort, turkis på blåsort. Én farve er næsten altid nok. To kan virke, hvis de er naboer. Mere end det begynder at ligne en natklub, hvilket er fint, hvis du designer til en. Se neongradienter.

Hvorfor nogle mørke gradienter ser dystre ud

Den mest almindelige fejl er at blande den oplyste farve mod gråt på vej mod sort. Hold kromatikken oppe, mens den mørkner: violet skal blive dybere violet, så violetsort, aldrig grå. At blande i OKLCH hjælper. Mudrede gradienter forklarer hvorfor.

Banding: den mørke gradients største risiko

Mørke gradienter spænder over et lille værdiområde, ofte et dusin eller to pr. kanal, og folk er meget følsomme over for små trin mellem mørke toner. En jævn mørk skala hen over en hel skærm er derfor den perfekte opskrift på synlige striber. Tre vaner forebygger det: giv skalaen nok spændvidde, tilføj fint korn, og eksportér uden kraftig komprimering. Detaljerne står i gradientbanding og kornede gradienter.

Tekst på en mørk gradient

Mørke baggrunde er generøse over for typografi, men kun i de mørke områder. Hold ordene væk fra den oplyste farve, hvor kontrasten falder. Brug off-white frem for rent hvidt til lange passager, for rent hvidt på næsten sort kan føles blændende. Og mål: WCAG kræver mindst 4,5:1 til brødtekst og 3:1 til stor tekst, hvilket du kan tjekke med WebAIM’s kontrastværktøj.

Hvor mørke gradientbaggrunde virker bedst

Mørke gradienter passer til alt, der sker om natten, føles eksklusivt eller har brug for, at farve gløder: musik og events, film og spil, teknologilanceringer, parfume og spiritus og porteføljer, hvor arbejdet skal være det lyseste på siden. De hjælper også produktfotografering, fordi en oplyst genstand på en mørk baggrund læses som kostbar.

• Covers og plakater: en mørk baggrund gør én lys titel til helten
• Stories og Reels: mørke helskærmsbilleder føles filmiske på en telefon
• Slides: lys tekst på mørkt er roligere i et dæmpet rum end mørk tekst på hvidt
• Website-heroer: en mørk hero får den første skærm til at føles bevidst. Se baggrunde til website-heroer

De passer dårligere, hvor folk læser længe på papir, eller hvor et brand er bygget på dagslys, friskhed eller leg. Dér gør en bleg baggrund med én blød farve det samme arbejde.

En mørk gradientbaggrund i CSS

.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}

Designer du en hel brugerflade i mørk tilstand frem for én baggrund, så se design til mørk tilstand. Mange Marks på Markedet er bygget på mørke baggrunde, og de gør plads til dine ord automatisk og flytter deres roligste område bag teksten.