Svarta gradienter: så designar du med nästan svart

En svart gradient är en övergång mellan nästan-svarta toner, eller från svart till en färg, så att en mörk design får djup och ljus i stället för en platt tomhet. De som ser exklusiva ut använder nästan aldrig rent #000000. De utgår från ett nyanserat svart, som #0b0b10, låter ljusheten variera med bara några procent och lägger till en enda källa till färg eller ljus någonstans i ytan.

Den här guiden ger dig nyanserade svarta toner, svarta gradientkoder att kopiera, lösningen på de ränder som plågar mörka övergångar och regler för text. För mörka bakgrunder i allmänhet, se mörka gradientbakgrunder, och för grunderna i hur övergångar fungerar, börja med vad en gradient är.

Därför ser rent svart platt ut

#000000 har ingen färgton och ingenstans mörkare att gå, så en design byggd på det har inga skuggor, bara frånvaro. Ingenting i verkligheten är så svart: ett mörkt rum, en natthimmel och svart tyg har alla en antydan till färg och en långsam förändring i ljushet. Ögat läser den förändringen som djup.

Det finns också en praktisk orsak. På OLED-skärmar stängs rent svarta pixlar av helt, och på vissa telefoner tar det en stund att slå på dem igen, vilket kan ge en kort utsmetning när mörkt innehåll rullar. Om du lyfter ditt mörkaste värde några steg över noll slipper du det, och det kostar dig ingenting visuellt.

Nyanserade svarta toner: färgerna inuti ett bra svart

Ett nyanserat svart är en mycket mörk färg med lite mättnad kvar. Håll ljusheten mellan ungefär 4 % och 9 % i HSL och låt mättnaden ligga någonstans mellan 15 % och 40 %. Färgtonen avgör stämningen: blåsvart känns tekniskt och kyligt, varma bruna toner känns som läder och kaffe, och aubergine känns som kväll.

Om du arbetar i OKLCH är siffrorna lättare att resonera kring: ljushet runt 15 till 20 % och kroma mellan 0,005 och 0,025. Bläck ovan är oklch(15.2% 0.011 285), ett svart med en viskning av blått. Vår guide till färgkoder förklarar hur du läser de här värdena.

Svarta gradientkoder att kopiera

Var och en av dessa håller sitt mörkaste värde över rent svart och ändrar ljusheten försiktigt. Använd dem som hela bakgrunder, hero-sektioner eller presentationsunderlag, och välj den vars temperatur passar din accentfärg.

Riktning betyder mer på svart än någon annanstans, eftersom det händer så lite annat. Ljus som faller uppifrån känns naturligt och lugnt. Ljus som stiger från ett nedre hörn känns som en glöd, som en skärm eller en låga, och drar blicken till just det hörnet. Mer om detta finns i gradientvinklar.

Gradienter från svart till färg

De mest slående svarta gradienterna låter en enda färg stiga fram ur mörkret. Två regler håller dem rika. För det första: ge färgen högst en tredjedel av ytan, så att svart förblir huvudtonen. För det andra: mörkna färgen mot svart längs sin egen färgton i stället för att tona genom grått. Violett ska passera djup indigo på vägen ner, inte kolgrått. En grå mitt är den vanligaste orsaken till grumliga gradienter.

Moderna webbläsare kan göra en del av jobbet åt dig. Att interpolera i OKLCH håller färgens kroma vid liv genom de mörkare stoppen, och en enkel reservrad täcker äldre webbläsare.

.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å slipper du ränder i mörka gradienter

Skärmar visar oftast 256 nivåer per färgkanal. En gradient från #0a0a0a till #1a1a1a har bara 16 av dessa nivåer att arbeta med, så över en hero på 1 920 pixlars bredd blir varje steg ungefär 120 pixlar brett, och du ser ränder. Det kallas gradientränder, och mörka gradienter drabbas mest.

Korn är den mest pålitliga lösningen, eftersom det bryter upp varje stegs hårda kant till en textur som ögat blandar ihop igen. Några procents opacitet räcker. Korniga gradienter går på djupet med uttrycket, och det här är den minimala CSS-koden.

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

Text och färg på en svart gradient

På svart underlag klarar nästan all ljus text kontrastkraven, så risken flyttas till din sekundärtext. Mellangrått som ser bra ut på en ljus skärm kan hamna under minimikravet på 4,5:1 för brödtext. Rent vitt har också ett pris: vissa läsare tycker att skarpt vitt på nästan-svart blir hårt i långa stycken, så en varm off-white är vänligare och läses ändå tydligt. Se färgkontrast för alla regler.

Där svarta gradienter fungerar bäst

• Lanseringar och avslöjanden, där ett mörkt fält får en produkt eller rubrik att kännas belyst
• Lyx, parfym och smycken, ihop med en metallaccent som #c9a96e
• Musik, nattliv och evenemang, med en mättad färg som stiger från ett hörn
• Tekniska produkter och utvecklarverktyg, där blåsvart känns exakt
• Gränssnitt i mörkt läge, med två eller tre nyanserade svarta toner som ytlager
• Fotoportföljer, där en stilla svart ram låter bilderna bära färgen

I Gradiently låter Marknaden dig söka bland Marks med färgord som ”nästan svart” eller ”svart och guld”, och varje Mark har redan korn och ljus, så problemen med ränder och platthet ovan är avklarade innan du börjar.