Vihreä-sininen liukuväri: raikkaat luonnolliset värikoodit

Vihreä-sininen liukuväri yhdistää kaksi viileää naapuria: vihreitä kuten smaragdin #10b981 tai mintun #a7f3d0 ja sinisiä kuten #0284c7 tai taivaan #bae6fd. Sinivihreä ja akvansininen rakentavat niiden välille sillan. Sekoitus pysyy puhtaana, koska sävyjen väliin ei tule harmaata kohtaa. Se tuntuu luonnolliselta, koska olet nähnyt sitä koko elämäsi vedessä, jäässä ja taivaalla. Nämä koodit seuraavat neljää maisemaa, ja mukana ovat kullekin sopivat tekstivärit sekä vaalean ja tumman tilan CSS.

Miksi vihreä ja sininen näyttävät luonnollisilta yhdessä

Vihreä ja sininen ovat lähivärejä: ne ovat ympyrässä vierekkäin, joten jokainen väliaskel on oikea väri, enimmäkseen sinivihreää ja akvansinistä. Luonto näyttää paria jatkuvasti matalista meristä, joissa sininen vesi peittää vihreää kasvustoa ja hiekkaa, jäätikköjärviin ja tyynestä vedestä heijastuviin mäntymetsiin. Näiden maisemien lainaaminen on helpoin tapa saada liukuväri tuntumaan rauhalliselta yritysmäisen sijaan.

Laguuni: kirkkaat akvansiniset ja vihreät liukuvärit

Matala trooppinen vesi on pääosin akvansinistä, matalimmissa kohdissa vihreää ja syventyessä sinistä. Näissä liukuväreissä on kirkas lomatunnelma. Lisää lämmin hiekanvärinen väripiste, jos haluat rannan tuntua uima-altaan sijaan.

Metsäjärvi: syvät vihreät ja siniset liukuvärit

Tummasta vihreästä tummaan siniseen kulkeva liukuväri tuntuu hiljaiselta, arvokkaalta ja luotettavalta. Ajattele metsäjärveä hämärässä tai vanhan pullon väriä. Näillä valkoinen teksti toimii hyvin. Ne sopivat rahoitukseen, ulkoiluvarusteisiin, arkkitehtuuriin ja vakautta hakeville brändeille.

Jäätikkö: vaaleat mintun ja taivaan liukuvärit

Kun vaalennat parin kunnolla, saat jäätikköjäätä ja kylmiä aamuja: puhtaita, ilmavia ja hyvin rauhallisia. Ne sopivat terveydenhuoltoon, ihonhoitoon, siivoukseen ja tuottavuussovelluksiin. Ilme voi tuntua kliiniseltä, joten ripaus lämmintä valkoista auttaa.

Revontulet: vihreä ja sininen yötaivaalla

Revontulet ovat vihreää ja sinistä valoa mustalla, minkä vuoksi revontuliliukuvärit ovat suosituimpia tummia taustoja. Pidä väri pehmeissä kaistoissa ja jätä suurin osa kuvasta tummaksi. Revontuliliukuvärit käsittelee tekniikan kokonaan.

Tekstivärit vihreä-sinisillä liukuväreillä

Smaragdi ja akvansininen ovat yllättävän vaaleita, joten valkoinen teksti kirkkaissa versioissa jää usein heikoksi. Syvän sinivihreä muste toimii vaaleissa sekoituksissa ja pitää kokonaisuuden samassa väriperheessä. Valkoinen ja minttu erottuvat tummissa. Alla olevat suhteet käyttävät WCAG-kaavaa. Teksti liukuvärillä näyttää, mitä tehdä rivin ylittäessä molemmat päät.

Näin lämmität vihreä-sinistä palettia

Vihreä ja sininen ovat kumpikin viileitä, joten kokonainen brändi niillä voi tuntua etäiseltä. Yksi lämmin korosteväri korjaa asian. Hiekka, koralli ja pehmeä kulta ovat sinivihreää vastapäätä väriympyrässä. Käytä niitä liukuvärin vieressä painikkeessa, logossa tai kapeana kaistaleena reunalla sen sijaan, että sekoittaisit niihin. Vastavärit selittää, miksi ympyrän poikki sekoittaminen tuottaa harmaata.

Vihreä-sinisen liukuvärin CSS vaaleaan ja tummaan tilaan

.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}

Saman vihreän ja sinisen vaalea ja tumma versio tekee teemanvaihdosta suunnitellun tuntuisen pelkän kääntämisen sijaan. Tumman tilan liukuvärit syventyy aiheeseen. Gradientlyssä yksi Mark renderöityy jokaiseen suunnittelemaasi kokoon ja valitsee vaalean tai tumman musteen riveittäin omasta paletistaan. Niin kirkas laguuni kuin tumma metsäjärvi pitää sanat luettavina.