# Keltainen liukuväri: kirkkaat koodit ilman vihreää

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

Keltainen pettää liukuvärissä erityisen helposti: yksi väärä väripiste muuttaa auringon limeksi tai kullan khakiksi. Tässä on syy ja sarja koodeja, jotka pysyvät lämpiminä alusta loppuun.

## The short version

- Keltainen liukuväri muuttuu vihreäksi sekoittuessaan syaaniin, sinivihreään tai siniseen, koska niiden välinen väri kulkee vihreän kautta.
- Tumma keltainen kääntyy oliiviksi ja khakiksi, joten syvennä keltaista meripihkalla, oranssilla tai ruskealla harmaan tai mustan sijaan.
- Keltainen pysyy aurinkoisimpana, kun muut väripisteet ovat lämpimiä: kermaa, persikkaa, oranssia, vaaleanpunaista tai kultaa.
- Valkoinen teksti toimii keltaisella harvoin; lähes musta tai syvä ruskea on paljon luettavampi.
- Yhdistä keltainen ja sininen samaan liukuväriin sijoittamalla väliin valkoista, vaaleanpunaista tai violettia, jotta keskikohta ei muutu vihreäksi.

**Keltainen liukuväri** näyttää kirkkaalta ja iloiselta, kun jokainen väripiste on lämmin: kerma, voi, sitruuna, kulta tai oranssi. Se epäonnistuu kahdella ennustettavalla tavalla. Sekoita sitä siniseen tai sinivihreään, ja keskikohta muuttuu vihreäksi; tummenna harmaalla, ja siitä tulee oliivi. Pidä sävy keltaisen lämpimällä puolella ja syvennä meripihkalla mustan sijaan, niin liukuväri pysyy aurinkoisena kauttaaltaan. Alla olevat koodit perustuvat tähän sääntöön.

## Miksi keltainen liukuväri muuttuu vihreäksi tai sameaksi

Keltainen on väriympyrässä aivan vihreän vieressä, lähempänä kuin useimmat odottavat. Se tekee siitä herkän kolmessa tilanteessa.

- **Sekoittaminen viileisiin väreihin.** Keltaisen ja syaanin, sinivihreän tai sinisen välillä selaimen täytyy kulkea vihreän kautta. Aurinkoisen keltaisen ja taivaansinisen väliin syntyy limen- tai salvianvihreä raita.
- **Tummennus mustalla tai harmaalla.** Silmä lukee tumman, heikosti kylläisen keltaisen oliivina tai khakina, ei ”tummana keltaisena”. Syvää keltaista, joka näyttäisi yhä keltaiselta, ei ole.
- **Alkuväri on jo vihertävä sitruuna.** Happamat sitruunat, kuten `#e4f04a`, näyttävät yksin raikkailta mutta vetävät kaikki viereiset väripisteet kohti limeä.

### Muuttuu vihreäksi tai oliiviksi

- Keltaisesta suoraan taivaansiniseen tai sinivihreään
- Keltainen tummennettu harmaalla tai mustalla
- Viileä sitruuna kirkkaimpana väripisteenä
- Keltaisesta vihreään ilman lämmintä välisävyä

### Pysyy aurinkoisena

- Keltaisesta kermaan, persikkaan, oranssiin tai vaaleanpunaiseen
- Keltainen syvennetty meripihkalla ja ruskealla
- Lämmin keltainen, kuten `#facc15`, kirkkaimpana väripisteenä
- Valkoinen tai vaaleanpunainen keltaisen ja sinisen välissä

Sama harmaan keskikohdan ongelma koskee kaikkia vastavärejä. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) käsittelee sitä yleisesti. Keltainen näyttää sen vain ensin, koska vihreä on niin lähellä.

## Kirkkaan keltaisen liukuvärin koodit

Nämä ovat voimakkaita: kesään, tarjousbannereihin, lasten brändeihin, festivaaleille ja huolellisiin varoituskyltteihin. Jokainen yhdistää keltaisen lämpimämpään väriin, jotta liike säilyy ilman vihertymistä.

- Sitruunasorbetti: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Auringonkukka: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Keltaisesta mandariiniin: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Vaaleanpunainen limonadi: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Keskipäivän aurinko: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Helleaalto: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Kuusi kirkasta keltaista liukuväriä. Jokainen kumppaniväri on keltaista lämpimämpi, mikä pitää sävyt puhtaina.

Runsas kirkas keltainen väsyttää, joten käytä näitä julkaisuissa ja bannereissa koko verkkosivun sijaan. Koossa 1080×1920 tehtävässä tarinassa alhaalta oranssiksi häipyvä keltainen antaa katseelle paikan levätä ja pitää kirkkaimman osan yläreunan otsikkoalueella.

## Vaaleankeltaiset liukuvärit: voi ja kerma

Vaaleat keltaiset toimivat lämpimän paperin tavoin. Ne sopivat hyvin ruokalistojen, kutsujen, uutiskirjeiden ja pitkien tekstien taustalle, koska tumma teksti asettuu niille luontevasti. Pidä vähintään yksi väripiste lähellä valkoista, jotta keltainen tuntuu valolta eikä kaiken päälle lisätyltä värikalvolta.

- Kermanvärinen paperi: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Voi: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Vaniljakastike ja persikka: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Ikkunavalo: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Pehmeitä keltaisia pitkään lukemiseen ja lempeille brändeille. Ne sopivat hiilenharmaan, ruskean ja syvänvihreän tekstin kanssa.

## Kultaiset ja tummankeltaiset liukuvärit ilman oliivia

