Spletne Barvne Palete

Kaj so spletne barvne palete?

Barve so zelo pomembne za spletne oblikovalce in grafične oblikovalce. Oblikovalci opisujejo barve, ki jih v vsakdanjem življenju opisujemo kot modre, rdeče in zelene, s kodami, kot sta #fff002, #426215. Ne glede na to, kakšen projekt kodiranja se lotevate, boste verjetno na neki točki začeli delati z barvami. To bo še posebej koristno, če se naučite kodirati z uporabo HTML-ja, kot mnogi ljudje oblikujejo spletne strani.

Kaj pomeni hex koda v barvah?

Hex koda je način za predstavitev barve v formatu RGB s kombinacijo treh vrednosti. Te barvne kode so sestavni del HTML-ja za spletno oblikovanje in ostajajo pomemben način za digitalno predstavitev barvnih formatov.

Šestnajstiške barvne kode se začnejo z znakom funta ali hashtagom (#), ki mu sledi šest črk ali številk. Prvi dve črki/številki ustrezata rdeči barvi, naslednji dve zeleni in zadnji dve modri. Barvne vrednosti so definirane v vrednostih med 00 in FF.

Številke se uporabljajo, ko je vrednost 1-9. Črke se uporabljajo, če je vrednost večja od 9. npr.:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Šestnajstiške barvne kode in enakovredni RGB

Zapomnitev nekaterih najpogostejših šestnajstiških barvnih kod je lahko koristna, da vam pomaga bolje predvideti, katere druge barve bodo, ko vidite šestnajstiško barvno kodo, ne le, ko želite uporabiti te natančne barve.

• Rdeča = #FF0000 = RGB (255, 0, 0)
• Zelena = #008000 = RGB (1, 128, 0)v
• Modra = #0000FF = RGB (0, 0, 255)
• Bela = #FFFFFF = RGB (255.255.255)
• Slonokoščena = #FFFFF0 = RGB (255, 255, 240)
• Črna = #000000 = RGB (0, 0, 0)
• Siva = #808080 = RGB (128, 128, 128)
• Srebrna = #C0C0C0 = RGB (192, 192, 192)
• Rumena = #FFFF00 = RGB (255, 255, 0)
• Vijolična = #800080 = RGB (128, 0, 128)
• Oranžna = #FFA500 = RGB (255, 165, 0)
• Bordo = #800000 = RGB (128, 0, 0)
• Fuksija = #FF00FF = RGB (255, 0, 255)
• Lime = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Teal = #008080 = RGB (0, 128, 128)
• Olive = #808000 = RGB (128, 128, 0)
• Mornarsko modra = #000080 = RGB (0, 0, 128)

Zakaj so barve spletne strani pomembne?

Morda mislite, da barve na vas ne vplivajo, a glede na študijo 85 % ljudi pravi, da ima barva velik vpliv na izdelek, ki ga kupijo. Pravi tudi, da ko nekatera podjetja spremenijo barve gumbov, so opazila močno povečanje ali zmanjšanje konverzij.

Na primer, Beamax, podjetje, ki proizvaja projekcijske zaslone, je opazilo ogromno 53,1-odstotno povečanje klikov na rdeče povezave v primerjavi z modrimi povezavami.

Barve imajo velik vpliv ne le na klike, ampak tudi na prepoznavnost blagovne znamke. Študija o miselnem vplivu barv je pokazala, da barve povečajo prepoznavnost blagovne znamke v povprečju za 80%. Na primer, ko pomislite na Coca-Colo, si boste verjetno predstavljali živahne rdeče pločevinke.

Kako izbrati barvno shemo za spletna mesta?

Če se želite odločiti, katere barve izbrati na svoji spletni strani ali spletni aplikaciji, morate najprej dobro razumeti, kaj prodajate. Na primer, če poskušate doseči višjo kakovost, vrhunsko sliko, je barva, ki jo morate izbrati, vijolična. Če pa želite doseči širše občinstvo, modra; Je pomirjujoča in mehka barva, ki je zelo primerna za bolj občutljive teme, kot so zdravje ali finance.

Zgornje primere so dokazale številne študije. Toda barva, ki jo izberete za svojo spletno stran, je odvisna od kompleksnosti vašega dizajna in vrst barvnih kombinacij. Na primer, če uporabljate enobarvno paleto spletnega oblikovanja, boste morda potrebovali sedem ali več odtenkov te barve, da boste imeli dovolj raznolikosti na zaslonu. Za določene dele svojega spletnega mesta morate nastaviti barve, kot so besedilo, ozadja, povezave, barve lebdenja, gumbi CTA in glave.

Zdaj "Kako izbrati barvno shemo za spletna mesta in spletne aplikacije?" Oglejmo si ga korak za korakom:

1. Izberite svoje primarne barve.

Najboljši način, da se odločite za primarno barvo, je, da preučite barve, ki se ujemajo z razpoloženjem vašega izdelka ali storitve.

Spodaj smo za vas našteli nekaj primerov:

• Rdeča: Pomeni razburjenje ali srečo.
• Oranžna: označuje prijazen, zabaven čas.
• Rumena pomeni optimizem in srečo.
• Zelena: Pomeni svežino in naravo.
• Modra: pomeni zanesljivost in zagotovilo.
• Vijolična: predstavlja ugledno blagovno znamko z zgodovino kakovosti.
• Rjava: Pomeni zanesljiv izdelek, ki ga lahko uporabljajo vsi.
• Črna pomeni razkošje ali eleganco.
• Bela: Nanaša se na elegantne, uporabniku prijazne izdelke.

2. Izberite svoje dodatne barve.

Izberite eno ali dve dodatni barvi, ki dopolnjujeta vašo glavno barvo. V idealnem primeru bi morale biti to barve, zaradi katerih bo vaša glavna barva "osupljiva".

3. Izberite barvo ozadja.

Izberite barvo ozadja, ki bo manj "agresivna" kot vaša primarna barva.

4. Izberite barvo pisave.

Izberite barvo za besedilo na vašem spletnem mestu. Upoštevajte, da je polna črna pisava redka in ni priporočljiva.

Najboljše spletne barvne palete za oblikovalce

Če v zbirki spletnih barvnih palet Softmedal ne najdete barve, ki jo iščete, si lahko ogledate naslednja spletna mesta za barve:

Izbira barv je dolgotrajen proces in pogosto zahteva veliko natančnega prilagajanja, da bi našli prave barve. Na tej točki lahko prihranite čas z uporabo 100 % brezplačnih spletnih aplikacij, ki iz nič ustvarijo ustrezne barvne sheme.

1. Paletton

Paletton je spletna aplikacija, ki bi jo morali poznati vsi spletni oblikovalci. Samo vnesite barvo semena in aplikacija naredi ostalo namesto vas. Paletton je zanesljiva izbira in odlična spletna aplikacija za tiste, ki ne vedo nič o oblikovanju in za začetnike.

2. Barvno varno

Če je WCAG zaskrbljujoč v vašem procesu oblikovanja, je Color Safe najboljše orodje za uporabo. S to spletno aplikacijo lahko ustvarite barvne sheme, ki se odlično mešajo in ponujajo bogat kontrast v skladu s smernicami WCAG.

Z uporabo spletne aplikacije Color Safe zagotavljate, da je vaše spletno mesto v skladu s smernicami WCAG in je popolnoma dostopno vsem.

3. Adobe Color CC

Je eno od brezplačnih orodij Adobe, ustvarjenih za javno uporabo. To je dodelana spletna aplikacija, kjer lahko vsak ustvari barvne sheme iz nič. Omogoča vam izbiro med številnimi različnimi barvnimi modeli, ki najbolje ustrezajo vašim potrebam. Vmesnik se morda sprva zdi nekoliko zmeden, a ko se ga navadite, ne bi smeli imeti težav pri izbiri čudovitih barvnih možnosti.

4. Ambient

Ambiance, brezplačna spletna aplikacija, ponuja vnaprej izdelane spletne barvne palete z drugih barvnih mest na spletu. Deluje kot tradicionalna spletna aplikacija, kjer lahko shranite barve v svoj profil in ustvarite svoje sheme iz nič. Vse te spletne barvne palete prihajajo iz Colorlovers. Vmesnik Ambiance olajša brskanje in se bolj osredotoča na preplet barv za oblikovanje uporabniškega vmesnika.

5. 0 do 255

0to255 ni ravno generator barvnih shem, vendar vam lahko pomaga natančno nastaviti obstoječe barvne sheme. Spletna aplikacija vam pokaže vse različne odtenke, tako da lahko takoj mešate in uskladite barve.

Če se vam zdi težko ustvariti uporabno barvno shemo, si lahko ogledate nekatere od zgornjih aplikacij.

Najboljše spletne barvne palete

Naslednja spletna mesta za odličen učinek uporabljajo različne spletne barvne palete. Skrbno so izbrani glede na čustva, ki jih vzbujajo, in čustva, ki jih prenašajo.

1. Odopod

Odopod je bil zasnovan z monotono barvno paleto, vendar je želel preprečiti, da bi bil s prelivom na domači strani videti dolgočasen. Velika tipografija ponuja odličen kontrast. Jasno je, kam obiskovalci želijo, da kliknejo.

2. Torijevo oko

Torijevo oko je odličen primer enobarvne barvne sheme. Tu so vidni učinki preproste, a močne barvne palete, osredotočene na odtenke zelene. To barvno shemo je običajno enostavno izpeljati, saj bo en odtenek ene barve skoraj vedno deloval z drugim odtenkom iste barve.

3. Cheese Survival Kit

Rdeča je izjemno priljubljena barva za barvno paleto spletne strani. Lahko prenese bogato mešanico čustev, zaradi česar je vsestranski. Kot lahko vidite na spletni strani Cheese Survival Kit, je še posebej močan, če se uporablja v majhnih odmerkih. Rdeča se zmehča z bolj nevtralnimi barvami, modra pa pomaga pri CTA-jih in drugih področjih, kjer želi podjetje pritegniti pozornost obiskovalca.

4. Ahrefs

Ahrefs je primer spletne strani, ki prosto uporablja barvno paleto. Temno modra deluje kot prevladujoča barva, vendar obstajajo variacije po vsem mestu. Enako velja za barve oranžne, roza in turkizne.

Najpogostejša vprašanja o barvah

1. Katera je najboljša barva za spletno stran?

Modra je vsekakor najvarnejša izbira, saj je s 35 %. Če pa vsi vaši konkurenti uporabljajo modro, bi bilo morda smiselno "razločiti" svojo ponudbo in blagovno znamko. Vendar morate paziti, da obiskovalcev ne boste preobremenili.

2. Koliko barv naj ima spletna stran?

Upoštevajte, da ima 51 % blagovnih znamk enobarvne logotipe, 39 % uporablja dve barvi in ​​le 19 % podjetij daje prednost polnobarvnim logotipom. Od tu lahko vidite, da so spletna mesta z 1, 2 in 3 barvami bolj smiselna kot poskušati ustvariti spletno mesto z mavričnimi barvami. Vendar pa blagovne znamke, kot sta Microsoft in Google, verjamejo v prednost dela z več barvami, saj v svojih dizajnih uporabljajo vsaj 4 enobarvne barve.

3. Kje naj uporabim barve?

Barve, ki pritegnejo oči, je treba uporabljati zmerno, sicer bodo izgubile učinek. Ta učinek mora biti v točkah konverzije, kot so gumbi »Kupite zdaj«.