# Beige liukuväri: rauhalliset lämpimät neutraalit sävyt

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

Beige onnistuu helposti melkein oikein, mutta täydellinen sävy vaatii harkintaa. Valitse pohjasävy, jätä liu’ulle riittävästi sävyeroa ja lisää tekstuuria.

## The short version

- Beige liukuväri näyttää rauhalliselta ja arvokkaalta, kun kaikilla väripisteillä on sama vaaleanpunainen, keltainen tai harmaa pohjasävy.
- Beige liukuväri tarvitsee odotettua suuremman vaaleuseron, tai liuku katoaa ja suunnitelma näyttää tasaiselta.
- Vaaleat, vähäkontrastiset liukuvärit raidoittuvat helposti näytöllä, ja hieno raekerros on varmin korjaus.
- Lämpimät tummanruskeat sävyt, kuten espresso, erottuvat beigellä puhdasta mustaa paremmin. Valkoinen teksti toimii sillä harvoin.
- Hiekanvärinen liukuväri kulkee vaaleasta kermanväristä paahtuneeseen kultaan, kuten varjopuoleltaan tummeneva dyyni.

**Beige liukuväri** yhdistää lämpimiä neutraaleja sävyjä, kermaa, hiekkaa, kauraa ja pellavaa, vaaleasta hieman syvempään saman pohjasävyn sisällä. Onnistuessaan se on rauhallinen, luonnollinen ja hillityn arvokas. Siksi se sopii ihonhoitoon, sisustukseen, häihin ja hitaaseen muotiin. Epäonnistuessaan se näyttää vanhan kirjekuoren skannaukselta. Ero syntyy kolmesta valinnasta: yhdestä pohjasävystä, riittävästä sävyerosta ja pienestä tekstuurista. Kunkin ilmeen koodit löydät alta.

## Valitse pohjasävy ennen väriä

Jokainen beige taittuu johonkin. Vaaleanpunaiseen taittuvat sävyt ovat pehmeitä ja ihon kaltaisia. Keltaiset tuntuvat aurinkoisilta ja hiekkaisilta. Harmaat beiget, joita kutsutaan usein greigeksi, ovat viileitä ja arkkitehtonisia. Pohjasävyjen sekoittaminen on tavallisin syy likaiseen vaikutelmaan: vaaleanpunainen väripiste harmaan vieressä näyttää tahralta, ei liu’ulta. Päätä ensin pohjasävy ja pysy siinä.

- Pellava: #faf6ef
- Punertava beige: #ecd3c6
- Ruusuhiekka: #d4ae9c
- Hiekka: #e8cfa8
- Hunajadyyni: #c9a273
- Greige: #ddd6cc
- Kivi: #b9b0a3
- Espressomuste: #3b2a1e

Kolme pohjasävyperhettä: punertavassa parissa vaaleanpunainen, hiekkaparissa keltainen ja greigessä sekä kivessä harmaa. Pellava ja espresso sopivat kaikkiin kolmeen.

## Hiekanvärisen liukuvärin koodit

**Hiekanvärinen liukuväri** seuraa dyyniä: auringon puolella se on vaalea ja kermainen, varjopuolella syvempi ja kultaisempi. Nämä ovat tämän oppaan lämpimimmät ja helpoimmat beiget, sillä keltainen pohjasävy estää niitä harmaantumasta.

- Hiekkadyyni: `linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%)`
- Aavikon keskipäivä: `linear-gradient(180deg, #fbf3e6 0%, #efd9b4 60%, #d9b27c 100%)`
- Dyynin varjo: `linear-gradient(135deg, #f2e2c9 0%, #d8b48a 45%, #a9805a 100%)`
- Märkä hiekka: `radial-gradient(ellipse at 30% 20%, #f3e5cf 0%, #d6bb94 50%, #b08d66 100%)`

Neljä hiekkailmettä. Dyynin varjon sävyero on suurin, joten se säilyy parhaiten pienessä koossa. Aavikon keskipäivä on vaalein ja sopii kaikkialta tummalle tekstille.

## Pellavan, kauran ja kiven koodit

Nämä hiljaisemmat beiget lähestyvät kermaa ja greigeä. Ne ovat hyviä taustoja tuotekuville ja pitkille teksteille: ne jäävät taka-alalle ja antavat muun sisällön johtaa. Pellava on hienovaraisin, lähes tasavärinen. Punertava beige tuo vaaleanpunaisen pohjasävyn, ja kivi on viilein, melkein harmaa.

- Pellava: `linear-gradient(180deg, #faf6ef 0%, #f1e8da 100%)`
- Kauralatte: `linear-gradient(150deg, #f5ede1 0%, #e6d5bf 55%, #cdb59a 100%)`
- Punertava beige: `linear-gradient(160deg, #f8ece6 0%, #ecd3c6 55%, #d4ae9c 100%)`
- Kivi: `linear-gradient(160deg, #f2efea 0%, #ddd6cc 50%, #b9b0a3 100%)`

Pehmeät neutraalit sävyt. Jos beige liukuväri näyttää näytöllä tasaväriseltä, sävyero on liian pieni. Syvennä viimeistä väripistettä.

Laajemman rauhallisten sävyjen perheen löydät oppaista [neutraalit väripaletit](https://gradiently.design/fi/guide/neutral-color-palettes) ja [maanläheiset värit](https://gradiently.design/fi/guide/earth-tone-colors). Kun kaipaat saman perheen syvempiä kahvin ja karamellin sävyjä, [ruskean liukuvärin](https://gradiently.design/fi/guide/brown-gradient) koodit jatkavat siitä, mihin nämä päättyvät.

## Miksi beige liukuväri raidoittuu ja miten korjaat sen

Vaalea liukuväri, jonka sävyero on pieni, kulkee vain muutaman erillisen väriarvon läpi. Näyttö piirtää ne näkyvinä portaina, ja voimakas pakkaus pahentaa tilannetta. Beige on erityisen altis tälle. Hieno raekerros rikkoo portaat ja saa samalla beigen näyttämään paperilta, rappaukselta tai kankaalta pelkän näyttövärin sijaan. [Liukuvärien raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) selittää syyn tarkemmin.

```css
.sand {
  position: relative;
  background: linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%);
}

.sand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  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");
}
```

Hiekanvärinen liukuväri, jonka päällä on kertovalla sekoitustilalla yhdistetty SVG-kohinakerros. Lisää peittävyyttä, jos haluat karkeamman, paperimaisemman pinnan.

Lisää raeohjeita ja neuvoja voimakkuuden valintaan löydät oppaasta [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients). Gradientlyn Markien reseptiin kuuluu rae, joten beigen Markin tekstuuri on valmiiksi tasapainossa jokaisessa koossa.

## Beigeen sopivat tekstivärit

| Muste | Hex | Vaikutelma | Käyttökohde |
| --- | --- | --- | --- |
| Espresso | `#3b2a1e` | Lämmin ja pehmeä, silti hyvin luettava | Otsikot ja leipäteksti kaikilla beigeillä |
| Hiilenharmaa | `#2b2b2b` | Terävä ja moderni | Kiven ja greigen sävyiset taustat |
| Syvä oliivi | `#3d4a2f` | Luonnollinen ja hieman yllättävä | Hiekan ja kauran sävyiset taustat |
| Terrakotta | `#a4502f` | Lämmin korostus | Vain suuret otsikot ja hinnat |
| Valkoinen | `#ffffff` | Heikko vaalealla beigellä | Vain suuret otsikot dyynin varjon tummimmilla sävyillä |

Musta toimii, mutta espressonruskea pitää koko suunnitelman samassa lämpimässä väriperheessä.

## Rauhallinen beige ilman tylsyyttä

### Tylsä vaikutelma

- Vaaleanpunaiset, keltaiset ja harmaat beiget samassa liu’ussa
- Kaksi niin läheistä väripistettä, ettei liukua näe
- Puhdas digitaalinen pinta, jossa näkyy raitoja
- Puhdas musta teksti ja levoton asettelu
- Valkoinen teksti vaalealla hiekalla

### Rauhallinen vaikutelma

- Sama pohjasävy jokaisessa väripisteessä
- Selvä liuku kermasta paahtuneeseen hiekkaan
- Hieno rae, joka näyttää paperilta tai rappaukselta
- Espressonvärinen teksti ja runsaasti tilaa
- Tumma muste ja yksi terrakottakorostus

Beige palkitsee pidättyvyyden. Muutama sana, paljon tilaa ja yksi vahva tuotekuva näyttävät arvokkaammilta kuin runsas koristelu. Tämä ilme on monen onnistuneen [ihonhoitobrändin designin](https://gradiently.design/fi/guide/skincare-brand-design) taustalla, ja se sopii myös hääpaperituotteisiin ja sisustusstudioihin.

Pystypostaus lämpimällä hiekanvärisellä taustalla. Tummanruskea teksti sanoo Vähemmän, mutta paremmin.

Ihonhoitotuotteen julkaisupostaus hiekanvärisessä Markissa. Espressotekstiä, yksi rivi ja paljon väljyyttä.

## Missä beige liukuväri on parhaimmillaan

Beige toimii parhaiten, kun se tukee jotain muuta: tuotetta, valokuvaa tai muutamaa harkittua sanaa. Tässä muutamia vahvoja käyttökohteita suunnittelukokoineen:

- **Tuotekuvat:** pellavan tai kauran sävyinen liukuväri pullon tai keramiikkaesineen takana koossa 2048×2048 pitää tuotteen pääosassa Shopify-tuotekuvassa.
- **Hääpaperituotteet:** punertava beige tai hiekka 5×7 in kutsuissa (1500×2100, 300 dpi), espressonvärisellä tai syvän oliivisella tekstillä. Lisää ideoita löydät oppaasta [häiden väripaletit](https://gradiently.design/fi/guide/wedding-color-palettes).
- **Sisustus ja arkkitehtuuri:** kiven ja greigen sävyiset liukuvärit portfoliokansissa ja projektipostauksissa, joissa valokuvat tuovat värit. Katso [sisustussuunnittelijan brändäys](https://gradiently.design/fi/guide/interior-designer-branding).
- **Verkkosivun osiot:** pellavan sävyinen liukuväri asiakaspalautteen tai hinnoittelutaulukon takana erottaa sen valkoisista osioista ilman kovaa reunaa.
- **Rauhallinen Instagram-ruudukko:** vuorottele hiekanvärisiä postauksia ja valokuvia, niin syöte tuntuu harkitulta kokonaisuudelta.

Beige on niin hienovarainen, että sama liukuväri voi toimia tarinassa mutta näyttää haalistuneelta leveässä bannerissa. Renderöi se jokaiseen muotoon sen sijaan, että venyttäisit yhtä tiedostoa. Tarkista vaalein väripiste puhelimen täydellä kirkkaudella, jolloin vaalea beige voi lähestyä puhdasta valkoista.

## FAQ

### Mistä väreistä beige liukuväri syntyy?

Kerman, hiekan, kauran ja pellavan sävyistä, joilla on sama pohjasävy. Esimerkiksi #f6ead6, #e8cfa8 ja #c9a273 muodostavat lämpimän hiekanvärisen liukuvärin.

### Miksi beige liukuvärini näyttää likaiselta?

Syynä on yleensä pohjasävyjen sekoittuminen, esimerkiksi vaaleanpunaiseen taittuva beige harmaan vieressä. Pidä jokainen väripiste samassa perheessä.

### Mikä tekstiväri sopii beigelle taustalle?

Lämmin tummanruskea, kuten espresso #3b2a1e, erottuu selvästi ja tuntuu mustaa pehmeämmältä. Hiilenharmaa sopii viileämpiin greigen sävyihin.

### Miten estän vaalean liukuvärin raidoittumisen?

Kasvata ensimmäisen ja viimeisen väripisteen sävyeroa, lisää hieno raekerros liukuvärin päälle ja vie kuva PNG-muodossa pakatun JPEG:n sijaan.