Älä tummenna keltaista saadaksesi siitä rikkaan. Siirrä sitä. Vie syvät väripisteet kohti meripihkaa, okraa ja ruskeaa, niin keltainen muuttuu kullaksi, hunajaksi ja sinapiksi khakin sijaan. Metalliseen pintaan [kultaiset liukuvärit](https://gradiently.design/fi/guide/gold-gradient-design) näyttää kiillon jäljittelyn.

- Hunaja: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Sinappi: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Harjattu kulta: `linear-gradient(135deg, #fef3c7 0%, #e9b949 40%, #a16207 75%, #fde68a 100%)`
- Kulta tummalla: `radial-gradient(circle at 75% 25%, #fde047 0%, #b45309 30%, #1c1208 75%)`

Jokainen syvä väripiste siirtyy kohti meripihkaa tai ruskeaa. Lopputulos tuntuu kullalta, ei oliivilta.

> **Tarkista varjon väri** Jos varjostat keltaista kohdetta harmaalla tai mustalla kerroksella, se näyttää oliivilta. Varjosta keltaista sen sijaan läpikuultavalla meripihkalla tai ruskealla.

## Keltaiset ja siniset liukuvärit ilman vihreää keskikohtaa

Keltainen ja sininen ovat klassinen pari, mutta suora sekoitus tuottaa vihreän kaistaleen. Kolme hyvää vaihtoehtoa: lisää vaalea välipiste, kuljeta liukuväri vaaleanpunaisen ja violetin kautta tai pidä värit erillisinä alueina sekoituksen sijaan.

- Vältä: limenvihreä keskikohta: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Kerman kautta: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Vaaleanpunaisen kautta: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Keltainen valo laivastonsinisellä: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

Ensimmäinen liukuväri näyttää ongelman. Muut kolme yhdistävät keltaisen ja sinisen kulkematta vihreän kautta.

Nyky-CSS:ssä voit myös pyytää selainta kulkemaan väriympyrän pitkää reittiä. OKLCH-interpolointi asetuksella `longer hue` vie keltaisen siniseen oranssin, vaaleanpunaisen ja violetin kautta vihreän sijaan. Tuesta ja syntaksista kertoo [CSS-liukuvärit OKLCH-väriavaruudessa](https://gradiently.design/fi/guide/css-gradient-oklch).

```css
.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}
```

Pitkä reitti väriympyrän ympäri välttää vihreän. Säilytä käsin tehty varaversio selaimille, jotka eivät tue väriavaruusinterpolointia.

## Teksti keltaisella liukuvärillä

Keltainen on vaalein kylläinen väri, joten valkoinen teksti katoaa sille. Valkoinen värillä `#facc15` saa kontrastiksi noin 1,5:1, kun syvä ruskea kuten `#422006` ylittää samalla keltaisella 9:1. Käytä tummaa tekstiä lähes kaikkialla ja säästä valkoinen syvimmille kullan sävyille. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) sisältää raja-arvot.

| Tausta | Valkoinen teksti | Ruskea teksti #422006 |
| --- | --- | --- |
| Sitruuna `#fde047` | Alittaa selvästi | Noin 11:1 |
| Auringonkukka `#facc15` | Noin 1,5:1, alittaa | Noin 9,5:1 |
| Tumma kulta `#ca8a04` | Noin 2,9:1, alittaa | Riittää |
| Okra `#a16207` | Noin 4,9:1, riittää | Heikko |
| Pronssi `#854d0e` | Noin 6,9:1, riittää | Alittaa |

Tasaisen värin mittaukset. Tarkista liukuväristä jokaisen tekstirivin takana oleva vaalein kohta.

Tilakaupan julkaisu, jossa tummanruskea otsikko on lämpimällä keltaoranssilla liukuväritaustalla

Tumma, lämmin teksti aurinkoisella keltaisella. Se avautuu heti ja säilyttää iloisen tunnelman.

Gradientlyssä Automaattinen muste tekee valinnan puolestasi ja poimii jokaiselle riville vaalean tai tumman tekstin Markin omasta paletista. Keltainen ulkoasu ei siis tarvitse käsin tehtävää kontrastitarkistusta jokaisella koonmuutoksella. Jos keltainen kuuluu identiteettiisi, [keltaisen värin merkitys](https://gradiently.design/fi/guide/yellow-color-meaning) kertoo sen viesteistä, ja [oranssit liukuvärit](https://gradiently.design/fi/guide/orange-gradient) ovat sen luonteva naapuri.

## FAQ

### Miksi keltainen liukuvärini näyttää vihreältä?

Se sekoittuu viileään väriin, kuten siniseen tai sinivihreään, tai keltainen itse kallistuu sitruunaan. Käytä lämpimämpiä kumppanisävyjä, kuten oranssia, vaaleanpunaista tai kermaa.

### Miten teen tummankeltaisen liukuvärin ilman oliivia?

Syvennä keltaista meripihkalla, okralla ja ruskealla harmaan tai mustan sijaan. Silloin se muuttuu kullaksi tai hunajaksi khakin sijaan.

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

Lähes musta, hiilenharmaa tai syvä ruskea. Valkoinen teksti alittaa kontrastivaatimukset lähes kaikilla kirkkailla keltaisilla.

### Miten yhdistän keltaisen ja sinisen yhteen liukuväriin?

Lisää väliin kermaa, valkoista tai vaaleanpunaista tai interpoloi OKLCH:ssa asetuksella `longer hue`, jotta liukuväri kulkee lämpimien värien eikä vihreän kautta.

### Mikä on hyvä keltaisen liukuvärin CSS-koodi?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` on luotettava lämmin keltainen, joka ei muutu vihreäksi.