Petrolinsininen liukuväri: laguunista syvänmeren sävyihin

Petrolinsininen liukuväri kulkee sinivihreiden sävyjen välillä: vaaleassa päässä on akvaa, keskellä selkeä petrolinsininen ja tummassa päässä mustemainen vihertävä sininen. Sinisen ja vihreän puolivälissä oleva petrolinsininen sulautuu helposti kumpaankin suuntaan eikä juuri koskaan muutu sameaksi. Alla olevat koodit vievät sinut aurinkoisesta laguunista syvänmereen. Mukana on ohjeita tehosteväreihin, CSS:ään ja kunkin sävyn typografiaan.

Petrolinsininen sävyasteikko liukuvärien pohjaksi

Useimmat hyvät petrolinsiniset liukuvärit käyttävät tämän asteikon kahdesta neljään sävyä. Valitse vierekkäiset sävyt pehmeään liukuun tai ohita kolme askelmaa, kun kaipaat dramaattisuutta. Alla olevia nimiä käytetään läpi artikkelin.

Vaaleat petrolinsiniset liukuvärit: laguuni ja matalikko

Vaalea petrolinsininen on puhdas, raikas ja hillityn iloinen. Se sopii hyvinvointiin, uima-altaisiin ja uima-asuihin, hammas- ja terveysklinikoille sekä tuotteisiin, joiden halutaan tuntuvan hygieenisiltä ilman puhtaan sinisen kylmyyttä. Liu’uta sitä valkoiseen tai vaaleaan minttuun, niin ilme pysyy pehmeänä.

Keskisyvät petrolinsiniset liukuvärit: riutta ja jade

Asteikon keskellä petrolinsininen on itsevarmimmillaan. Nämä sävyt sopivat sovelluksiin, finanssiteknologian näkymiin, vastuullisiin brändeihin ja koulutukseen. Niissä yhdistyvät sinisen luotettavuus ja vihreän elinvoima. Smaragdin suuntaan kallistuva sävy tuntuu luonnolliselta, sinisen suuntaan kallistuva tekniseltä.

Tummat petrolinsiniset liukuvärit: syvänmeri

Tummassa päässä petrolinsininen muuttuu lähes mustaksi, jossa on viileä vihreä vivahde. Se on petrolinsinisen hienostunein muoto: sopiva asianajotoimistoille, väkeville juomille, hotelleille, arkkitehtuuriin ja iltatilaisuuksiin. Se on myös erinomainen pohja yhdelle kirkkaalle tehostevärille, sillä mikään siinä ei kilpaile huomiosta. Tummat liu’ut voivat raidoittua pakatussa viennissä, joten pieni rakeisuus auttaa. Lue liukuvärien raidoittumisesta.

Lämpimät tehostevärit petrolinsiniselle liukuvärille

Petrolinsinisen vastaväri väriympyrässä on lämmin punaoranssi, joten koralli, persikka, aprikoosi ja kupari tuovat sen eloon. Pidä lämmin väri erillään itse liu’usta: petrolinsinisestä koralliin kulkeva liukuväri muuttuu keskeltä sameanharmaaksi. Käytä tehosteväriä mieluummin painikkeessa, otsikossa tai pienessä muodossa. Vastavärit selittää vetovoiman, ja koralliliukuväreistä löydät vastapuolen koodit.

Huomaa kolmas näyte: vastavärien hyvin vaaleat sävyt sulautuvat hyvin, koska menetettävää kylläisyyttä on vähän. Tästä on hyötyä pehmeissä pakkausilmeissä ja hääpainotuotteissa.

Petrolinsinisen liukuvärin valinta brändillesi

Petrolinsininen on suosittu terveys-, rahoitus- ja vastuullisuusbrändeissä, joten pelkkä sävy ei erotu. Erottuvuuden tuovat valitsemasi syvyys, siihen yhdistetty tehosteväri ja pinta. Aloita suunnitelman tehtävästä.

Petrolinsinisen liukuvärin CSS tummaan käyttöliittymään

Syvä petrolinsininen on kaunis vaihtoehto mustalle tai laivastonsiniselle tummassa käyttöliittymässä. Se tuntuu puhdasta mustaa pehmeämmältä ja antaa silti vaalealle tekstille runsaasti kontrastia. Tässä on sovelluksen pohjan tausta, jossa sivun yläosan takana on pehmeä hehku. Lue lisää tumman tilan suunnittelusta.

:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }

Luettava teksti petrolinsinisellä

Keskisyvä petrolinsininen on petollinen. #14b8a6 näyttää riittävän voimakkaalta valkoiselle tekstille, mutta sen kontrasti on noin 2,5:1 ja jää selvästi vaatimusten alle. Valkoinen vaatii Rakkolevän (#0f766e, noin 5,5:1) tai sitä tummemman sävyn. Käytä Akvalla ja sitä vaaleammilla sävyillä tekstivärinä Syvännettä #042f2e: teksti pysyy petrolinsinisen sävyperheessä ja on helppo lukea.

Viimeinen kohta on tärkeämpi kuin ensin näyttää. Kun liukuväri rajataan julkaisusta tarinaksi, valo siirtyy väärään paikkaan. Gradientlyssä Mark renderöidään jokaiseen kokoon, ja Designer voi tehdä muut koot puolestasi. Siten petrolinsininen ilme pysyy tasapainossa syötteessä, tarinassa ja verkkosivun pääkuvassa.