# Silkkiliukuvärit: pehmeitä valon ja värin laskoksia

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

Silkki on harvoja materiaaleja, jotka tunnistaa pelkästä valosta. Oikeat laskokset ja hohde saavat litteän näytön tuntumaan arvokkaalta. Näillä väreillä ja rakenteilla se onnistuu.

## The short version

- Silkkiliukuväri jäljittelee laskeutuvaa kangasta pitkillä pehmeillä laskoksilla, kapeilla kirkkailla harjavaloilla ja syvillä värillisillä laskosvarjoilla.
- Silkin valokohdat ovat paljon varjoja kapeampia. Juuri tämä epätasapaino näyttää hohteelta eikä tavalliselta varjostukselta.
- Vaihtovärinen silkki kudotaan kahdenvärisistä langoista. Siksi sen sävy vaihtuu valon ja varjon välillä, esimerkiksi sinivihreästä violettiin.
- Silkin varjojen tulee olla kankaan värin syvempiä ja kylläisempiä versioita, ei harmaita.
- Silkkiliukuvärit sopivat luksukseen, kauneuteen, koruihin ja häihin, sillä materiaali itsessään viestii huolellisuutta ja arvokkuutta.

**Silkkiliukuväri** jäljittelee laskeutuvaa kangasta: pitkiä värilaskoksia, joiden harjalla on kapea kirkas valo ja pohjalla pehmeä syvä varjo. Silmä lukee ohuen valon ja leveän varjon rytmin hohteeksi. Ilme perustuu materiaaliin, ei vain väriin. Sama samppanja tai smaragdi voi näyttää tasaisessa sekoituksessa lattealta ja silkkinä ylelliseltä. Tarvitset kankaan värin, sitä vaaleamman ja hieman lämpimämmän valon sekä syvemmän, kylläisemmän varjon.

## Miten silkki heijastaa valoa

Silkkikuidut ovat sileitä ja hieman prismanmuotoisia, joten ne heijastavat valoa keskittyneesti. Silkkilaskokseen syntyy nopea terävä valo sen kääntyessä valoa kohti ja pitkä lempeä liukuma varjoon. Mattapuuvilla tuottaisi samanmuotoisena leveän himmeän liukuman ilman terävää huippua. Kopioi nämä ominaisuudet, niin mikä tahansa väri alkaa näyttää silkiltä.

| Laskoksen osa | Ulkonäkö | Liukuvärissä |
| --- | --- | --- |
| Harjan valo | Ohut, kirkas, lähes valkoinen | Kapea väripistealue, 2:sta 4:ään prosenttia leveä |
| Laskoksen kylki | Kankaan varsinainen väri | Leveä kaista valon kummallakin puolella |
| Laskoksen varjo | Syvä, kylläinen, pehmeäreunainen | Levein kaista, tummempi ja rikkaampi |
| Heijastusvalo | Hento vaaleneminen laskoksen pohjalla | Hieman vaaleampi väripiste varjossa |

Yksi laskos osiin purettuna. Toista sitä eri leveyksillä kuvan poikki, niin syntyy laskeutuva kangas.

## Silkkiliukuvärien koodit

Jokainen on yksi lineaarinen liukuväri, johon laskokset on rakennettu: erilevyiset kaistat, terävät valot ja leveät varjot. Ne toimivat sellaisinaan taustoina ja alempana olevan kerroksellisen version pohjana.

- Samppanjasilkki: `linear-gradient(115deg, #6b4f2a 0%, #c8a46a 18%, #f7ead0 23%, #b8925a 30%, #5a3f1e 48%, #a8844f 62%, #efdcb6 66%, #8c6a3a 74%, #4a3216 100%)`
- Smaragdisilkki: `linear-gradient(110deg, #022c22 0%, #047857 20%, #a7f3d0 25%, #059669 32%, #013d2c 52%, #065f46 66%, #6ee7b7 70%, #064e3b 78%, #011c15 100%)`
- Keskiyön silkki: `linear-gradient(120deg, #0b1026 0%, #1e2a5a 20%, #9fb3e8 25%, #26346e 32%, #070b1c 52%, #1c2752 66%, #7d93d4 70%, #151d40 78%, #05070f 100%)`
- Roosasilkki: `linear-gradient(115deg, #7a2e3e 0%, #d97a8c 20%, #fde4e8 24%, #c8607a 31%, #5e1f2e 50%, #b85068 64%, #f8c8d2 68%, #8e3348 76%, #4a1622 100%)`
- Häränverisilkki: `linear-gradient(118deg, #3a0d0d 0%, #9b1c1c 20%, #f8b4b4 24%, #b91c1c 31%, #2b0808 52%, #7f1d1d 66%, #fca5a5 70%, #5c1212 78%, #1f0505 100%)`
- Norsunluusilkki: `linear-gradient(115deg, #e7e5e4 0%, #f5f5f4 20%, #ffffff 24%, #d6d3d1 31%, #a8a29e 50%, #d6d3d1 64%, #fafaf9 68%, #c4bfbb 76%, #9c9692 100%)`

