Hopealiukuväri: metalliset koodit ja niiden valaistus

Hopealiukuväri näyttää metallilta, kun siinä on kolme tavalliselta harmaalta puuttuvaa asiaa: hento viileä sävy, suuri ero tummimman ja vaaleimman väripisteen välillä sekä kapea valo leveän sijaan. Luotettava lähtökoodi on linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Alla on kuusi kopioitavaa hopeaa, niiden valaistusperiaatteet sekä CSS hopeatekstille, painikkeille ja harjatulle metallille.

Hopealiukuvärien koodit

Näin valaiset hopealiukuvärin

Hopea näyttää muiden kiillotettujen metallien tavoin enimmäkseen heijastunutta valoa. Liukuvärisi on maalattu heijastus. Mieti siis valon tulosuuntaa ja sitä, kuinka terävästi pinta poimii sen.

1. 1

   Sävytä harmaat hieman viileiksi

   Lisää jokaiseen väripisteeseen ripaus sinistä, juuri sen verran, ettei harmaa näytä pölyltä tai sementiltä.

2. 2

   Mene tummemmaksi kuin tuntuu sopivalta

   Metalli tarvitsee syvän varjon. Tummimman pisteen tulee olla asemetallin sävyinen, ei keskiharmaa.

3. 3

   Pidä valo kapeana

   Lähes valkoinen kaista pienellä osalla liukuväriä näyttää kiillolta. Leveä vaalea alue näyttää vaaleanharmaalta pinnalta.

4. 4

   Valitse kiillotettu tai satiininen

   Tuo pisteet lähelle toisiaan kiillotetun hopean teräviä heijastuksia varten. Levitä niitä pehmeän satiinipinnan saamiseksi.

Kun viet kontrastin äärimmilleen ja lisäät keskelle kovan horisonttiviivan, hopea muuttuu peilikromiksi. Kromitekstitehoste käsittelee tätä versiota. Samaa logiikkaa käyttävästä lämpimästä metallista kertoo kultaliukuväri.

Hopea ja tavallinen harmaa

Jos haluat metallin sijaan rauhallisen neutraalin pinnan, kyse on eri tehtävästä. Harmaa liukuväri ja yksivärinen liukuväri käsittelevät pehmeitä sävytaustoja.

Minkä hopeapinnan valitset

Jokainen pinta viestii hieman eri asiaa. Valitse tehtävän mukaan, älä tottumuksesta. Brändi voi hyvin käyttää kahta: esimerkiksi kiillotettua hopeaa logossa ja harjattua pakkauksen paneeleissa, kunhan sävy pysyy samana.

Hopeateksti ja painikkeet CSS:llä

.silver-text {
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #a7afb9; /* fallback */
  background: linear-gradient(
    135deg,
    #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%,
    #a7afb9 58%, #4b525c 82%, #9aa2ac 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.silver-button {
  padding: 0.85rem 1.6rem;
  border: 1px solid #4b525c;
  border-radius: 999px;
  color: #1c2026;
  font-weight: 600;
  background: linear-gradient(180deg, #f7f9fb 0%, #c9cfd6 48%, #a7afb9 52%, #d9dee3 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgb(0 0 0 / 0.25);
  cursor: pointer;
}

.silver-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d6dbe0 48%, #b3bac3 52%, #e3e7eb 100%);
}

.brushed {
  background:
    repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px);
}

Painikkeen keskellä on porras 48%:sta 52%:iin. Se näyttää kaarevan pinnan heijastamalta horisontilta. Liukuväripainikkeen CSS tarjoaa lisää malleja, ja liukuväriteksti selittää tekstin leikkauksen ja selaintuen.

Suunnittelu hopealla

Hopea tuntuu modernilta, viileältä ja täsmälliseltä, kulta lämpimältä ja perinteiseltä. Se sopii teknologialanseerauksiin, kelloihin ja koruihin, vuosipäiviin (hopea on perinteinen 25. vuosipäivä), talvikampanjoihin ja futuristisiin aiheisiin. Kullan tavoin se näyttää arvokkaimmalta pieninä annoksina tummalla pohjalla: monogrammina, ohuena viivana tai yhtenä otsikkona.

Hopea sopii myös jäisiin sinisiin ja syvään tummansiniseen talvipaletissa sekä mustaan ja valkoiseen jyrkässä toimituksellisessa ilmeessä. Luksuspaletit sisältää viileisiin metalleihin perustuvia yhdistelmiä. Gradientlyn Studiossa viileä metallinen Mark piirtyy elävänä sanojesi taakse kaikissa kokoluokissa. Automaattinen muste valitsee riville vaalean tai tumman tekstin Markin paletista, joten hopeapinnat pysyvät luettavina tarkistamatta jokaista muotoa erikseen.