Вэб каляровыя палітры

Што такое сеткавыя каляровыя палітры?

Колеры вельмі важныя для вэб-дызайнераў і графічных дызайнераў. Дызайнеры апісваюць колеры, якія мы апісваем як сіні, чырвоны і зялёны ў паўсядзённым жыцці з дапамогай такіх кодаў, як #fff002, #426215. Незалежна ад таго, які тып праекта кадавання вы робіце, вы, верагодна, пачнеце працаваць з колерамі ў нейкі момант. Гэта будзе асабліва карысна, калі вы навучыцеся кадаваць з дапамогай HTML, як многія людзі робяць для дызайну вэб-старонак.

Што азначае шаснаццатковы код у колерах?

Шаснаццатковы код - гэта спосаб прадставіць колер у фармаце RGB шляхам аб'яднання трох значэнняў. Гэтыя каляровыя коды з'яўляюцца неад'емнай часткай HTML для вэб-дызайну і застаюцца важным спосабам прадстаўлення каляровых фарматаў у лічбавым выглядзе.

Шаснаццатковыя каляровыя коды пачынаюцца са знака фунта або хэштэга (#), за якім ідуць шэсць літар або лічбаў. Першыя дзве літары/лічбы адпавядаюць чырвонаму, дзве наступныя - зялёнаму і дзве апошнія - сінім. Значэнні колеру вызначаюцца ў значэннях паміж 00 і FF.

Лічбы выкарыстоўваюцца пры значэнні 1-9. Літары выкарыстоўваюцца, калі значэнне большае за 9. Напрыклад:

• А = 10
• B = 11
• С = 12
• D = 13
• E = 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)
• Слановая костка = #FFFFF0 = 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%. Напрыклад, калі вы думаеце пра Coca-Cola, вы, верагодна, уявіце сабе яркія чырвоныя банкі.

Як выбраць каляровую гаму для вэб-сайтаў?

Каб вырашыць, якія колеры вы павінны выбраць на сваім вэб-сайце або вэб-прыкладанні, вы павінны спачатку добра зразумець, што вы прадаеце. Напрыклад, калі вы спрабуеце дамагчыся больш высокай якасці, высакаякаснага малюнка, колер, які вы павінны выбраць, - фіялетавы. Аднак, калі вы хочаце ахапіць больш шырокую аўдыторыю, сіні; Гэта абнадзейлівы і мяккі колер, які добра падыходзіць для больш адчувальных тэм, такіх як здароўе або фінансы.

Прыведзеныя вышэй прыклады былі пацверджаны многімі даследаваннямі. Але колер, які вы выбіраеце для вашага сайта, залежыць ад складанасці вашага дызайну і тыпаў каляровых спалучэнняў. Напрыклад, калі вы выкарыстоўваеце манахромную палітру вэб-дызайну, вам можа спатрэбіцца сем і больш адценняў гэтага колеру, каб атрымаць дастатковую разнастайнасць на экране. Вам трэба задаць колеры для пэўных частак вашага сайта, такіх як тэкст, фон, спасылкі, колеры пры навядзенні курсора, кнопкі CTA і загалоўкі.

Цяпер «Як выбраць каляровую схему для вэб-сайтаў і вэб-прылажэнняў?» Давайце паглядзім на гэта крок за крокам:

1. Выберыце асноўныя колеры.

Лепшы спосаб вызначыцца з асноўным колерам - вывучыць колеры, якія адпавядаюць настрою вашага прадукту або паслугі.

Ніжэй мы пералічылі некалькі прыкладаў для вас:

• Чырвоны: гэта азначае хваляванне або шчасце.
• Аранжавы: гэта азначае сяброўскі, вясёлы час.
• Жоўты колер азначае аптымізм і шчасце.
• Зялёны: азначае свежасць і прыроду.
• Сіні: азначае надзейнасць і ўпэўненасць.
• Фіялетавы: уяўляе сабой выбітны брэнд з гісторыяй якасці.
• Браўн: Гэта азначае надзейны прадукт, які можа выкарыстоўваць кожны.
• Чорны азначае раскоша або элегантнасць.
• Белы: адносіцца да стыльным, зручным прадуктам.

2. Выберыце дадатковыя колеры.

Выберыце адзін або два дадатковых колеру, якія дапаўняюць ваш асноўны колер. У ідэале гэта павінны быць колеры, якія робяць ваш асноўны колер «ашаламляльным».

3. Выберыце колер фону.

Выберыце колер фону, які будзе менш «агрэсіўным», чым ваш асноўны колер.

4. Выберыце колер шрыфта.

Выберыце колер для тэксту на вашым сайце. Звярніце ўвагу, што аднатонны чорны шрыфт сустракаецца рэдка і не рэкамендуецца.

Лепшыя каляровыя палітры вэб для дызайнераў

Калі вы не можаце знайсці колер, які вы шукаеце, у калекцыі каляровых палітраў Softmedal, вы можаце паглядзець на альтэрнатыўных каляровых сайтах ніжэй:

Выбар колеру - гэта доўгі працэс і часта патрабуе шмат тонкай налады, каб знайсці правільныя колеру. У гэты момант вы можаце зэканоміць час, выкарыстоўваючы 100% бясплатныя вэб-прыкладанні, якія ствараюць адпаведныя каляровыя схемы з нуля.

1. Палеттон

Paletton - гэта вэб-прыкладанне, якое павінны ведаць усе вэб-дызайнеры. Проста ўвядзіце колер насення, і дадатак зробіць усё астатняе за вас. Paletton - надзейны выбар і выдатнае вэб-дадатак для тых, хто нічога не ведае аб дызайне, і для пачаткоўцаў.

