Keltainen liukuväri: kirkkaat koodit ilman vihreää

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ä.

Sama harmaan keskikohdan ongelma koskee kaikkia vastavärejä. Sameat liukuvärit 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ä.

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.

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 näyttää kiillon jäljittelyn.

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.

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.

.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);
  }
}

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 sisältää raja-arvot.

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 kertoo sen viesteistä, ja oranssit liukuvärit ovat sen luonteva naapuri.