Harmaa liukuväri: neutraalit värikoodit ilman tylsyyttä

Harmaa liukuväri lakkaa olemasta tylsä heti, kun harmaita sävytetään. Puhtaat neutraalit harmaat, joissa punaista, vihreää ja sinistä on yhtä paljon, tuntuvat litteiltä ja digitaalisilta. Siirrä niitä hieman viileään sinisen suuntaan, niin saat sumua, liuskekiveä ja terästä. Siirrä lämpimään ruskean suuntaan, niin saat kiveä, betonia ja tinaa. Lisää tietystä suunnasta tuleva valo ja yksi korosteväri, niin harmaasta tulee rauhallinen, moderni ja hiljaisen itsevarma. Koodit seuraavat alla.

Valitse lämmin tai viileä harmaa

Viileät harmaat tuntuvat teknisiltä, puhtailta ja täsmällisiltä. Lämpimät harmaat tuntuvat arkkitehtonisilta, luonnollisilta ja pehmeiltä. Molemmat toimivat kauniisti erikseen. Samassa liukuvärissä ne riitelevät, ja tulos näyttää tahratulta. Katso alla olevia värinäytteitä pareittain: ylärivi taittaa siniseen, alarivi ruskeaan. Ero on pieni mutta selvä, kun sen kerran huomaa.

Viileän ja lämpimän harmaan liukuvärikoodit

Sumu ja liuskekivi ovat viileä pari: sumu vaaleisiin ilmaviin asetteluihin ja liuskekivi vakaviin tummiin. Myrsky lisää valaistun pilven, joka antaa tummalle harmaalle syvyyttä. Kivi ja betoni ovat lämmin pari lähempänä rakennusmateriaaleja. Grafiitti on lähes musta, jota voi käyttää puhtaan mustan sijaan.

Jos haluat vielä tummempaa, mustan liukuvärin koodit jatkavat grafiitista. Yhden sävyn useisiin vaaleusasteisiin perustuvista designeista kertoo yksivärinen liukuväri.

Hopea, teräs ja muut metallisenharmaat liukuvärit

Metalli ei ole väri vaan heijastus. Hopeinen liukuväri toimii tummempien väripisteiden väliin puristetun terävän kirkkaan kaistan ansiosta, kuten valo kaarevalla pinnalla. Asemetallinharmaa käyttää samaa temppua tummempana, ja harjattu teräs lisää ohuet rinnakkaisviivat. Nämä ovat voimakkaita: käytä niitä merkissä, otsikkolaatassa tai yhdessä paneelissa koko sivun sijaan.

Harjattu teräs näyttää parhaalta, kun viivat ovat pehmeän valaistun liukuvärin päällä, eivät yksinään. Kaksi kerrosta riittää:

.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}

Harmaa ja yksi väri

Harva tausta nostaa yhden vahvan värin esiin yhtä hyvin kuin harmaa. Koroste näyttää neutraalia vasten kirkkaammalta kuin muita värejä vasten, joten pieni määrä riittää: yksi sana, painike tai viiva. Valitse koroste toimialan ja tunnelman mukaan.

Näin rakennettuja kokonaisia väriyhdistelmiä löydät teknologian väripaleteista ja neutraaleista väripaleteista.

Harkitulta näyttävä harmaa

Porrastuminen ansaitsee oman varoituksensa. Harmaissa ei ole sävyä viemässä silmän huomiota, joten sileän liukuvärin jokainen askel näkyy, erityisesti suurilla näytöillä ja pakkauksen jälkeen. Kevyt kohinakerros peittää sen. CSS-kohinatekstuuri tarjoaa koodin, ja liukuvärin porrastuminen selittää syyn.

Harmaat liukuvärit verkkosivuilla ja tummassa tilassa

Verkossa harmaat liukuvärit toimivat parhaiten huomaamattomasti. Ominaisuusosion sumuliukuväri erottaa sen valkoisesta sivusta ilman kovaa reunaa. Tummassa tilassa kortin yläosaa hieman vaalentava grafiittiliukuväri antaa syvyyttä, kun tasainen harmaa näyttäisi aukolta. Pidä väripisteiden ero pienenä, muutamassa vaaleuden prosentissa, jotta liukuväri näyttää valolta eikä koristeelta. Tumman tilan suunnittelu käsittelee tummien käyttöliittymien laajemmat säännöt pintaväreistä kontrastiin.

Harmaat liukuväritaustat käytännössä

Arkkitehdit, insinööritoimistot ja ohjelmistoyritykset käyttävät harmaata, koska se antaa työn puhua. Liuskekiviliukuväri valkoisella tekstillä ja yhdellä sinisellä korosteella tekee projekti-ilmoituksesta täsmällisen. Lämmin kiviliukuväri grafiittitekstillä antaa portfolion kannelle tunnun. Arkkitehtitoimiston brändäys näyttää, mihin hillitty paletti pystyy.

Hienovaraisissa taustoissa designjärjestelmästä on hyötyä. Gradientlyssä harmaalla Markilla on oma rakeisuus, joka pitää porrastumisen kurissa. Automaattinen muste valitsee vaalean tai tumman tekstin riveittäin harmaan muuttuessa kuvan poikki.