2. Color Safe

Калі WCAG выклікае заклапочанасць у вашым працэсе праектавання, Color Safe з'яўляецца лепшым інструментам для выкарыстання. З дапамогай гэтага вэб-прыкладання вы можаце ствараць каляровыя схемы, якія ідэальна спалучаюцца і забяспечваюць багаты кантраст у адпаведнасці з рэкамендацыямі WCAG.

Выкарыстоўваючы вэб-прыкладанне Color Safe, вы гарантуеце, што ваш сайт адпавядае рэкамендацыям WCAG і цалкам даступны для ўсіх.

3. Adobe Color CC

Гэта адзін з бясплатных інструментаў Adobe, створаных для агульнага карыстання. Гэта складанае вэб-дадатак, дзе кожны можа ствараць каляровыя схемы з нуля. Гэта дазваляе выбраць з мноства розных каляровых мадэляў, якія найбольш адпавядаюць вашым патрэбам. Інтэрфейс можа здацца крыху заблытаным спачатку, але як толькі вы абвыкнеце да яго, у вас не ўзнікне праблем з выбарам прыгожых каляровых варыянтаў.

4. Атмасфера

Ambiance, бясплатнае вэб-прыкладанне, прапануе папярэдне створаныя каляровыя палітры з іншых каляровых сайтаў у Інтэрнэце. Ён працуе як традыцыйнае вэб-прыкладанне, дзе вы можаце захоўваць колеры ў сваім профілі і ствараць свае ўласныя схемы з нуля. Усе гэтыя каляровыя палітры вэб паходзяць ад Colorlovers. Інтэрфейс Ambiance палягчае прагляд і надае больш увагі ўзаемадзеянню колераў для дызайну карыстальніцкага інтэрфейсу.

5. ад 0 да 255

0to255 не зусім генератар каляровых схем, але ён можа дапамагчы вам дакладна наладзіць існуючыя каляровыя схемы. Вэб-прыкладанне паказвае вам усе розныя адценні, каб вы маглі імгненна змешваць і спалучаць колеры.

Калі вам цяжка стварыць прыдатную для выкарыстання каляровую схему, вы можаце прагледзець некаторыя з вышэйпералічаных прыкладанняў.

Лепшыя каляровыя палітры вэб

На наступных сайтах з вялікім эфектам выкарыстоўваюцца розныя каляровыя палітры вэб. Яны старанна адбіраюцца з улікам тых эмоцый, якія яны выклікаюць, і эмоцый, якія яны перадаюць.

1. Адапод

Odopod быў распрацаваны з манатоннай каляровай палітрай, але імкнуўся не выглядаць сумным з градыентам на сваёй галоўнай старонцы. Буйная тыпаграфіка прапануе вялікі кантраст. Зразумела, куды наведвальнікі хочуць, каб яны націснулі.

2. Вока Торы

Вока Торы - выдатны прыклад манахромнай каляровай гамы. Тут бачныя эфекты простай, але магутнай каляровай палітры, засяроджанай вакол адценняў зялёнага. Гэтую каляровую гаму звычайна лёгка зрабіць, бо адзін адценне аднаго колеру амаль заўсёды будзе сумяшчацца з іншым адценнем таго ж колеру.

3. Сырны камплект для выжывання

Чырвоны - надзвычай папулярны колер для каляровай палітры вэб-сайта. Ён можа перадаваць багатую сумесь эмоцый, што робіць яго універсальным. Як вы можаце бачыць на вэб-сайце Cheese Survival Kit, ён асабліва моцны пры ўжыванні ў невялікіх дозах. Чырвоны змякчаецца больш нейтральнымі колерамі, а сіні дапамагае з CTA і іншымі абласцямі, дзе кампанія хоча прыцягнуць увагу наведвальніка.

4. Ahrefs

Ahrefs - гэта прыклад вэб-сайта, які свабодна выкарыстоўвае каляровую палітру. Цёмна-сіні дзейнічае як пераважны колер, але існуюць варыянты па ўсім сайце. Тое ж самае тычыцца аранжавага, ружовага і бірузовага колераў.

Найбольш часта задаюць пытанні аб колерах

1. Які колер найлепшы для вэб-сайта?

Сіні, безумоўна, самы бяспечны выбар, так як гэта самы папулярны колер з 35%. Аднак, калі ўсе вашы канкурэнты выкарыстоўваюць сіні колер, можа мець сэнс "дыферэнцаваць" вашу прапанову і брэнд. Але вы павінны пераканацца, што вы не перагружаеце наведвальнікаў.

2. Колькі колераў павінен быць вэб-сайт?

Улічыце, што 51% брэндаў маюць манахромныя лагатыпы, 39% выкарыстоўваюць два колеры, і толькі 19% кампаній аддаюць перавагу поўнакаляровыя лагатыпы. Адсюль вы бачыце, што вэб-сайты з 1, 2 і 3 колерамі маюць больш сэнсу, чым спрабаваць стварыць вэб-сайт з колерамі вясёлкі. Тым не менш, такія брэнды, як Microsoft і Google, вераць у перавагі працы з большай колькасцю колераў, паколькі яны выкарыстоўваюць па меншай меры 4 суцэльныя колеру ў сваім дызайне.

3. Дзе выкарыстоўваць колеры?

Прыцягальныя колеры варта выкарыстоўваць умерана, інакш яны страцяць эфект. Гэты эфект павінен быць у кропках канверсіі, такіх як кнопкі "Купіць зараз".