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

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

Harmaa valitaan usein silloin, kun ei haluta valita. Sävyttämällä, valaisemalla ja yhdistämällä yhteen korosteväriin siitä tulee itsevarma tausta.

## The short version

- Harmaa liukuväri näyttää harkitulta, kun harmaissa on kevyt sävy: viileä siniseen tai lämmin ruskeaan päin.
- Lämpimien ja viileiden harmaiden sekoittaminen samaan liukuväriin näyttää likaiselta. Valitse yksi lämpötila ja pysy siinä.
- Metalliset harmaat syntyvät terävästä kirkkaasta kaistasta tummempien väripisteiden välissä, mikä jäljittelee pintaan osuvaa valoa.
- Harmaiden liukuvärien porrastuminen näkyy värikkäitä selvemmin, ja hieno rakeisuuskerros on tavallinen ratkaisu.
- Yksi kylläinen korosteväri harmaata liukuväriä vasten saa koko designin näyttämään tarkoitukselliselta.

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

- Sumu: #f4f6f8
- Viileä usva: #aeb6be
- Liuskekivi: #4a535d
- Myrsky: #22272c
- Liitu: #f3f1ee
- Betoni: #b5b1ab
- Tina: #5f5b56
- Grafiitti: #1c1c1e

Neljä viileää ja neljä lämmintä harmaata. Grafiitti on lähes neutraali, minkä vuoksi se sopii melkein kaiken kanssa.

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

- Sumu: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Liuskekivi: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Myrsky: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Lämmin kivi: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Betoni: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Grafiitti: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Kuusi harmaata, joilla on lämpötila. Myrsky ja grafiitti kantavat valkoista tekstiä; sumu, kivi ja betoni tarvitsevat tummaa.

Jos haluat vielä tummempaa, [mustan liukuvärin](https://gradiently.design/fi/guide/black-gradient) koodit jatkavat grafiitista. Yhden sävyn useisiin vaaleusasteisiin perustuvista designeista kertoo [yksivärinen liukuväri](https://gradiently.design/fi/guide/monochrome-gradient).

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

- Kiillotettu hopea: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Asemetallinharmaa: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Tina: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Harjatun teräksen viivat: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Metalliset harmaat. Mitä kapeampi kirkas kaista, sitä kiiltävämpi metalli; leveäksi levitettynä se muuttuu satiiniseksi.

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

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

Ohuet valkoiset viivat kolmen pikselin välein valaistun hopeasekoituksen päällä. Muuta toisen kerroksen kulmaa siirtääksesi valon kohtaa.

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

| Koroste | Hex | Vaikutelma | Sopii |
| --- | --- | --- | --- |
| Sähkönsininen | `#3b82f6` | Tekninen, luotettava | Ohjelmistot, finanssiteknologia, data |
| Huomio-oranssi | `#f97316` | Teollinen, energinen | Rakentaminen, työkalut, logistiikka |
| Lime | `#a3e635` | Urheilullinen, raikas | Kuntoilu, juoksu, ulkoiluvarusteet |
| Hento roosa | `#f2c6c2` | Pehmeä, muodikas | Muoti, kauneus, elämäntyyli |
| Messinki | `#c9a24a` | Arvokas, klassinen | Arkkitehtuuri, kellot, hotellit |

Käytä viileitä harmaita sinisen ja limen kanssa, lämpimiä oranssin, roosan ja messingin kanssa.

Näin rakennettuja kokonaisia väriyhdistelmiä löydät [teknologian väripaleteista](https://gradiently.design/fi/guide/tech-color-palettes) ja [neutraaleista väripaleteista](https://gradiently.design/fi/guide/neutral-color-palettes).

## Harkitulta näyttävä harmaa

### Näyttää keskeneräiseltä

- Puhtaat neutraalit harmaat ilman sävyä
- Lämpimät ja viileät harmaat samassa sekoituksessa
- Näkyvät kaistat sileällä pinnalla
- Kolme tai neljä korosteväriä
- Keskiharmaa teksti keskiharmaalla taustalla

### Näyttää harkitulta

- Kevyt sininen tai ruskea sävy kauttaaltaan
- Yksi lämpötila alusta loppuun
- Hieno rakeisuus koko liukuvärin päällä
- Yksi koroste säästeliäästi
- Lähes valkoinen tai lähes musta teksti, ei keskiharmaa

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](https://gradiently.design/fi/guide/css-noise-texture) tarjoaa koodin, ja [liukuvärin porrastuminen](https://gradiently.design/fi/guide/gradient-banding) 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](https://gradiently.design/fi/guide/dark-mode-design) 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](https://gradiently.design/fi/guide/architecture-firm-branding) näyttää, mihin hillitty paletti pystyy.

Leveä LinkedIn-kuva viileällä liuskekivenharmaalla liukuvärillä ja valkoisilla sanoilla Rakennettu kestämään

LinkedIn-linkkikuva liuskekivenharmaalla Markilla. Valkoinen teksti tummemmalla puolella; valaistu alue jää vapaaksi sanoista.

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.

## FAQ

### Miten saan harmaan liukuvärin näyttämään vähemmän tylsältä?

Sävytä harmaat hieman viileiksi tai lämpimiksi, valaise liukuväri yhdeltä puolelta, lisää hieno rakeisuus ja käytä yhtä kylläistä korosteväriä.

### Mikä on hopeisen liukuvärin CSS?

Käytä kirkasta kaistaa tummempien väripisteiden välissä, esimerkiksi `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### Onko englanniksi grey gradient vai gray gradient?

Molemmat ovat oikein. Gray on amerikkalainen kirjoitusasu ja grey brittiläinen; ne tarkoittavat täsmälleen samaa väriä.

### Mikä väri sopii parhaiten harmaan liukuvärin kanssa?

Yksi vahva koroste: sähkönsininen tai lime viileille harmaille, huomio-oranssi, roosa tai messinki lämpimille.

### Miksi harmaassa liukuvärissäni on raitoja?

Sileät harmaat sekoitukset näyttävät jokaisen väriaskeleen, varsinkin pakkauksen jälkeen. Lisää kevyt kohinakerros ja vie PNG-muotoon.