Litatöflur á Vefnum

Hvað eru litatöflur á vefnum?

Litir eru mjög mikilvægir fyrir vefhönnuði og grafíska hönnuði. Hönnuðir lýsa litunum sem við lýsum sem bláum, rauðum og grænum í daglegu lífi með kóða eins og #fff002, #426215. Sama hvaða tegund kóðunarverkefnis þú ert að taka að þér, þú munt líklega byrja að vinna með liti á einhverjum tímapunkti. Þetta mun vera sérstaklega gagnlegt ef þú lærir að kóða með HTML, eins og margir gera til að hanna vefsíður.

Hvað þýðir Hex kóða í litum?

Hexkóði er leið til að tákna lit á RGB sniði með því að sameina þrjú gildi. Þessir litakóðar eru óaðskiljanlegur hluti af HTML fyrir vefhönnun og eru áfram mikilvæg leið til að tákna litasnið stafrænt.

Sextán litakóðar byrja á pundamerkinu eða myllumerkinu (#) á eftir sex bókstöfum eða tölustöfum. Fyrstu tveir stafirnir/tölurnar samsvara rauðum, næstu tveir grænir og tveir síðustu bláum. Litagildi eru skilgreind í gildum á milli 00 og FF.

Tölur eru notaðar þegar gildið er 1-9. Bókstafir eru notaðir þegar gildið er meira en 9. Td:

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

Hex litakóðar og RGB jafngildi

Það getur verið gagnlegt að leggja á minnið suma af algengustu hex litakóðunum til að hjálpa þér að spá betur fyrir um hvaða aðrir litir verða þegar þú sérð hex litakóðann, ekki bara þegar þú vilt nota nákvæmlega þessa liti.

• Rauður = #FF0000 = RGB (255, 0, 0)
• Grænt = #008000 = RGB (1, 128, 0)v
• Blár = #0000FF = RGB (0, 0, 255)
• Hvítt = #FFFFFF = RGB (255.255.255)
• Fílabeini = #FFFFF0 = RGB (255, 255, 240)
• Svartur = #000000 = RGB (0, 0, 0)
• Grátt = #808080 = RGB (128, 128, 128)
• Silfur = #C0C0C0 = RGB (192, 192, 192)
• Gult = #FFFF00 = RGB (255, 255, 0)
• Fjólublár = #800080 = RGB (128, 0, 128)
• Appelsínugult = #FFA500 = RGB (255, 165, 0)
• Burgundy = #800000 = RGB (128, 0, 0)
• Fuchsia = #FF00FF = RGB (255, 0, 255)
• Lime = #00FF00 = RGB (0, 255, 0)
• Vatn = #00FFFF = RGB (0, 255, 255)
• Teal = #008080 = RGB (0, 128, 128)
• Olive = #808000 = RGB (128, 128, 0)
• Dökkblár = #000080 = RGB (0, 0, 128)

Af hverju eru litir vefsíðunnar mikilvægir?

Þú gætir haldið að litir hafi ekki áhrif á þig, en samkvæmt rannsókn segja 85% fólks að litur hafi mikil áhrif á vöruna sem það kaupir. Hann segir einnig að þegar sum fyrirtæki breyta hnappalitum sínum hafi þau tekið eftir mikilli aukningu eða minnkun á umskiptum þeirra.

Til dæmis, Beamax, fyrirtæki sem framleiðir skjávarpa, tók eftir gríðarlegri 53,1% aukningu á smellum á rauða tengla samanborið við bláa tengla.

Litir hafa gríðarleg áhrif ekki aðeins á smelli heldur einnig á vörumerkjaþekkingu. Rannsókn á andlegum áhrifum lita leiddi í ljós að litir auka vörumerkjaþekkingu að meðaltali um 80%. Til dæmis, þegar þú hugsar um Coca-Cola, muntu líklega ímynda þér líflegar rauðar dósir.

Hvernig á að velja litasamsetningu fyrir vefsíður?

Til þess að ákveða hvaða liti þú ættir að velja á vefsíðunni þinni eða vefforriti þarftu fyrst að hafa góðan skilning á því sem þú ert að selja. Til dæmis, ef þú ert að reyna að ná hágæða, hágæða mynd, þá er liturinn sem þú ættir að velja fjólublár. Hins vegar, ef þú vilt ná til breiðari markhóps, blár; Þetta er traustvekjandi og mjúkur litur sem hentar vel fyrir viðkvæmari efni eins og heilsu eða fjármál.

Dæmin hér að ofan hafa verið sönnuð með mörgum rannsóknum. En liturinn sem þú velur fyrir vefsíðuna þína fer eftir flókinni hönnun þinni og tegundum litasamsetninga. Til dæmis, ef þú ert að nota einlita vefhönnunartöflu gætirðu þurft sjö eða fleiri tónum af þeim lit til að fá næga fjölbreytni á skjánum. Þú þarft að stilla liti fyrir ákveðna hluta síðunnar þinnar, svo sem texta, bakgrunn, tengla, sveimaliti, CTA hnappa og hausa.

Nú "Hvernig á að velja litasamsetningu fyrir vefsíður og vefforrit?" Við skulum skoða það skref fyrir skref:

1. Veldu aðallitina þína.

Besta leiðin til að ákveða aðallit er að skoða litina sem passa við skap vörunnar eða þjónustunnar.

Hér að neðan höfum við skráð nokkur dæmi fyrir þig:

• Rauður: Það þýðir spenna eða hamingja.
• Appelsínugult: Það táknar vinalegan, skemmtilegan tíma.
• Gulur þýðir bjartsýni og hamingju.
• Grænt: Það þýðir ferskleika og náttúru.
• Blár: stendur fyrir áreiðanleika og öryggi.
• Fjólublátt: táknar virt vörumerki með sögu um gæði.
• Brown: Það þýðir áreiðanleg vara sem allir geta notað.
• Svartur þýðir lúxus eða glæsileika.
• Hvítt: Vísar til stílhreinra, notendavænna vara.

2. Veldu viðbótarlitina þína.

Veldu einn eða tvo liti til viðbótar sem bæta við aðallitinn þinn. Þetta ættu helst að vera litirnir sem gera aðallitinn þinn "töfrandi".

3. Veldu bakgrunnslit.

Veldu bakgrunnslit sem verður minna "árásargjarn" en aðalliturinn þinn.

4. Veldu leturlit.

Veldu lit fyrir textann á vefsíðunni þinni. Athugaðu að heilt svart letur er sjaldgæft og ekki mælt með því.

Bestu litatöflurnar á vefnum fyrir hönnuði

Ef þú finnur ekki litinn sem þú ert að leita að í Softmedal veflitatöflusafninu geturðu kíkt á aðrar litasíður hér að neðan:

Litaval er langt ferli og oft þarf mikla fínstillingu til að finna réttu litina. Á þessum tímapunkti geturðu sparað tíma með því að nota 100% ókeypis vefforrit sem búa til viðeigandi litasamsetningu frá grunni.

1. Paletton

Paletton er vefforrit sem allir vefhönnuðir ættu að þekkja. Sláðu bara inn frælit og appið gerir restina fyrir þig. Paletton er áreiðanlegur kostur og frábært vefforrit fyrir þá sem vita ekkert um hönnun og fyrir byrjendur.

2. Color Safe

Ef WCAG er áhyggjuefni í hönnunarferlinu þínu, þá er Color Safe besta tækið til að nota. Með þessu vefforriti geturðu búið til litasamsetningu sem blandast fullkomlega og býður upp á mikla birtuskil samkvæmt WCAG leiðbeiningum.

Með því að nota Color Safe vefforritið tryggirðu að síðan þín uppfylli WCAG leiðbeiningar og sé að fullu aðgengileg öllum.

3. Adobe Color CC

Það er eitt af ókeypis Adobe verkfærunum sem eru búin til fyrir almenning. Þetta er vandað vefforrit þar sem hver sem er getur búið til litasamsetningu frá grunni. Það gerir þér kleift að velja úr mörgum mismunandi litagerðum sem henta þínum þörfum best. Viðmótið kann að virðast svolítið ruglingslegt í fyrstu, en þegar þú hefur vanist því ættirðu ekki að eiga í neinum vandræðum með að velja fallega litavalkosti.

4. Andrúmsloft

Ambiance, ókeypis vefforrit, býður upp á tilbúnar litatöflur á vefnum frá öðrum litasíðum á vefnum. Það virkar eins og hefðbundið vefforrit þar sem þú getur vistað liti á prófílinn þinn og búið til þín eigin kerfi frá grunni. Allar þessar netlitatöflur koma frá Colorlovers. Ambiance viðmótið auðveldar vöfrun og leggur meiri áherslu á samspil lita fyrir HÍ hönnun.

5. 0-255

0to255 er ekki beint litasamsetning rafall, en það getur hjálpað þér að fínstilla núverandi litasamsetningu. Vefforritið sýnir þér alla mismunandi litbrigði svo þú getur blandað saman litum samstundis.

Ef þér finnst erfitt að búa til nothæft litasamsetningu geturðu skoðað sum af ofangreindum forritum.

Bestu litatöflurnar á vefnum

Eftirfarandi síður nota margvíslegar litatöflur á netinu með miklum árangri. Þeir eru vandlega valdir fyrir þær tilfinningar sem þeir vekja og tilfinningar sem þeir miðla.

1. Odopod

Odopod var hannaður með eintóna litavali, en miðaði að því að koma í veg fyrir að vera leiðinlegur með halla á heimasíðu sinni. Stór leturfræði býður upp á mikla birtuskil. Það er ljóst hvar gestir vilja að þeir smelli.

2. Tori's Eye

Tori's Eye er frábært dæmi um einlita litasamsetningu. Hér sjást áhrifin af einfaldri en kraftmikilli litavali sem miðast við græna tónum. Þetta litasamsetning er venjulega auðvelt að draga af, þar sem einn litur af einum lit mun næstum alltaf virka með öðrum lit í sama lit.

3. Cheese Survival Kit

Rauður er afar vinsæll litur fyrir litavali á vefsíðum. Það getur miðlað ríkulegum blöndu af tilfinningum, sem gerir það fjölhæft. Eins og þú sérð á vefsíðu Cheese Survival Kit er það sérstaklega öflugt þegar það er notað í litlum skömmtum. Rauður er mildaður með hlutlausari litum og blár hjálpar til við CTA og önnur svæði þar sem fyrirtækið vill vekja athygli gesta.

4. Ahrefs

Ahrefs er dæmi um vefsíðu sem notar litaspjaldið frjálslega. Dökkblár virkar sem ríkjandi litur, en afbrigði eru til um allan síðuna. Sama á við um litina appelsínugult, bleikt og túrkís.

Algengustu spurningarnar um liti

1. Hver er besti liturinn fyrir vefsíðu?

Blár er örugglega öruggasti kosturinn þar sem hann er vinsælasti liturinn með 35%. Hins vegar, ef samkeppnisaðilar þínir eru allir að nota blátt, gæti verið skynsamlegt að "greina á milli" tilboðs þíns og vörumerkis. En þú þarft að ganga úr skugga um að þú yfirgnæfir ekki gesti.

2. Hversu marga liti ætti vefsíðan að hafa?

Íhuga að 51% vörumerkja eru með einlita lógó, 39% nota tvo liti og aðeins 19% fyrirtækja kjósa fulllit lógó. Héðan geturðu séð að vefsíður með 1, 2 og 3 litum eru skynsamlegri en að reyna að búa til vefsíðu með regnbogalitum. Hins vegar trúa vörumerki eins og Microsoft og Google á kostinn við að vinna með fleiri liti þar sem þau nota að minnsta kosti 4 solida liti í hönnun sinni.

3. Hvar ætti ég að nota litina?

Áberandi liti ætti að nota sparlega, annars missa þeir áhrif. Þessi áhrif þurfa að vera í umreikningspunktum eins og "Kaupa núna" hnappa.