Mörka färgpaletter: dämpade koder som ändå går att läsa

En mörk färgpalett som ändå går att läsa har tre delar: en nästan svart botten med en antydan av färg i, en mjuk off-white för text, och en eller två accenter som är ljusare och lugnare än du skulle använda på vitt. Rent svart med mättad neon ser hårt ut och tröttar ögonen. Färgade mörka toner med milda högdagrar ser avsiktliga och dyra ut. De sex paletterna nedan följer det receptet, med hexkoder du kan kopiera och kontrastkvoter som redan är kontrollerade.

Sex mörka färgpaletter med hexkoder

Varje palett har samma fem roller, från vänster till höger: botten (sidan), yta (kort och paneler, ett steg ljusare), djup (en rik mellanfärg för former och stora ytor), accent (för länkar, knappar och högdagrar) och text.

Midnattsbläck

Skogsnatt

Oxblod och koppar

Aubergine

Kol och glöd

Djup teal

De djupa färgerna i varje palett är till för ytor, inte ord: marinblått på midnattsbotten är till exempel bara ungefär 1,7:1. Använd dem till former, illustrationer och bakgrunder bakom text i de ljusare färgerna.

Samma paletter som mörka gradienter

Mörka paletter vaknar till liv när den djupa färgen glöder ut ur botten som ljus i ett dunkelt rum. De här använder bara koderna ovan, så de matchar de platta paletterna exakt. Fler tekniker finns i mörka gradientbakgrunder och dämpade gradienter.

Regler för mörka paletter som går att läsa

Varför inte rent svart? Svart med rent vit text är den högsta kontrast en skärm kan visa, 21:1, och på ljusstarka skärmar kan det kännas bländande, särskilt över långa partier. Ett färgat nästan svart på runt 15:1 ligger fortfarande långt över varje tillgänglighetströskel och är mycket lättare att läsa länge. Det ger också paletten en temperatur, vilket rent svart aldrig har.

Varför lugnare accenter? Ett mättat blått eller rött som ser bra ut på vitt verkar glöda och vingla i kanterna på svart. Höj dess ljushet och sänk dess mättnad något, som med lavendelblått och salvia ovan, så sitter den stilla. Kontrollera varje accent du använder för text med en kontrastkontroll.

Så gör du en mörk palett av din varumärkesfärg

Du behöver inte låna en av paletterna ovan. Vilken varumärkesfärg som helst kan bli en mörk palett genom att behålla dess färgton och bara ändra ljushet och mättnad. Det fungerar bäst i ett format som skiljer de två åt, som HSL. Här blir en korallfärgad varumärkesfärg, #e0525d, en hel mörk uppsättning.

1. 1

   Botten: samma färgton, nästan inget ljus

   Behåll färgtonen, sänk mättnaden till ungefär 30 % och ljusheten till ungefär 7 %: #170c0d. Den läses som svart men känns varm.

2. 2

   Yta: ett steg upp

   Höj ljusheten till ungefär 12 % och sänk mättnaden en aning: #261718. Kort och paneler ligger här.

3. 3

   Djup: en rik mellanton för ytor

   Ljushet kring 28 % ger #68272d, ett dämpat vin för former och illustrationer, aldrig för text.

4. 4

   Accent: ljusare och mjukare än varumärket

   Höj korallen till ungefär 72 % ljushet: #ea868e når 7,6:1 på botten, medan den ursprungliga korallen klarar 5,1:1 och ser hårdare ut.

5. 5

   Text: en off-white med en antydan av färgtonen

   #f2e9e9 ger 16:1 på botten och matchar tyst allt annat.

Använd en mörk palett i CSS

Namnge färger efter roll så att samma komponenter fungerar i ljusa och mörka teman. Mönstret nedan definierar Midnattsbläck som det mörka temat och låter systeminställningen välja. Design för mörkt läge går igenom de bredare besluten, som bilder, ramar och diagram.

:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
a { color: var(--accent); }

Mörka paletter för sociala inlägg

I ett flöde sticker ett mörkt inlägg ut bland ljusa foton, men bara om orden går att läsa i telefonstorlek. Håll typen stor, håll den ljusaste delen av bakgrunden borta från rubriken och ge orden bildens lugnaste område.

Här hjälper en Gradiently-Mark: den flyttar sitt lugnaste, mest kontrastrika område bakom texten och Auto-bläck väljer ljus eller mörk text för varje rad utifrån Markens egen palett, så en dämpad bakgrund sväljer aldrig rubriken. För mörka looker med mer rik, premiumkaraktär, se lyxiga färgpaletter och dark academia-estetiken.