Mustat liukuvärit: suunnittelu lähes mustalla

Musta liukuväri on häivytys, joka liikkuu lähes mustien sävyjen välillä tai mustasta väriin, jolloin tummassa suunnitelmassa on syvyyttä ja valoa tasaisen tyhjiön sijaan. Kalliilta näyttävät eivät melkein koskaan käytä puhdasta #000000:ta. Ne alkavat sävytetystä mustasta, esimerkiksi #0b0b10:sta, antavat vaaleuden muuttua vain muutaman prosentin ja lisäävät kentän johonkin yhden väri- tai valolähteen.

Tämä opas antaa sinulle sävytettyjä mustia, kopioitavia mustan liukuvärin koodeja, keinon tummia häivytyksiä vaivaavaan juovittumiseen ja säännöt tekstille. Yleisemmin tummista taustoista kerrotaan oppaassa tummat liukuväritaustat, ja häivytysten perusteet löydät oppaasta mikä liukuväri on.

Miksi puhdas musta näyttää latteelta

#000000:ssa ei ole sävyä eikä mihinkään tummempaan pääse, joten sen varaan rakennetussa suunnitelmassa ei ole varjoja vaan pelkkä puute. Mikään oikeassa elämässä ei ole niin mustaa: pimeässä huoneessa, yötaivaassa ja mustassa kankaassa on kaikissa häivähdys väriä ja hidas kirkkauden muutos. Silmä tulkitsee muutoksen syvyydeksi.

Syy on myös käytännöllinen. OLED-näytöillä puhtaan mustat pikselit sammuvat kokonaan, ja joillakin puhelimilla niiden uudelleen syttyminen kestää hetken, mikä voi jättää lyhyen vanan tumman sisällön vieriessä. Kun nostat tummimman arvosi muutaman askeleen nollan yläpuolelle, vältät tämän ilman että se maksaa mitään ulkonäössä.

Sävytetyt mustat: hyvän mustan sisällä olevat värit

Sävytetty musta on hyvin tumma väri, johon on jäänyt vähän kylläisyyttä. HSL-arvoissa pidä vaaleus noin 4 ja 9 prosentin välillä ja anna kylläisyyden olla mitä tahansa 15 ja 40 prosentin väliltä. Sävy ratkaisee tunnelman: sinimustat tuntuvat teknisiltä ja viileiltä, lämpimät ruskeat nahalta ja kahvilta ja munakoiso illalta.

Jos työskentelet OKLCH:ssa, luvuista on helpompi päätellä: vaaleus noin 15 ja 20 prosentin välillä ja kroma 0,005 ja 0,025 välillä. Yllä oleva Muste on oklch(15.2% 0.011 285), musta, jossa on sinen kuiskaus. Värikoodien opas selittää, miten nämä arvot luetaan.

Mustan liukuvärin koodeja kopioitavaksi

Jokaisen tummin arvo pysyy puhtaan mustan yläpuolella ja vaaleus muuttuu lempeästi. Käytä niitä kokonaisina taustoina, hero-osioina tai diojen pohjina ja valitse se, jonka lämpötila sopii korostusväriisi.

Suunnalla on mustalla enemmän merkitystä kuin missään muualla, koska muuta ei tapahdu juuri mitään. Ylhäältä tuleva valo näyttää luonnolliselta ja rauhalliselta. Alakulmasta nouseva valo näyttää hehkulta, kuin näytöltä tai liekiltä, ja vetää katseen siihen kulmaan. Lisää aiheesta oppaassa liukuvärin kulmat.

Mustasta väriin -liukuvärit

Vaikuttavimmat mustat liukuvärit antavat yhden värin nousta pimeästä. Kaksi sääntöä pitää ne rikkaina. Ensiksi anna värille korkeintaan kolmannes kentästä, jotta musta pysyy pääsävelenä. Toiseksi tummenna väriä kohti mustaa sen oman sävyn mukaan, älä häivyttämällä harmaan kautta: violetin pitää kulkea syvän indigon kautta alaspäin, ei hiilenharmaan. Harmaa keskikohta on yleisin syy mutaisiin liukuväreihin.

Nykyaikaiset selaimet osaavat tehdä osan tästä puolestasi. Interpolointi OKLCH:ssa pitää värin kroman elossa tummempien pysäytyspisteiden läpi, ja tavallinen varariville pitää vanhemmat selaimet mukana.

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

Näin estät juovittumisen tummissa liukuväreissä

Näytöt näyttävät yleensä 256 tasoa värikanavaa kohden. Liukuvärillä #0a0a0a:sta #1a1a1a:han on käytössä vain 16 näistä tasoista, joten 1920 pikselin levyisessä hero-osiossa jokainen askel on noin 120 pikseliä leveä ja näet raidat. Tämä on liukuvärin juovittuminen, ja tummat liukuvärit kärsivät siitä eniten.

Rakeisuus on luotettavin korjaus, koska se rikkoo jokaisen askeleen kovan reunan tekstuuriksi, jonka silmä sulauttaa takaisin yhteen. Muutaman prosentin peittävyys riittää. Rakeiset liukuvärit käsittelee ilmettä syvemmin, ja tässä on minimaalinen 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");
}

Teksti ja väri mustalla liukuvärillä

Mustalla pohjalla lähes mikä tahansa vaalea teksti läpäisee kontrastivaatimuksen, joten riski siirtyy toissijaiseen tekstiisi. Keskiharmaat, jotka näyttävät hyviltä kirkkaalla näytöllä, voivat jäädä leipätekstin 4,5:1 vähimmäisrajan alle. Puhtaalla valkoisellakin on hintansa: joidenkin lukijoiden mielestä kirkas valkoinen lähes mustalla on pitkissä teksteissä karu, joten lämmin murtovalkoinen on ystävällisempi ja silti terävä. Kaikki säännöt löydät oppaasta värikontrasti.

Missä mustat liukuvärit toimivat parhaiten

• Lanseeraukset ja paljastukset, joissa tumma kenttä saa yhden tuotteen tai otsikon näyttämään valaistulta
• Ylellisyys, tuoksut ja korut, yhdistettynä metalliseen korostukseen kuten #c9a96e
• Musiikki, yöelämä ja tapahtumat, yksi kylläinen väri nousemassa kulmasta
• Teknologia- ja kehittäjätuotteet, joissa sinimustat tuntuvat tarkoilta
• Tumman tilan käyttöliittymät, joissa pintakerroksina on kaksi tai kolme sävytettyä mustaa
• Valokuvaportfoliot, joissa hiljainen musta kehys antaa kuvien kantaa värin

Gradientlyssä Markkinat antavat hakea Markeja värisanoilla kuten ”lähes musta” tai ”musta ja kulta”, ja jokaisessa Markissa on jo rakeisuutta ja valoa, joten yllä kuvatut juovittumis- ja latteusongelmat on hoidettu ennen kuin aloitat.