Syaani liukuväri: raikkaat ja sähköiset värikoodit

Syaani liukuväri sekoittaa vihreän ja sinisen puolivälissä olevan kirkkaan värin naapuriinsa: valkoiseen jäistä ilmettä varten, siniseen sähköiseen teknologiailmeeseen, limeen raikkauteen, magentaan kybertunnelmaan tai syvään laivastonsiniseen, jolla syaani näyttää hohtavan. Puhdas näytön syaani on #00ffff, ja se on paljon vaaleampi kuin moni odottaa. Tärkeintä onkin päättää sanojen paikka. Alta löydät jokaisen ilmeen koodit ja olennaiset kontrastiluvut.

Syaani, petrooli ja turkoosi ovat eri värejä

Nämä kolme sekoitetaan jatkuvasti, mutta ero merkitsee suunnittelijaa ohjeistaessa tai koodia valitessa. CSS nimeää kaikki kolme, ja ne eroavat selvästi. Syaani on kirkkain ja tasaisimmin vihreän ja sinisen välissä. Turkoosi on pehmeämpi ja hieman vihreämpi kuin samanniminen jalokivi. Petrooli on paljon tummempi ja rauhallisempi.

Rauhallisemmista sukulaisista kertovat petrooliliukuväri ja turkoosi liukuväri. Tässä pysymme kirkkaassa päässä.

Jään ja uima-altaan syaaniliukuvärien koodit

Syaanin vaalea pää tuntuu kylmältä vedeltä ja puhtaalta ilmalta. Jää on lähes valkoinen pienellä värivivahteella. Jäätikkö ja allas syvenevät kirkkaan syaanin kautta sinivihreään, jonka alareuna kantaa valkoista tekstiä. Ne sopivat kesätarjouksiin, viilentävään ihonhoitoon, juomiin ja kaikkeen virkistävään.

Sähköinen syaani tummilla taustoilla

Pimeällä pohjalla syaani muuttuu sähköiseksi. Pieni syaanivalo lähes mustalla tai laivastonsinisellä taustalla näyttää näytöltä, laserilta tai datavisualisoinnilta. Siksi sitä näkee ohjelmistoissa, peleissä ja tieteessä. Pidä suurin osa kuvasta tummana ja anna syaanin vallata kulma tai reuna. Tämän sarjan syaanin ja sinisen liukuväri on monikäyttöisin: toinen pää on kirkas ja toinen vahvasti sininen.

Tähän ilmeeseen rakennettuja kokonaisuuksia löytyy teknologian väripaleteista. Neonliukuvärit vievät ilmeen lähemmäs yöelämää.

Syaani limen ja magentan kanssa

Syaanista limeen kulkeva liukuväri käy mintun kautta ja tuntuu urheilulliselta, raikkaalta ja optimistiselta. Syaani ja magenta ovat cyberpunk-pari: kaksi painatuksen kolmesta pääväristä täydellä voimalla. Kuljeta yhdistelmä tumman indigokeskustan kautta, niin se muistuttaa öistä neonkatua lastenlelun sijaan. Magentaliukuväri käsittelee parin toista puolta.

Kontrastiansa: sanat syaanilla

Syaani on näytön vaaleimpia kylläisiä värejä. Valkoisen tekstin kontrasti puhtaaseen #00ffff-väriin on vain noin 1,3:1, eli se ei ole luettava. Musta samalla syaanilla saavuttaa noin 16,7:1. Valkoinen alkaa toimia syaanin syvetessä suunnilleen sävyyn #0e7490, jolla kontrasti on noin 5,4:1. Värikontrasti ja saavutettavuus selittää suhteet ja tavoitteet.

Tällaista harkintaa Gradiently tekee puolestasi. Automaattinen muste valitsee joka riville vaalean tai tumman tekstivärin Markin omasta paletista. Mark siirtää rauhallisimman ja parhaiten kontrastoivan alueensa sanojen taakse, joten kirkas syaanitausta ei jätä valkoista tekstiä pulaan.

Syaani CSS-liukuvärireunus

Tummissa käyttöliittymissä syaani toimii kauniisti reunana täytön sijaan. Liukuvärireunus pitää kortin luettavana ja lisää sähköistä tunnelmaa. Toteutus käyttää kahta taustaa, toista rajattuna täytteeseen ja toista reunukseen, joten pyöristetyt kulmat säilyvät.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}

Lisää toteutustapoja, myös animoituja reunuksia, löydät CSS-liukuvärireunuksista.

Mihin syaani liukuväri sopii

Syaani on luonteva valinta ohjelmistojulkaisuihin, kehittäjätyökaluihin, peleihin, uima-asuihin, juomiin ja kaikkeen nopealta tai kylmältä tuntuvaan. Pidä julkaisupäivänä sama syaani ilme ilmoituspostauksessa, linkin esikatselussa ja muutoslokin bannerissa, niin se tunnistetaan jokaisessa syötteessä. SaaS-startupin brändäys näyttää, miten rakennat identiteetin yhden kirkkaan värin ympärille.