# Hopealiukuväri: metalliset koodit ja niiden valaistus

[Canonical HTML page](https://gradiently.design/fi/guide/silver-gradient)

Hopean ja tavallisen harmaan ero on valo. Tässä kuusi kopioitavaa hopealiukuväriä, neljä metallisen ilmeen sääntöä sekä CSS tekstille, painikkeille ja harjatuille pinnoille.

## The short version

- Hopealiukuväri näyttää metallilta eikä harmaalta, kun siinä yhdistyvät hento viileä sävy, laaja tumman ja vaalean vaihtelu ja kapea kirkas valo.
- Kiillotetussa hopeassa on kovat siirtymät ja vahva kontrasti, satiinihopeassa pehmeät siirtymät ja harjatussa hopeassa hienoja rinnakkaisia viivoja.
- Täysin neutraali harmaa näyttää helposti lattealta ja pölyiseltä. Uskottavimmat hopeat taittavat hieman siniseen tai platinan ja tinan kohdalla lämpimään.
- Pitkät hienovaraiset harmaat liukuvärit raidoittuvat helposti, mutta hieno rakeisuus peittää sitä.
- Hopealiukuvärit toimivat parhaiten tekstissä, reunoissa, painikkeissa ja pienissä muodoissa tummaa pohjaa vasten.

**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

- Kiillotettu hopea: `linear-gradient(135deg, #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%, #a7afb9 58%, #4b525c 82%, #9aa2ac 100%)`
- Satiinihopea: `linear-gradient(160deg, #8d939b 0%, #c3c8ce 35%, #e4e7ea 55%, #b5bbc2 75%, #8a9098 100%)`
- Harjattu hopea: `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`
- Viileä platina: `linear-gradient(135deg, #6f7680 0%, #d6dce4 30%, #fbfdff 45%, #b9c3cf 60%, #56606c 100%)`
- Lämmin tina: `linear-gradient(135deg, #4f4c48 0%, #a39f99 30%, #e3e0da 46%, #9b968f 62%, #4a4743 100%)`
- Hopeavalo mustalla: `radial-gradient(ellipse at 30% 20%, #e9edf1 0%, #8f97a1 22%, #2b3038 52%, #0c0e11 85%)`

Kuusi hopeaa: neljä tekstille, reunoille ja muodoille, yksi harjattu pinta ja yksi tausta. Jokaisessa on tumma väripiste ja lähes valkoinen valo.

- Varjoteräs: #4b525c
- Asemetalli: #5f6670
- Hopea: #a7afb9
- Vaalea hopea: #c9cfd6
- Valokohta: #f7f9fb

Kiillotetun hopean värikoodit. Jokainen taittaa hieman siniseen ja näyttää siksi metallilta eikä betonilta.

## 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. **Sävytä harmaat hieman viileiksi** Lisää jokaiseen väripisteeseen ripaus sinistä, juuri sen verran, ettei harmaa näytä pölyltä tai sementiltä.
2. **Mene tummemmaksi kuin tuntuu sopivalta** Metalli tarvitsee syvän varjon. Tummimman pisteen tulee olla asemetallin sävyinen, ei keskiharmaa.
3. **Pidä valo kapeana** Lähes valkoinen kaista pienellä osalla liukuväriä näyttää kiillolta. Leveä vaalea alue näyttää vaaleanharmaalta pinnalta.
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](https://gradiently.design/fi/guide/chrome-effect) käsittelee tätä versiota. Samaa logiikkaa käyttävästä lämpimästä metallista kertoo [kultaliukuväri](https://gradiently.design/fi/guide/gold-gradient-design).

## Hopea ja tavallinen harmaa

### Näyttää harmaalta

- Täysin neutraalit harmaat
- Kaksi pistettä vaaleanharmaasta keskiharmaaseen
- Vain tasaisia, lempeitä siirtymiä
- Leveä vaalea alue ilman selkeää valoa
- Suuret tasaiset hopeapinnat valkoisella sivulla

### Näyttää hopealta

- Harmaat hennolla viileällä tai lämpimällä sävyllä
- Viisi tai kuusi pistettä asemetallista lähes valkoiseen
- Yksi terävämpi heijastus jossakin
- Kapea kirkas valo sivussa keskeltä
- Hopeiset yksityiskohdat tummalla pohjalla

Jos haluat metallin sijaan rauhallisen neutraalin pinnan, kyse on eri tehtävästä. [Harmaa liukuväri](https://gradiently.design/fi/guide/grey-gradient) ja [yksivärinen liukuväri](https://gradiently.design/fi/guide/monochrome-gradient) 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.

| Pinta | Ulkonäkö | Käyttö |
| --- | --- | --- |
| Kiillotettu | Terävät heijastukset, vahva kontrasti ja kirkas kapea valo | Logot, otsikkoteksti, palkintografiikat |
| Satiininen | Pehmeät siirtymät, lempeä hohde ja pieni kontrasti | Suuret pinnat, pakkaukset, rauhalliset taustat |
| Harjattu | Hienoja rinnakkaisia viivoja pehmeän hohteen alla | Paneelit, tuotesivut, tekniset brändit |
| Platina | Viileä, kirkas, lähes valkoinen valo | Premium-tasot, vuosipäivät, korut |
| Tina | Tummempi, lämpimämpi, pehmeämpi | Perinteet, käsityö, miestenvaatteet |

Viisi hopeapintaa ja niiden käyttöpaikat. Kaikki perustuvat samoihin valaistussääntöihin. Vain kontrasti, sävy ja väripisteiden välimatkat muuttuvat.

## Hopeateksti ja painikkeet CSS:llä

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

Hopeinen otsikkoteksti, kapselipainike jaetulla heijastuksella ja harjattu metallipaneeli. Painikkeen tumma teksti pitää tunnisteen luettavana.

Painikkeen keskellä on porras 48%:sta 52%:iin. Se näyttää kaarevan pinnan heijastamalta horisontilta. [Liukuväripainikkeen CSS](https://gradiently.design/fi/guide/css-gradient-button) tarjoaa lisää malleja, ja [liukuväriteksti](https://gradiently.design/fi/guide/css-gradient-text) selittää tekstin leikkauksen ja selaintuen.

> **Harmaat raidoittuvat helposti** Pitkissä hienovaraisissa harmaissa liukuväreissä raidat näkyvät selvimmin, etenkin alustan pakattua kuvan. Lisää hieno rakeisuus ja vie PNG täysikokoisena. [Liukuvärin raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) selittää syyn.

## 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.

Pystysuuntainen hopeajuhlakutsu viileällä metallivalolla ja sanoilla Kaksikymmentäviisi vuotta

Vuosipäiväkutsu, jossa viileä metallivalo kantaa teemaa ja sanat pysyvät rauhallisina.

Pystysuuntainen teräskellon tuotejulkaisu tummalla viileällä taustalla

Kellon tuotejulkaisu: tumma viileä pinta ja hopea valona, ei tasaisena harmaana täyttönä.

Hopea sopii myös jäisiin sinisiin ja syvään tummansiniseen talvipaletissa sekä mustaan ja valkoiseen jyrkässä toimituksellisessa ilmeessä. [Luksuspaletit](https://gradiently.design/fi/guide/luxury-color-palettes) 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.

## FAQ

### Mikä on hyvä hopealiukuvärin koodi?

Kokeile `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Se kulkee asemetallista vaalean hopean kautta lähes valkoiseen valoon ja takaisin.

### Mitkä heksakoodit muodostavat metallisen hopean?

Esimerkiksi #4b525c, #5f6670, #a7afb9, #c9cfd6 ja #f7f9fb. Jokainen taittaa hieman siniseen, joten tulos ei näytä tavalliselta harmaalta.

### Miten teen harjatun metallin CSS:llä?

Käytä toistuvaa lineaarista liukuväriä lähekkäisillä harmailla ja pienillä väripisteillä pikselin tai kahden välein, kuten `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`.

### Miksi hopealiukuvärini näyttää harmaalta?

Siitä puuttuu todennäköisesti kontrastia ja valokohta. Lisää tumma asemetallipiste, kapea lähes valkoinen kaista ja hento viileä sävy jokaiseen pisteeseen.

### Mitä eroa hopea- ja platinaliukuväreillä on?

Suunnittelussa platina on yleensä hieman viileämpi ja kirkkaampi hopea valkoisemmalla valolla, kun taas tina on tummempi, lämpimämpi hopeanharmaa.

### Mikä taustaväri saa hopean näyttämään parhaalta?

Tumma pohja, kuten musta, hiilenharmaa, syvä tummansininen tai keskiyönsininen. Valkoisella tai vaaleanharmaalla hopea menettää valokohtansa ja näyttää helposti lattealta ja haalistuneelta.