# Kirkkaat liukuvärit: kylläiset koodit ilman värähtelyä

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

Kylläinen väri herättää huomion nopeasti ja rasittaa silmiä yhtä nopeasti. Nämä koodit ovat tarkoituksella kirkkaita, mutta niiden reunat eivät värähtele. Perustelujen avulla voit tehdä myös omasi.

## The short version

- Kirkas liukuväri käyttää hyvin kylläisiä värejä. Sitä on mukava katsoa, kun vierekkäiset sävyt ovat läheisiä mutta selvästi eri vaaleusasteisia.
- Vierekkäiset vastavärit, joiden vaaleus on samankaltainen, näyttävät värähtelevän. Ilmiötä kutsutaan kromaattiseksi värähtelyksi.
- Kylläisten vastavärien suora sekoitus sRGB:ssä kulkee harmahtavan keskikohdan kautta. oklch-interpolointi välttää sen suurelta osin.
- Tumma tai neutraali pohja antaa silmälle levähdyspaikan ja saa kirkkaan värin näyttämään valkoista pohjaa voimakkaammalta.
- Kirkkaan liukuvärin teksti näkyy parhaiten lähes mustana tai valkoisena, ei toisena yhtä vaaleana kylläisenä värinä.

**Kirkkaat liukuvärit** ovat voimakkaita ja kylläisiä ilman värähtelyä, kun kaksi sääntöä toteutuu: jokainen väri on lähellä naapuriaan väriympyrässä ja jokainen askel muuttaa vaaleutta selvästi. Jos ensimmäinen sääntö rikkoutuu, keskikohta samentuu. Jos samanvaaleat vastavärit asetetaan vierekkäin, reuna näyttää värähtelevän. Alla olevat kaksitoista koodia noudattavat molempia sääntöjä. Ne ovat voimakkaita julisteen, eivät migreenin tavoin.

## Kaksitoista kirkkaan liukuvärin koodia

- Mango: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Sähkövioletti: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Laguuni: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamingo: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Limejuoma: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Kirsikkapop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Jäätikkö: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Pinkkiä yössä: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Hiillos: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Koboltin nousu: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Korallista kultaan, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Jokainen yhdistelmä liikkuu lähisävyjen kautta vaalentuen tai tummuen. Siksi värit pysyvät puhtaina. Viimeinen käyttää oklch-muotoa ja tarvitsee ajantasaisen selaimen.

## Miksi osa kirkkaista liukuväreistä värähtelee

Kun kylläinen punainen koskettaa suoraan yhtä kirkasta sinistä, niiden raja näyttää välkkyvän. Värit eivät tunnu päättävän, kumpi on edessä. Suunnittelijat kutsuvat sitä kromaattiseksi värähtelyksi. Se on vahvinta terävissä reunoissa, ohuissa viivoissa ja värillisessä tekstissä. Siksi punainen teksti sinisellä taustalla väsyttää. Värit itsessään toimivat. Ongelma syntyy vastakkaisten ja yhtä vaaleiden sävyjen kosketuksesta.

- Värähtely: terävä raja, sama kirkkaus: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Rauha: tumma porras välissä: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

Sama punainen ja sininen. Vasemmalla yhtä kirkkaat värit koskettavat ja reuna värähtelee. Oikealla syvä väliporras erottaa ne ja molemmat näyttävät vahvemmilta.

Ratkaisuja on kaksi. Erota värit tummemmalla tai vaaleammalla välisävyllä kuten oikealla, tai valitse vastavärien sijaan lähivärit. [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) kertoo, milloin vastakkaisuus on vaivan arvoista.

## Oman kirkkaan liukuvärin säännöt

| Sääntö | Miksi | Esimerkki |
| --- | --- | --- |
| Pysy väriympyrän kolmasosan sisällä | Lähisävyt sekoittuvat ilman harmaata väliä | Indigo, violetti ja magenta |
| Muuta vaaleutta portaittain | Tuo syvyyttä ja estää reunojen värähtelyä | Syvästä `#1d4ed8`:sta kirkkaaseen `#38bdf8`:aan |
| Käytä yhtä pääväriä | Kolme yhtä voimakasta väriä kilpailee | Magenta on huippu, muut tukevat |
| Lisää pohja | Tumma tai neutraali alue lepuuttaa silmää | Pinkkiä yössä, Hiillos |
| Sekoita oklch-avaruudessa | Keskikohta säilyy kylläisenä | Korallista kultaan, oklch |

Viisi sääntöä jokaisen yllä olevan koodin takana. Riko niitä harkiten, älä vahingossa.