Kuusi silkkiä, jokaisessa kaksi laskosta. Valon väripistealueet ovat vain neljä prosenttia leveitä. Leventäminen muuttaa hohteen tavalliseksi raidaksi.

Pidä kulma 100:n ja 125 asteen välillä, jotta laskokset laskeutuvat vinosti kuin yhdestä kulmasta riippuva kangas. Täysin pystysuora laskos näyttää verholta, vaakasuora nauhalta. Tummat keskiyön- ja häränverisävyt antavat eniten anteeksi, koska varjo peittää kömpelöt liitokset. Niille sopii kultainen teksti, kuten [mustissa ja kultaisissa liukuväreissä](https://gradiently.design/fi/guide/black-and-gold-gradient).

## Vaihtovärinen silkki: kaksi väriä yhdessä kankaassa

Vaihtovärinen eli changeant-silkki kudotaan erivärisillä loimi- ja kudelangoilla. Kankaan kääntyessä toinen väri näkyy enemmän, joten sävy vaihtuu valosta varjoon. Sen jäljittely on näyttävää ja vaatii vain yhden muutoksen: käytä valoissa ja laskosten kyljillä yhtä sävyä ja pohjilla toista.

- Sinivihreä valo: #99f6e4
- Sinivihreä kylki: #14b8a6
- Violetti laskos: #6d28d9
- Violetti varjo: #2e1065

Sinivihreä ja violetti vaihtovärinen silkki. Valo on sinivihreä, varjo violetti ja keskiosa hohtaa niiden välillä.

Vaihtovärinen silkki: sinivihreä ja violetti: `linear-gradient(115deg, #2e1065 0%, #14b8a6 19%, #ccfbf1 23%, #2dd4bf 28%, #6d28d9 40%, #2e1065 52%, #0f766e 64%, #99f6e4 68%, #5b21b6 78%, #1e0a45 100%)`

Sävy muuttuu jokaisen laskoksen rinteessä. Yhdistä puhtaan keskisävyn kautta sekoittuvat värit, kuten sinivihreä ja violetti tai kulta ja roosa.

## Silkkilaskosten rakentaminen CSS:llä

Yksi lineaarinen liukuväri tuottaa rinnakkaiset laskokset, jotka näyttävät pliseeltä. Oikea laskeutuva kangas kaartuu. Kerrosta kaksi liukuväriä hieman eri kulmiin: toisessa pehmeä valo, toisessa laskokset. Lisää suuri säteittäinen varjo, jotta toinen puoli painuu taakse. Tulos näyttää riippuvalta kankaalta.

```css
.silk {
  min-height: 100vh;
  background-color: #4a3216;
  background-image:
    radial-gradient(ellipse 70% 90% at 85% 100%, rgba(40, 24, 8, 0.65) 0%, transparent 70%),
    linear-gradient(100deg, transparent 30%, rgba(255, 246, 225, 0.35) 38%, transparent 44%),
    linear-gradient(115deg, #6b4f2a 0%, #c8a46a 18%, #f7ead0 23%, #b8925a 30%,
      #5a3f1e 48%, #a8844f 62%, #efdcb6 66%, #8c6a3a 74%, #4a3216 100%);
}
```

Samppanjasilkki toisella risteävällä hohteella ja alaoikealle kerääntyvällä syvällä varjolla.

> **Rakeisuus tekee siitä kangasta** Hyvin hieno kohinakerros 2:sta 4:ään prosentin peittävyydellä vihjaa kudoksesta ja estää laskoksia näyttämästä muovilta. Pidä se hienompana kuin paperissa. [Liukuvärin tekstuuri](https://gradiently.design/fi/guide/gradient-texture) vertailee vaihtoehtoja.

## Silkki-, satiini-, neste- ja kromiliukuvärit

| Ilme | Valo | Varjo | Tunnelma |
| --- | --- | --- | --- |
| Silkki | Ohut, kirkas, lämmin | Leveä, rikas, värillinen | Hillitty luksus |
| Satiini | Leveämpi ja kiiltävämpi | Lyhyempi, terävämpi | Iltapuku, rohkea |
| [Neste](https://gradiently.design/fi/guide/liquid-gradient) | Ohuet viivat pyörteissä | Värikaistat | Kaadettu maali, energia |
| Kromi | Puhdas valkoinen, hyvin kova | Lähes musta, kova | Koneet, Y2K, teknologia |

Neljä kiiltävää ilmettä. Valon leveys ja kovuus ratkaisevat, minkä materiaalin silmä näkee.

## Missä silkkiliukuvärit toimivat parhaiten

Silkki viestii huolellisuutta, joten se sopii koruihin, tuoksuihin, ihonhoitoon, häihin, hotelleihin ja laatutuotteiden lanseerauksiin. Yhdistä hienostuneeseen antiikvaan tai kevyeen leveään groteskiin ja pidä sanat vähissä. Samppanja ja norsunluu sopivat häihin, smaragdi, keskiyö ja häränveri iltaan ja luksukseen. [Luksuspaletit](https://gradiently.design/fi/guide/luxury-color-palettes) ja [hääpaletit](https://gradiently.design/fi/guide/wedding-color-palettes) tarjoavat lisää pareja.

Pystysuuntainen tuoksutiedote pienellä hienostuneella otsikolla syvällä silkkiliukuvärillä

Tuoksujulkaisu koossa 1080×1350, sanat keskitettyinä kankaan rauhalliselle kyljelle.

Häiden ennakkokutsu, nimet vaalealla norsunluunvärisellä silkkitaustalla

5×7 tuuman kutsu koossa 1500×2100, norsunluusilkki ja nimet rauhallisimmassa kaistassa.

### Näyttää muovilta

- Valot yhtä leveitä kuin varjot
- Harmaat varjot
- Täysin rinnakkaiset laskokset
- Ei rakeisuutta, joten näyttää renderöinniltä

### Näyttää silkiltä

- Kapeat, kirkkaat valot
- Varjot syventävät kankaan väriä
- Risteävät ja kaartuvat laskokset
- Hento hieno rakeisuus

Gradientlyn Markit kerrostavat jopa kolme materiaalia omine valoineen ja rakeisuuksineen. Pinta voi siis kantaa syvyyttä ja hohdetta ilman käsin rakennettuja laskoksia. Jokainen piirretään täydellä laadulla kaikissa suunnittelukoossa kutsusta tarinaan ja pitää tekstin takaisen alueen rauhallisena. Selaa Markkinoita värisanoilla, kuten ”champagne” tai ”emerald”.

## FAQ

### Miten teen silkkiliukuvärin?

Käytä lineaarista liukuväriä epätasaisilla kaistoilla: kapeat lähes valkoiset valot, leveät kankaanväriset alueet ja laajat syvemmät varjot. Kerrosta toinen hohde hieman eri kulmaan saadaksesi kaartuvan kankaan.

### Mitkä värit näyttävät parhaimmilta silkkinä?

Samppanja, norsunluu, smaragdi, keskiyönsininen, roosa ja häränveri toimivat, koska niillä on selkeä vaalea ja tumma versio. Hyvin vaaleat pastellit tarvitsevat syvempiä varjoja.

### Mitä on vaihtovärinen silkki?

Kahdenvärisistä langoista kudottu silkki, jonka sävy vaihtuu liikkeessä. Käytä liukuvärin valoissa yhtä sävyä ja varjoissa toista.

### Mitä eroa silkki- ja satiiniliukuväreillä on?

Satiinissa on leveämmät kiiltävämmät valot ja lyhyemmät terävämmät varjot. Silkin ohuet kirkkaat valot ja leveät rikkaat varjot näyttävät rauhallisemmilta.