Веб палети на бои

Кои се веб-палетите на бои?

Боите се многу важни за веб-дизајнерите и графичките дизајнери. Дизајнерите ги опишуваат боите што ги опишуваме како сина, црвена и зелена во секојдневниот живот со шифри како што се #fff002, #426215. Без разлика каков тип на проект за кодирање го преземате, веројатно ќе започнете да работите со бои во одреден момент. Ова ќе биде особено корисно ако научите да кодирате користејќи HTML, како што прават многу луѓе за да дизајнираат веб-страници.

Што значи Hex код во боите?

Хексадецимален код е начин да се претстави боја во RGB формат со комбинирање на три вредности. Овие шифри на бои се составен дел на HTML за веб дизајн и остануваат важен начин за дигитално претставување на формати на бои.

Хексадетичните шифри за боја започнуваат со знакот за фунта или хаштагот (#) проследен со шест букви или бројки. Првите две букви/цифри одговараат на црвено, следните две на зелени и последните две на сини. Вредностите на бојата се дефинирани во вредности помеѓу 00 и FF.

Броевите се користат кога вредноста е 1-9. Буквите се користат кога вредноста е поголема од 9. На пример:

• А = 10
• Б = 11
• C = 12
• D = 13
• Е = 14
• F = 15

Хексадецимален код на бои и RGB еквиваленти

Меморирањето на некои од најчестите хексадетични шифри за бои може да биде корисно за да ви помогне подобро да предвидите какви ќе бидат другите бои кога ќе го видите хексадецимален код за боја, а не само кога сакате да ги користите токму тие бои.

• Црвено = #FF0000 = RGB (255, 0, 0)
• Зелена = #008000 = RGB (1, 128, 0)v
• Сина = #0000FF = RGB (0, 0, 255)
• Бело = #FFFFFF = RGB (255,255,255)
• Слонова коска = #FFFFFF0 = RGB (255, 255, 240)
• Црна = #000000 = RGB (0, 0, 0)
• Греј = #808080 = RGB (128, 128, 128)
• Сребро = #C0C0C0 = RGB (192, 192, 192)
• Жолта = #FFFF00 = RGB (255, 255, 0)
• Виолетова = #800080 = RGB (128, 0, 128)
• Портокал = #FFA500 = RGB (255, 165, 0)
• Бургундија = #800000 = RGB (128, 0, 0)
• Обичка = #FF00FF = RGB (255, 0, 255)
• Вар = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Теал = #008080 = RGB (0, 128, 128)
• Маслиново = #808000 = RGB (128, 128, 0)
• Морнарско сина = #000080 = RGB (0, 0, 128)

Зошто боите на веб-страниците се важни?

Можеби мислите дека боите не ве засегаат, но според една студија, 85% од луѓето велат дека бојата има големо влијание врз производот што го купуваат. Тој исто така вели дека кога некои компании ги менуваат боите на нивните копчиња, забележале нагло зголемување или намалување на нивните конверзии.

На пример, Beamax, компанија која произведува екрани за проекција, забележа огромно зголемување од 53,1% во кликовите на црвените врски во споредба со сините врски.

Боите имаат огромно влијание не само на кликовите туку и на препознавањето на брендот. Студијата за менталното влијание на боите покажа дека боите го зголемуваат препознавањето на брендот во просек за 80%. На пример, кога ќе помислите на Кока-Кола, веројатно ќе замислите живописни црвени лименки.

Како да изберете шема на бои за веб-страници?

За да одлучите кои бои треба да ги изберете на вашата веб-страница или веб-апликација, прво мора да имате добро разбирање за тоа што го продавате. На пример, ако се обидувате да постигнете слика со повисок квалитет, висока класа, бојата што треба да ја изберете е виолетова. Меѓутоа, ако сакате да допрете до поширока публика, сино; Тоа е смирувачка и мека боја која е добро прилагодена за почувствителни теми како што се здравјето или финансиите.

Примерите погоре се докажани со многу студии. Но, бојата што ја избирате за вашата веб-страница зависи од сложеноста на вашиот дизајн и од типот на комбинации на бои. На пример, ако користите монохроматска палета за веб-дизајн, можеби ќе ви требаат седум или повеќе нијанси на таа боја за да добиете доволно разновидност на екранот. Треба да поставите бои за одредени делови од вашата страница, како што се текст, позадини, врски, бои за лебди, копчиња CTA и заглавија.

Сега „Како да изберете шема на бои за веб-локации и веб-апликации? Ајде да го разгледаме чекор по чекор:

1. Изберете ги вашите основни бои.

Најдобар начин да се одлучите за основната боја е да ги испитате боите што одговараат на расположението на вашиот производ или услуга.

Подолу наведовме неколку примери за вас:

• Црвена: Тоа значи возбуда или среќа.
• Портокалова: Тоа означува пријателско, забавно време.
• Жолта значи оптимизам и среќа.
• Зелена: Тоа значи свежина и природа.
• Сина: се залага за доверливост и сигурност.
• Виолетова: Претставува истакнат бренд со историја на квалитет.
• Браун: Тоа значи сигурен производ кој може да го користи секој.
• Црната боја значи луксуз или елеганција.
• Бело: се однесува на стилски производи кои се прифатливи за корисниците.

2. Изберете ги вашите дополнителни бои.

Изберете една или две дополнителни бои кои ја надополнуваат вашата главна боја. Ова идеално би требало да бидат боите што ја прават вашата главна боја „прекрасна“.

3. Изберете боја на позадина.

Изберете боја на позадина која ќе биде помалку „агресивна“ од вашата примарна боја.

4. Изберете ја бојата на фонтот.

Изберете боја за текстот на вашата веб-страница. Забележете дека цврстиот црн фонт е редок и не се препорачува.

Најдобрите веб палети на бои за дизајнери

Ако не можете да ја најдете бојата што ја барате во колекцијата на веб-палети на бои на Softmedal, можете да ги погледнете алтернативните страници за бои подолу:

Изборот на бои е долг процес и често бара многу дотерување за да се најдат вистинските бои. Во овој момент, можете да заштедите време со користење на 100% бесплатни веб-апликации кои ги креираат соодветните шеми на бои од нула.

1. Палетон

Paletton е веб апликација која треба да ја знаат сите веб дизајнери. Само внесете боја на семето и апликацијата го прави останатото за вас. Paletton е сигурен избор и одлична веб-апликација за оние кои не знаат ништо за дизајнот и за почетници.

2. Безбедно во боја

Ако WCAG е загрижен во вашиот процес на дизајнирање, Color Safe е најдобрата алатка за употреба. Со оваа веб-апликација, можете да креирате шеми на бои кои совршено се вклопуваат и нудат богат контраст според упатствата на WCAG.

Со користење на веб-апликацијата „Безбедна боја“, гарантирате дека вашата страница е во согласност со упатствата на WCAG и е целосно достапна за секого.

3. Adobe Color CC

Таа е една од бесплатните алатки на Adobe создадени за јавна употреба. Тоа е елаборирана веб-апликација каде секој може да креира шеми на бои од нула. Ви овозможува да изберете од многу различни модели на бои кои најдобро одговараат на вашите потреби. Интерфејсот може да изгледа малку збунувачки на почетокот, но штом ќе се навикнете на него, не би требало да имате проблем да изберете убави опции за боја.

4. Амбиент

Ambiance, бесплатна веб-апликација, нуди претходно направени веб-палети на бои од други веб-локации на бои. Работи како традиционална веб-апликација каде што можете да зачувувате бои на вашиот профил и да креирате свои шеми од нула. Сите овие веб палети на бои доаѓаат од Colorlovers. Интерфејсот Ambiance го олеснува прелистувањето и става поголем фокус на интеракција на бои за дизајнот на интерфејсот.

5. 0 до 255

0to255 не е точно генератор на шеми на бои, но може да ви помогне да ги прилагодите постојните шеми на бои. Веб-апликацијата ви ги прикажува сите различни нијанси за да можете веднаш да ги мешате и усогласите боите.

Ако ви е тешко да креирате употреблива шема на бои, можете да прегледате некои од горенаведените апликации.

Најдобрите веб палети на бои

Следниве сајтови користат различни веб-палети на бои за одличен ефект. Тие се внимателно избрани за емоциите што ги предизвикуваат и емоциите што ги пренесуваат.

1. Одопод

Odopod беше дизајниран со монотона палета на бои, но имаше за цел да избегне досадно да изгледа со градиент на неговата почетна страница. Големата типографија нуди одличен контраст. Јасно е каде посетителите сакаат да кликнат.

2. Окото на Тори

Окото на Тори е одличен пример за монохроматска шема на бои. Овде се гледаат ефектите на едноставна, но моќна палета на бои центрирани околу нијанси на зелена боја. Оваа шема на бои обично е лесно да се извлече, бидејќи една нијанса на една боја речиси секогаш ќе работи со друга нијанса со иста боја.

3. Комплет за преживување на сирење

Црвената е исклучително популарна боја за палетата на бои на веб-страница. Може да пренесе богата мешавина на емоции, што го прави разновиден. Како што можете да видите на веб-страницата Cheese Survival Kit, тој е особено моќен кога се користи во мали дози. Црвената боја се омекнува со понеутрални бои, а сината помага со CTA и други области каде што бизнисот сака да го привлече вниманието на посетителот.

4. Ахрефс

Ahrefs е пример за веб-локација која слободно ја користи палетата на бои. Темно сината делува како доминантна боја, но варијации постојат насекаде низ локацијата. Истото важи и за боите портокалова, розова и тиркизна.

Најчесто поставувани прашања за боите

1. Која е најдобрата боја за веб-локација?

Сината е дефинитивно најбезбедниот избор бидејќи е најпопуларна боја со 35%. Меѓутоа, ако сите вашите конкуренти користат сина боја, може да има смисла да се „диференцираат“ вашата понуда и бренд. Но, треба да се погрижите да не ги преоптоварувате посетителите.

2. Колку бои треба да има веб-страницата?

Сметајте дека 51% од брендовите имаат монохроматски логоа, 39% користат две бои, а само 19% од компаниите претпочитаат логоа со целосна боја. Оттука, можете да видите дека веб-локациите со 1, 2 и 3 бои имаат повеќе смисла отколку обидот да се создаде веб-локација со бои на виножитото. Сепак, брендовите како Microsoft и Google веруваат во предноста од работењето со повеќе бои бидејќи користат најмалку 4 цврсти бои во нивните дизајни.

3. Каде да ги користам боите?

Боите кои привлекуваат очи треба да се користат умерено, во спротивно ќе го изгубат ефектот. Овој ефект треба да биде во точките на конверзија како копчињата „Купи сега“.