Samennus on kirkkaan liukuvärin toinen ongelma. Kun kaksi kylläistä vastaväriä sekoitetaan tavallisessa sRGB:ssä, keskiväri lähestyy harmaata. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) käsittelee ilmiötä ja [liukuvärin interpolointi](https://gradiently.design/fi/guide/gradient-interpolation) sen tekniikkaa. Kylläisyys on liukusäädin, ei kytkin. [Kylläisyys suunnittelussa](https://gradiently.design/fi/guide/color-saturation) kertoo sen säätämisestä.

## Kirkkaat liukuvärit CSS:llä

Nykyselain voi sekoittaa värejä havaintopohjaisessa väriavaruudessa, kun lisäät liukuväriin `in oklch`. Laajan yhdistelmän keskikohta säilyy yhtä elävänä kuin päät. Anna vanhalle selaimelle ensin heksaversio.

```css
.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}
```

Ultra-liukuvärin kolmen väripisteen varaversio ja kahden pisteen oklch-versio. Jälkimmäinen säilyy elävänä keskeltä ilman apupistettä.

## Missä kirkkaat liukuvärit toimivat parhaiten

Kirkas väri ansaitsee huomion. Käytä sitä siellä, missä huomio on koko tehtävä: selattavassa syötteessä, pikkukuvassa kahdenkymmenen muun joukossa tai kadun toisella puolella näkyvässä julisteessa. Pitkään luettavissa dokumenteissa, hallintanäkymissä ja artikkeleissa kylläinen pinta väsyttää jo muutamassa kappaleessa. Rajaa siellä liukuväri otsakkeeseen tai yhteen painikkeeseen ja anna rauhallisen pinnan kantaa loput.

| Käyttö | Kokeile | Koko |
| --- | --- | --- |
| Alennus- tai lanseerausjulkaisu | Mango, Flamingo | 1080×1350 |
| YouTube-pikkukuva | Sähkövioletti, Hiillos | 1280×720 |
| Sovelluksen tai tuotteen aloitusosio | Laguuni, Jäätikkö | 1920×1080 |
| Tarina tai Reelin kansi | Limejuoma, Kirsikkapop | 1080×1920 |
| Soittolistan kansi | Pinkkiä yössä, Ultra | 1080×1080 |
| A4-tapahtumajuliste | Ultra, Koboltin nousu | 2480×3508 |

Kuusi käyttökohdetta, joissa kirkkaat liukuvärit toimivat. Mukana yllä olevan ruudukon koodit ja suunnittelukoot.

Painossa kannattaa varautua yllätykseen. Kirkkaimmat näytön värit, etenkin sähkönsiniset, kuumat pinkit ja haponvihreät, ovat CMYK-musteiden toistoalueen ulkopuolella. Paperilla ne palaavat selvästi himmeämpinä. [RGB vai CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) selittää miksi. Valitse itse hieman syvemmät versiot ja tilaa vedos ennen painosta.

## Sanat kirkkaalla liukuvärillä

Kylläisen taustan kirkkaus vaihtelee päästä toiseen. Tummassa päässä näkyvä tekstiväri voi kadota vaaleassa. Käytä vain valkoista tai lähes mustaa, sijoita otsake syvimpään tai vaaleimpaan kohtaan ja tarkista heikoin kontrasti keskiarvon sijaan. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) kertoo tavoitearvot.

Pystysuuntainen alennusjulkaisu, jonka lihava teksti on kirkkaalla kylläisellä taustalla

Voimakas tausta ja selkeä vahva teksti. Väri myy, sanojen tarvitsee vain näkyä.

Gradientlyn Mark auttaa kirkkaissa väreissä: se tietää sanojen paikan ja syventää tai vaalentaa väriä kirjainten lähellä. Automaattinen muste valitsee rivin vaalean tai tumman tekstin omasta paletistaan. Kylläinen ilme pysyy luettavana kaikissa ko’oissa ilman laatikkoa tai otsakevarjoa. Neonilmeitä käsittelee [neonliukuvärit](https://gradiently.design/fi/guide/neon-gradients). Asteikon toiseen päähän sopii [hillityt liukuvärit](https://gradiently.design/fi/guide/subtle-gradients).

## FAQ

### Mikä tekee liukuväristä kirkkaan?

Hyvin kylläiset lähisävyt väriympyrässä ja selkeä vaaleuden muutos päästä toiseen.

### Miksi osa kirkkaista väriyhdistelmistä sattuu silmiin?

Vierekkäiset yhtä vaaleat vastavärit näyttävät värähtelevän. Erota ne tummemmalla tai vaaleammalla portaalla tai käytä lähisävyjä.

### Miten estän kirkkaan liukuvärin harmaan keskikohdan?

Käytä lähisävyjä, lisää väliväripiste tai sekoita oklch-avaruudessa muodolla `linear-gradient(in oklch, ...)` sitä tukevissa selaimissa.

### Mikä tekstiväri toimii kirkkaalla liukuvärillä?

Valkoinen tai lähes musta. Tarkista kontrasti sanojen takana kirkkaimmassa ja tummimmassa kohdassa, ei vain keskellä.

### Mikä kirkas liukuväri sopii verkkosivun aloitusosioon?

Kokeile `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` valkoisella tekstillä.