Väri paletti brändäyksessä: Kuinka Logto luo mukautetun väri suunnitelman brändillesi

Väripsykologia näyttelee merkittävää roolia siinä, kuinka yleisöt havaitsevat brändin. Hyvin suunniteltu väri paletti voi parantaa brändin tunnistettavuutta ja jättää pysyvän vaikutelman. Tämän saavuttamiseksi olemme kehittäneet järjestelmän, joka hyödyntää HSL-väri mallia luodakseen harmonisia väriteemoja yhdestä perusväristä. Tässä postauksessa paljastamme värien luomisen salaisuudet.

Mikä on HSL-väri malli?#

HSL (Hue, Saturation, Lightness) väri malli on laajasti käytetty esitys digitaalisessa suunnittelussa, erityisesti sen intuitiivisen värien käsittelyn lähestymistavan ansiosta. HSL erottaa värin kromaattiset näkökohdat kolmeen erilliseen komponenttiin:

1. Sävy:

   Sävy viittaa väriin, jonka näemme, ja se esitetään asteina 360° ympyrässä. Jokainen kulma vastaa tiettyä väriä väri pyörässä—0° on punainen, 120° on vihreä, 240° on sininen, ja niin edelleen. Sävyarvon säätämällä voit siirtyä väristä toiseen, mikä tekee siitä tehokkaan työkalun täydentävien tai analogisten väri suunnitelmien luomisessa.

2. Kylläisyys:

   Kylläisyys määrittää värin intensiteetin tai puhtauden. Se vaihtelee 0 %:sta 100 %:iin, missä 0 % edustaa täysin kyllästymätöntä väriä, käytännössä harmaan sävyä, ja 100 % edustaa täyttä, elävää väriä. Säätelemällä kylläisyyttä suunnittelijat voivat luoda sekä eläviä että hillittyjä saman värisävyn versioita, mikä on erityisen hyödyllistä luotaessa väri hierarkioita tai korostettaessa tiettyjä elementtejä.

3. Kirkkaus:

   Kirkkaus hallitsee värin valoisuutta, joka vaihtelee 0 %:sta (musta) 100 %:iin (valkoinen). 50 %:n kirkkaudella väri on puhtaimmillaan; kun siirryt kohti 0 %:a tai 100 %:a, väri tummenee tai vaalenee vastaavasti. Tämä on erityisen hyödyllistä luotaessa erilaisia sävyjä ja pastellivärejä perusväristä, joita voidaan käyttää visuaalisen syvyyden ja kontrastin määrittämiseen suunnittelussa.

Miksi on tärkeää käyttää HSL-väri mallia?#

Logton yhteydessä HSL-mallin käyttö mahdollistaa joustavan ja dynaamisen väri teeman luomisen. Kun asiakas syöttää brändäysvärinsä, HSL helpottaa siihen liittyvien väri perheiden, perussävyn kirkkauden ja kylläisyyden vaihtelujen laskemista. Tämä kyvykkyys varmistaa, että luotu teema pysyy johdonmukaisena ja harmonisena, lujittaen brändin identiteettiä säilyttäen samalla optimaalisen käyttäjäkokemuksen. HSL-mallin intuitiivinen luonto mahdollistaa myös tarkemman värisäädön hallinnan, tehden siitä suositun valinnan sekä suunnittelijoiden että kehittäjien keskuudessa.

Väri paletti Logtossa#

Väri paletti mallimme on suunniteltu HSL-väri tilan perusteella. Aloittamalla ensisijaisesta väristä ja luo väri perheitä säätämällä sävy-, kylläisyys- ja kirkkaus arvoja. Tämä lähestymistapa varmistaa, että kaikki paletin värit ovat visuaalisesti yhteensopivia ja luovat harmonisen brändikokemuksen.

Tässä on esimerkki oletusväri paletti mallista, jota käytämme kirjautumiskokemus tuotteessa:

Frontend-koodi pohjassa olennaiset väri perheet määritellään CSS-muuttujina. Esimerkiksi ensisijainen väri perhe määritellään seuraavasti:

Viittaamalla näihin muuttujiin CSS-tyylitiedostoissa voimme helposti ylläpitää johdonmukaista visuaalista tyyliä koko alustalla.

Mukautetun brändäysväri paletin luominen#

Kuten aiemmin mainittiin, kehittäjät voivat tuoda omat brändäysvärinsä luodakseen mukautetun brändäysväri paletin. Tämän saavuttamiseksi tarjoamme yksinkertaisen väri laskentayksikön, joka ottaa perusvärin ja generoi vastaavat väri perheet.

Kulissien takana käytämme color.js hallinnoimaan värin käsittelyprosessia. Väri generointi funktio ottaa perusvärin, laskee vastaavat HSL-arvot ja generoi väri perheiden HEX-arvot vastaavasti.

1. Generoi perusväri elementti:

2. Määritä HSL-pohjainen väri laskentafunktio:

3. Generoi väri perheet:

Helppoa, eikö? Toistamalla yllä olevia vaiheita voimme luoda mukautetun väri paletin mille tahansa brändäysvärille. Tämä lähestymistapa varmistaa, että luotu väri paletti pysyy johdonmukaisena brändin identiteetin kanssa tarjoten samalla visuaalisesti miellyttävän kokemuksen käyttäjille.