Վեբ գունային գունապնակներ

Որոնք են վեբ գույների գունապնակները:

Գույները շատ կարևոր են վեբ դիզայներների և գրաֆիկական դիզայներների համար: Դիզայներները նկարագրում են այն գույները, որոնք մենք նկարագրում ենք որպես կապույտ, կարմիր և կանաչ առօրյա կյանքում՝ #fff002, #426215 կոդերով: Անկախ նրանից, թե ինչ տեսակի կոդավորման նախագիծ եք ձեռնարկում, հավանաբար ինչ-որ պահի կսկսեք աշխատել գույների հետ: Սա հատկապես օգտակար կլինի, եթե դուք սովորեք կոդավորել HTML-ի միջոցով, ինչպես շատ մարդիկ անում են վեբ էջեր նախագծելու համար:

Ի՞նչ է նշանակում Hex կոդը գույների մեջ:

Hex կոդը գույնը RGB ձևաչափով ներկայացնելու միջոց է՝ համատեղելով երեք արժեք: Այս գունային կոդերը HTML-ի անբաժանելի մասն են վեբ դիզայնի համար և մնում են գունային ձևաչափերը թվայնորեն ներկայացնելու կարևոր միջոց:

Hex գունային ծածկագրերը սկսվում են ֆունտի նշանով կամ հեշթեգով (#), որին հաջորդում են վեց տառեր կամ թվեր: Առաջին երկու տառերը/թվերը համապատասխանում են կարմիրին, հաջորդ երկուսը` կանաչին, իսկ վերջին երկուսը` կապույտին: Գույնի արժեքները սահմանվում են 00-ից մինչև FF արժեքներով:

Թվերն օգտագործվում են, երբ արժեքը 1-9 է: Տառերն օգտագործվում են, երբ արժեքը 9-ից մեծ է: Օրինակ՝

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

Hex գունավոր կոդեր և 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-ը վեբ հավելված է, որը պետք է իմանան բոլոր վեբ դիզայներները: Պարզապես մուտքագրեք սերմի գույնը, և հավելվածն անում է մնացածը ձեզ համար: Paletton-ը հուսալի ընտրություն է և հիանալի վեբ հավելված նրանց համար, ովքեր ոչինչ չգիտեն դիզայնի և սկսնակների համար:

2. Անվտանգ գույն

Եթե ​​WCAG-ը մտահոգություն է առաջացնում ձեր նախագծման գործընթացում, Color Safe-ը լավագույն գործիքն է օգտագործելու համար: Այս վեբ հավելվածի միջոցով դուք կարող եք ստեղծել գունային սխեմաներ, որոնք հիանալի կերպով միաձուլվում են և առաջարկում հարուստ հակադրություն՝ համաձայն WCAG ուղեցույցների:

Օգտագործելով Color Safe վեբ հավելվածը՝ դուք ապահովում եք, որ ձեր կայքը համապատասխանում է WCAG ուղեցույցներին և լիովին հասանելի է բոլորին:

3. Adobe Color CC

Դա հանրային օգտագործման համար ստեղծված Adobe-ի անվճար գործիքներից մեկն է: Դա մշակված վեբ հավելված է, որտեղ յուրաքանչյուրը կարող է զրոյից ստեղծել գունային սխեմաներ: Այն թույլ է տալիս ընտրել բազմաթիվ տարբեր գույների մոդելներից, որոնք լավագույնս համապատասխանում են ձեր կարիքներին: Ինտերֆեյսը սկզբում կարող է մի փոքր շփոթեցնող թվալ, բայց երբ ընտելանում եք դրան, գունային գեղեցիկ տարբերակներ ընտրելու խնդիր չպետք է ունենաք:

4. Մթնոլորտ

Ambiance-ը՝ անվճար վեբ հավելվածը, առաջարկում է նախապես պատրաստված վեբ գունային գունապնակներ համացանցի այլ գունային կայքերից: Այն աշխատում է ավանդական վեբ հավելվածի նման, որտեղ դուք կարող եք պահպանել գույները ձեր պրոֆիլում և ստեղծել ձեր սեփական սխեմաները զրոյից: Այս բոլոր վեբ գունային գունապնակները գալիս են Colorlovers-ից: Ambiance ինտերֆեյսը հեշտացնում է զննարկումը և ավելի մեծ ուշադրություն է դարձնում գունային փոխազդեցության վրա UI դիզայնի համար:

5. 0-ից 255

0to255-ը հենց այնպես գունային սխեմաների գեներատոր չէ, բայց այն կարող է օգնել ձեզ կարգավորել առկա գունային սխեմաները: Վեբ հավելվածը ձեզ ցույց է տալիս բոլոր տարբեր երանգները, որպեսզի կարողանաք անմիջապես խառնել և համապատասխանեցնել գույները:

Եթե ​​դժվարանում եք ստեղծել օգտագործելի գունային սխեման, կարող եք վերանայել վերը նշված հավելվածներից մի քանիսը:

Լավագույն վեբ գույների գունապնակները

Հետևյալ կայքերը օգտագործում են մի շարք վեբ գույների գունապնակներ՝ մեծ ազդեցություն ունենալու համար: Նրանք խնամքով ընտրված են իրենց առաջացրած հույզերի և փոխանցած հույզերի համար:

1. Օդոպոդ

Odopod-ը նախագծված էր միապաղաղ գունային գունապնակով, բայց նպատակ ուներ խուսափել տաղտկալի տեսքից իր գլխավոր էջում գրադիենտով: Մեծ տպագրությունը մեծ հակադրություն է առաջարկում: Պարզ է, թե այցելուները որտեղ են ցանկանում սեղմել:

2. Թորիի աչքը

Tori's Eye-ը մոնոխրոմ գունային սխեմայի հիանալի օրինակ է: Այստեղ երևում են պարզ, բայց հզոր գունային գունապնակի ազդեցությունը, որը կենտրոնացած է կանաչի երանգների շուրջ: Այս գունային սխեման սովորաբար հեշտ է հանել, քանի որ մեկ գույնի մեկ երանգը գրեթե միշտ կաշխատի նույն գույնի մեկ այլ երանգի հետ:

3. Պանրի գոյատևման հավաքածու

Կարմիրը չափազանց տարածված գույն է կայքի գունային գունապնակի համար: Այն կարող է փոխանցել զգացմունքների հարուստ խառնուրդ՝ դարձնելով այն բազմակողմանի: Ինչպես տեսնում եք Cheese Survival Kit կայքում, այն հատկապես ուժեղ է, երբ օգտագործվում է փոքր չափաբաժիններով: Կարմիրը փափկվում է ավելի չեզոք գույներով, իսկ կապույտը օգնում է CTA-ներին և այլ ոլորտներին, որտեղ բիզնեսը ցանկանում է հրավիրել այցելուի ուշադրությունը:

4. Ահրեֆս

Ahrefs-ը վեբկայքի օրինակ է, որն ազատորեն օգտագործում է գունային գունապնակը: Մուգ կապույտը հանդես է գալիս որպես գերակշռող գույն, բայց տատանումներ կան ամբողջ կայքում: Նույնը վերաբերում է նարնջագույն, վարդագույն և փիրուզագույն գույներին:

Գույների մասին ամենահաճախ տրվող հարցերը

1. Ո՞ր գույնն է լավագույնը կայքի համար:

Կապույտը, անկասկած, ամենաանվտանգ ընտրությունն է, քանի որ այն ամենահայտնի գույնն է 35%-ով: Այնուամենայնիվ, եթե ձեր մրցակիցները բոլորն օգտագործում են կապույտ, կարող է իմաստալից լինել «տարբերակել» ձեր առաջարկն ու ապրանքանիշը: Բայց դուք պետք է համոզվեք, որ դուք չեք ծանրաբեռնում այցելուներին:

2. Քանի՞ գույն պետք է ունենա կայքը:

Հաշվի առեք, որ ապրանքանիշերի 51%-ն ունի մոնոխրոմ լոգոներ, 39%-ը օգտագործում է երկու գույն, և ընկերությունների միայն 19%-ն է նախընտրում ամբողջական գունավոր լոգոները։ Այստեղից կարող եք տեսնել, որ 1, 2 և 3 գույներով կայքերն ավելի իմաստալից են, քան ծիածանի գույներով կայք ստեղծելու փորձերը: Այնուամենայնիվ, Microsoft-ի և Google-ի նման ապրանքանիշերը հավատում են ավելի շատ գույների հետ աշխատելու առավելություններին, քանի որ նրանք օգտագործում են առնվազն 4 պինդ գույներ իրենց ձևավորումներում:

3. Որտեղ պետք է օգտագործեմ գույները:

Աչք գրավող գույները պետք է խնայողաբար օգտագործել, հակառակ դեպքում դրանք կկորցնեն իրենց ազդեցությունը։ Այս էֆեկտը պետք է լինի փոխակերպման կետերում, ինչպիսիք են «Գնել հիմա» կոճակները: