# Ruskea liukuväri: kahvin, karamellin ja maan koodit

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

Ruskeaa pidetään helposti ankeana, mutta lähes jokainen hyvä ruskea liukuväri löytyy kahvikupista tai keramiikkastudiosta. Näin pidät sen lämpimänä, koodit joka tunnelmaan mukana.

## The short version

- Ruskea on tumma, vähän kylläinen oranssi, joten hyvä ruskea liukuväri säilyttää oranssin tai punaisen sävyn koko matkalla.
- Ruskeat liukuvärit näyttävät ankeilta liukuessaan harmaaseen tai vihreään ja täyteläisiltä pysyessään lämpiminä.
- Kahviliukuvärit kulkevat lähes mustasta espressosta vaaleaan cremaan, kun taas karamelliliukuvärit ovat vaaleampia ja kultaisempia.
- Ruskean liukuvärin interpolointi OKLCH:ssa pitää keskikohdan elävänä, mikä auttaa pitkissä värisiirtymissä.
- Kerma, salvianvihreä, utuinen sininen ja sinapinkeltainen ovat luotettavia ruskean kumppaneita tekstissä ja korostuksissa.

**Ruskea liukuväri** on oikeastaan tumma, pehmennetty oranssi, joka sekoittuu syvästä vaaleaan: espresso cremaan, suklaa karamelliin, savi hiekkaan. Säilytä lämmin sävy jokaisessa väripisteessä, niin ruskea näyttää täyteläiseltä, kodikkaalta ja käsintehdyltä. Jos se lipsuu harmaaseen tai vihreään, tuloksena on mutaa. Alla saat koodit kahvin, karamellin, suklaan, maan ja viskin ruskeisiin sekä niille sopivat väriyhdistelmät.

## Miksi ruskeat liukuvärit muuttuvat mutaisiksi

Sateenkaaressa ei ole ruskeaa. Ruskeaksi kutsumme oranssia tai punaista, jonka vaaleutta ja kylläisyyttä on laskettu. Käytännössä tämä tarkoittaa, että jos yksikin liukuvärin piste menettää lämpönsä liiallisen harmaan tai vihertävän vivahteen vuoksi, koko siirtymä näyttää likaiselta. Pidä jokainen väripiste lämpimänä ja tummenna laskemalla vaaleutta mustan lisäämisen sijaan. [Mutaiset liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) näyttää vaikutuksen rinnakkain.

- Espresso: #1b0f0a
- Tumma paahto: #3b2216
- Kahvi: #6b3f26
- Toffee: #a85f24
- Karamelli: #e0a15a
- Terrakotta: #c0603a
- Crema: #f3e3cc

Lämmin ruskeiden perhe. Jokaisessa värinäytteessä, tummimmassakin, on yhä hieman oranssia.

Voit tehdä oman ruskean liukuvärisi mistä tahansa oranssista värivalitsimella, joka näyttää sävyn, kylläisyyden ja vaaleuden. Tarvitset neljä vaihetta:

1. **Valitse lämmin sävy** Valitse sävykulma noin 20 ja 40 asteen väliltä: pienempi luku punertaville ruskeille, kuten tiilelle ja terrakotalle, suurempi kultaisille, kuten karamellille.
2. **Pehmennä kylläisyyttä** Laske kylläisyys noin 35 %:n ja 65 %:n välille. Täysin kylläisenä väri pysyy oranssina, liian vähäisenä se muuttuu harmaaksi.
3. **Aseta kolme vaaleustasoa** Käytä samaa sävyä kolmella vaaleustasolla, esimerkiksi 10 %, 30 % ja 60 %. Tämä vaihtelu tekee liukuvärin näkyväksi.
4. **Lämmitä vaaleaa päätä** Siirrä vaaleinta väripistettä muutama aste keltaista kohti. Puun, kahvin ja saven todelliset valokohdat näyttävät lämpimämmiltä.

## Kahviliukuvärien koodit

Kahvinruskeat ovat tämän joukon monikäyttöisimmät sävyt. Espresso on lähes musta ja antaa vaalealle tekstille syvän taustan. Crema-liuku kulkee kupin vaaleasta vaahdosta sen alla olevaan kahviin. Mokka jää niiden väliin ja toimii vahvana, neutraalina taustana ruokalistoille ja hinnastoille.

- Espresso: `linear-gradient(160deg, #1b0f0a 0%, #3b2216 50%, #6b3f26 100%)`
- Crema-liuku: `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`
- Mokka: `linear-gradient(135deg, #2a1810 0%, #5a3522 45%, #9b6a4a 100%)`

Kolme kahviliukuväriä. Crema-liuku tarvitsee ylhäällä tummaa ja alhaalla vaaleaa tekstiä, joten sijoita sanat vain yhdelle alueelle.

Kahvilat ja paahtimot löytävät näihin sävyihin perustuvan kokonaisen ilmeen artikkelista [kahvilan brändäys](https://gradiently.design/fi/guide/coffee-shop-branding) sekä pussi- ja etiketti-ideoita artikkelista [kahvipaahtimon pakkaukset](https://gradiently.design/fi/guide/coffee-roaster-packaging).

## Karamelli- ja suklaaliukuvärien koodit

Karamelli on ruskea kultaisimmillaan ja ystävällisimmillään. Sen hehku sopii leipomoihin, hunajaan, syksyn tarjouksiin ja kaikkeen makeaan. Suklaa on vastakohta: syvä, kiiltävä ja herkullinen. Pehmeän valokohdan sisältävä säteittäinen liukuväri antaa suklaalle sen luonnollisen hohteen.

- Karamelli: `linear-gradient(160deg, #fbe3b8 0%, #e0a15a 45%, #a85f24 100%)`
- Toffee: `linear-gradient(180deg, #d99a4e 0%, #a8652a 50%, #5c3415 100%)`
- Tumma suklaa: `radial-gradient(circle at 30% 30%, #6b3a22 0%, #3a1d10 50%, #160905 100%)`
- Viski lasissa: `radial-gradient(ellipse at 60% 30%, #f0b45c 0%, #b8661e 35%, #5a2a0c 70%, #1f0d04 100%)`

Makeita, herkullisia ruskeita. Viski on sisältä valaistua karamellia ja tämän artikkelin näyttävin liukuväri.

## Maan, saven ja terrakotan liukuvärit

Maanruskeat taittuvat punaiseen ja tuntuvat käsintehdyiltä: savi, tiili, nahka ja pähkinäpuu. Ne sopivat keramiikkaan, kasvikauppoihin, ulkoiluvarusteisiin ja luonnolliseen tai välimerelliseen ilmeeseen. Varsinkin terrakotasta on tullut lämpimien, modernien brändien suosikki, sillä se tuntuu yhtä aikaa maanläheiseltä ja raikkaalta.

- Terrakotta: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Aavikon savi: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Pähkinäpuu ja nahka: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Maanruskeita. Terrakotta on kirkkain ja tarvitsee vähiten korostusvärien apua.

Laajenna sävyt kokonaiseksi paletiksi artikkeleilla [maanläheiset värit](https://gradiently.design/fi/guide/earth-tone-colors) ja [syksyn väripaletit](https://gradiently.design/fi/guide/autumn-color-palettes). Perheen vaaleampaan päähän, hiekkaan ja kauraan, pääset [beigen liukuvärin](https://gradiently.design/fi/guide/beige-gradient) koodeilla, jotka jatkavat aavikon saven sävyistä.

## Pidä pitkä ruskea värisiirtymä lämpimänä CSS:llä

Selain sekoittaa liukuvärit oletuksena sRGB:ssä, jolloin pitkä siirtymä syvästä ruskeasta vaaleaan karamelliin voi hiipua hieman harmaaksi keskeltä. OKLCH-interpolointi pitää sävyn ja värikylläisyyden tasaisempina päästä päähän. Suurten selainten nykyversiot tukevat sitä, ja heksakoodivaihtoehto kattaa muut.

```css
.brown-hero {
  /* fallback for older browsers */
  background: linear-gradient(160deg, #2a1810 0%, #a85f24 55%, #fbe3b8 100%);
  /* steadier warmth through the middle */
  background: linear-gradient(160deg in oklch, oklch(0.24 0.04 45) 0%, oklch(0.52 0.11 55) 55%, oklch(0.92 0.06 80) 100%);
}
```

Sama siirtymä espressosta karamelliin kahdesti kirjoitettuna. Toisen rivin ymmärtävät selaimet käyttävät sitä, muut pysyvät ensimmäisessä.

[CSS-liukuvärit OKLCH:ssa](https://gradiently.design/fi/guide/css-gradient-oklch) selittää väriavaruuden ja sen, milloin lisärivi kannattaa.

## Mitä yhdistää ruskeaan liukuväriin

| Kumppani | Heksakoodi | Tunnelma | Kokeile tässä |
| --- | --- | --- | --- |
| Kerma | `#f6efe4` | Klassinen, kodikas | Kahvilan ruokalistat, leipomon julkaisut |
| Salvianvihreä | `#a3b18a` | Luonnollinen, rauhallinen | Kasvikaupat, hyvinvointi, tee |
| Utuinen sininen | `#8aa1b4` | Raikas, yllättävä | Keramiikka, denim, kodintuotteet |
| Sinappi | `#d6a23a` | Retro, lämmin | Levyt, vintage, syysalet |
| Puuteriroosa | `#e8c4b8` | Pehmeä, moderni | Kauneus, kynttilät, paperituotteet |

Käytä kumppania tekstissä tai yhdessä korostuksessa. Sininen on rohkein valinta, sillä se on oranssin vastaväri ja saa ruskean näyttämään lämpimämmältä.

## Ruskea liukuväri oikeassa julkaisussa

Ruskeat taustat kantavat erityisen hyvin lämpimiä arkisia uutisia: uuden paahdon, kausileivonnaisen tai työpajan. Kermanvärinen teksti syvässä päässä on varma valinta. Yksi sinapin- tai karamellinvärinen sana lisää energiaa. [Leipomon Instagram-ideat](https://gradiently.design/fi/guide/bakery-instagram-ideas) tarjoaa kuukaudeksi näihin sävyihin sopivia julkaisuja.

Pystyjulkaisu, jossa on syvä kahvinruskea tausta ja kermanvärinen teksti Uusi paahto tiistaina

Paahtimon ilmoitus kahvinvärisessä Markissa. Kermanvärinen teksti on taustan tummimmalla alueella.

Jos julkaiset viikoittain, vaikeinta on pitää jokainen julkaisu samassa lämpimässä ruskeassa. Gradientlyssä valitset lämpimän ruskean Markin kerran, ja jokainen mallipohja, tarina ja ruokalista käyttää sitä. Automaattinen muste valitsee riveittäin kerman- tai espressonvärisen tekstin, jotta mikään ei katoa tummiin kulmiin.

## FAQ

### Mitkä värit muodostavat ruskean liukuvärin?

Saman perheen lämpimät ruskeat, kuten espresso #1b0f0a, kahvi #6b3f26 ja karamelli #e0a15a. Pidä kaikki väripisteet oranssin tai punaisen puolella, niin siirtymä pysyy täyteläisenä.

### Miksi ruskea liukuvärini näyttää himmeältä?

Yksi tai useampi väripiste on liukunut harmaaseen tai vihreään. Tummenna ruskeaa vaaleutta laskemalla mustan lisäämisen sijaan ja pidä sävy lämpimänä.

### Minkä värinen teksti sopii ruskealle taustalle?

Kerma tai lämmin valkoinen tummille ruskeille, espresso tai hiilenharmaa vaalealle karamellille ja hiekalle. Sinappi toimii yhden sanan korostuksena.

### Millainen on hyvä kahvinvärinen liukuväri?

Kokeile `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, joka kulkee yläosan cremasta alaosan kahviin.