Ընտրեք գունային համադրություն առցանց: Թույն գույների համադրության խաբեության թերթիկ

Տղերք, մենք մեր հոգին դրեցինք կայքում: Շնորհակալություն դրա համար
այս գեղեցկությունը բացահայտելու համար: Շնորհակալություն ոգեշնչման և ոգեշնչման համար:
Միացե՛ք մեզ Ֆեյսբուքև հետ շփման մեջ

Սխեման թիվ 1. Կոմպլեմենտար համակցություն

Լրացուցիչ կամ հավելյալ հակադրվող գույներն են, որոնք գտնվում են Itten գունային անիվի հակառակ կողմերում: Նրանց համադրությունը շատ աշխույժ և եռանդուն տեսք ունի, հատկապես գունային առավելագույն հագեցվածությամբ:

Սխեման թիվ 2. Եռյակ - 3 գույների համադրություն

Իրարից նույն հեռավորության վրա ընկած 3 գույների համադրություն. Ապահովում է բարձր հակադրություն՝ պահպանելով ներդաշնակությունը: Նման կոմպոզիցիան բավականին աշխույժ տեսք ունի նույնիսկ գունատ և չհագեցած գույներ օգտագործելիս։

Սխեման թիվ 3. Նմանատիպ համադրություն

2-ից 5 գույների համադրություն, որոնք գտնվում են միմյանց կողքին գունային անիվի վրա (իդեալականը 2-3 գույն): Տպավորություն՝ հանգիստ, հանգստացնող: Նմանատիպ խլացված գույների համադրության օրինակ՝ դեղին-նարնջագույն, դեղին, դեղին-կանաչ, կանաչ, կապույտ-կանաչ:

Սխեման թիվ 4. Առանձին-կոմպլեմենտար համակցություն

Գույների փոխլրացնող համադրության տարբերակ, միայն հակառակ գույնի փոխարեն օգտագործվում են դրան հարող գույները։ Հիմնական գույնի և երկու լրացուցիչի համադրություն: Այս սխեման գրեթե նույնքան հակապատկեր է թվում, բայց ոչ այնքան լարված։ Եթե ​​վստահ չեք, որ կարող եք ճիշտ օգտագործել կոմպլեմենտար համակցությունները, օգտագործեք առանձին-լրացուցիչ կոմբինացիաներ։

Սխեման թիվ 5. Tetrad - 4 գույների համադրություն

Գունային սխեման, որտեղ մի գույնը գլխավորն է, երկուսը լրացնում են, իսկ մյուսը ընդգծում է շեշտադրումները: Օրինակ՝ կապույտ-կանաչ, կապույտ-մանուշակագույն, կարմիր-նարնջագույն, դեղին-նարնջագույն:

Սխեման թիվ 6. Քառակուսի

Առանձին գույների համակցություններ

• Սպիտակ. համադրվում է ամեն ինչի հետ: Լավագույն համադրությունը կապույտի, կարմիրի և սևի հետ։
• Բեժ՝ կապույտ, շագանակագույն, զմրուխտ, սև, կարմիր, սպիտակ:
• Մոխրագույն՝ ֆուքսիայի հետ, կարմիր, մանուշակագույն, վարդագույն, կապույտ:
• Վարդագույն՝ շագանակագույն, սպիտակ, անանուխ կանաչ, ձիթապտղի, մոխրագույն, փիրուզագույն, մանկական կապույտ:
• Ֆուքսիա (մուգ վարդագույն)՝ մոխրագույնով, արևայրուքով, լայմով, անանուխի կանաչով, շագանակագույնով:
• Կարմիր՝ դեղին, սպիտակ, շագանակագույն, կանաչ, կապույտ և սևի հետ:
• Կարմիր լոլիկ՝ կապույտ, անանուխ կանաչ, ավազոտ, սերուցքային սպիտակ, մոխրագույն։
• Բալի կարմիր՝ կապույտ, մոխրագույն, բաց նարնջագույն, ավազոտ, գունատ դեղին, բեժ:
• Ազնվամորու կարմիր՝ սպիտակ, սև, դամասկոսի վարդ։
• Դարչնագույն՝ վառ կապույտ, կրեմ, վարդագույն, մանուշակագույն, կանաչ, բեժ:
• Բաց շագանակագույն՝ գունատ դեղին, յուղալի սպիտակ, կապույտ, կանաչ, մանուշակագույն, կարմիր:
• Մուգ շագանակագույն՝ կիտրոնի դեղին, երկնագույն, անանուխ կանաչ, մանուշակագույն վարդագույն, լայմ:
• Կարմրավուն շագանակագույն՝ վարդագույն, մուգ շագանակագույն, կապույտ, կանաչ, մանուշակագույն:
• Նարնջագույն՝ կապույտ, կապույտ, մանուշակագույն, մանուշակագույն, սպիտակ, սև:
• Բաց նարնջագույն՝ մոխրագույն, շագանակագույն, ձիթապտղի:
• Մուգ նարնջագույն՝ գունատ դեղին, ձիթապտղի, շագանակագույն, բալի:
• Դեղին `կապույտ, մանուշակագույն, բաց կապույտ, մանուշակագույն, մոխրագույն, սև:
• Կիտրոնի դեղին: բալի կարմիր, շագանակագույն, կապույտ, մոխրագույն:
• Գունատ դեղին` ֆուքսիա, մոխրագույն, շագանակագույն, կարմիր, շագանակագույն, կապույտ, մանուշակագույն երանգներ:
• Ոսկե դեղին: մոխրագույն, շագանակագույն, կապույտ, կարմիր, սև:
• Ձիթապտուղ՝ նարնջագույն, բաց շագանակագույն, շագանակագույն:
• Կանաչ՝ ոսկե դարչնագույն, նարնջագույն, հազար, դեղին, շագանակագույն, մոխրագույն, կրեմ, սև, յուղալի սպիտակ:
• Աղցանի գույնը՝ շագանակագույն, շագանակագույն, գորշ, մոխրագույն, մուգ կապույտ, կարմիր, մոխրագույն:
• Փիրուզագույն՝ ֆուքսիա, բալի կարմիր, դեղին, շագանակագույն, կրեմ, մուգ մանուշակագույն:
• Էլեկտրիկը գեղեցիկ է ոսկե դեղինի, շագանակագույնի, բաց շագանակագույնի, մոխրագույնի կամ արծաթագույնի հետ միասին:
• Կապույտ՝ կարմիր, մոխրագույն, շագանակագույն, նարնջագույն, վարդագույն, սպիտակ, դեղին:
• Մուգ կապույտ՝ բաց մանուշակագույն, երկնային կապույտ, դեղնավուն կանաչ, շագանակագույն, մոխրագույն, գունատ դեղին, նարնջագույն, կանաչ, կարմիր, սպիտակ:
• Lilac: նարնջագույն, վարդագույն, մուգ մանուշակագույն, ձիթապտղի, մոխրագույն, դեղին, սպիտակ:
• Մուգ մանուշակագույն՝ ոսկե դարչնագույն, գունատ դեղին, մոխրագույն, փիրուզագույն, անանուխ կանաչ, բաց նարնջագույն:
• Սևը բազմակողմանի է, էլեգանտ, տեսք ունի բոլոր համադրություններում, լավագույնս նարնջագույնի, վարդագույնի, աղցանի, սպիտակի, կարմիրի, յասամանագույնի կամ դեղինի հետ:

Կայքի գունային սխեման ընտրելը դիզայնի գործընթացի ամենակարևոր քայլերից մեկն է: Գույների համադրություն ընտրելը բավականին բարդ և ստեղծագործական գործընթաց է։ Բարեբախտաբար, կան բազմաթիվ ծառայություններ, որոնք կարող են զգալի աջակցություն ցուցաբերել ճիշտ ընտրություն կատարելու համար:

Այս ակնարկում նշված որոշ ռեսուրսներ թույլ են տալիս ընտրել մեծ թվով պատրաստի գունային սխեմաներ, իսկ մյուսները թույլ են տալիս ինտերակտիվ կերպով կառուցել ձեր սեփական սխեման:

Կուլեր

Adobe Kuler-ը պարունակում է նախապես պատրաստված գունային սխեմաների մեծ գրադարան: Դուք կարող եք դիտել դիագրամը առցանց և ներբեռնել այն Adobe Creative Suite-ի արտադրանքներում օգտագործելու համար:

Color Lovers-ը ներկայումս ունի մոտ 2 միլիոն օգտագործողի կողմից ստեղծված գունային սխեմաներ: Դուք կարող եք դիտել դրանք դասավորված ըստ ամսաթվի, վարկանիշի, դիտումների քանակի:

ColoRotate-ն ունի նախապես պատրաստված գունային սխեմաների գրադարան: Նաև կարող եք ստեղծել ձեր սեփական սխեման եզակի 3D գործիքի միջոցով: Գունային սխեման կարող է օգտագործվել անմիջապես Photoshop-ում և Fireworks-ում՝ օգտագործելով ColoRotate հավելվածը:

Color Scheme Designer-ը թույլ է տալիս ընտրել գունային սխեմայի տեսակը (մոնո, կոմպլեմենտար, եռյակ, տետրադ, անալոգային): Այնուհետև հնարավոր կլինի կարգավորել գույները և տեսնել սխեմայի ազդեցությունը օրինակի վրա:

ColorSchemer-ն ունի օգտվողների կողմից ստեղծված գունային սխեմաների մեծ գրադարան: Դուք կարող եք դրանք տեսակավորել ըստ տեղադրման ամսաթվի, վարկանիշի կամ ներբեռնումների քանակի:

Pictaculous-ը պարզ առցանց գունային սխեմաների ստեղծման գործիք է: Դուք կարող եք վերբեռնել պատկեր, և ծառայությունը կստեղծի դիագրամ՝ պատկերի հետ օգտագործելու համար:

Գունավոր Spire

Color Spire-ը շատ հեշտ օգտագործման ծառայություն է: Դուք ընտրում եք հիմնական գույնը, և այն առաջարկում է գունային սխեման: Դուք կարող եք նաև տեսնել սխեմայի տեսքը պարզ ձևանմուշի վրա:

Փոքր, նորաձև և կոկիկ գույների ընտրիչ HTML էջի ձևավորման և համապատասխան գույներ պահանջող այլ առաջադրանքների համար:

Տեսնենք, թե ինչ կարող է անել այս ծրագիրը:

Գույնի կետի կարգավորում

Քանի որ ծրագիրը տեղադրում չի պահանջում, պարզապես պահեք արխիվը ձեր կոշտ սկավառակի վրա, փաթեթավորեք այն հարմար վայրում, բացեք թղթապանակը և գործարկեք ֆայլը .exe ընդլայնմամբ: Լռելյայնորեն, ծրագիրը սկսվում է որպես փոքր կոճակ.

Ծրագրի հետ աշխատելը

Մենք սեղմում ենք այս պատկերակը և մեր առջև բացվում է ծրագրի պատուհանը.

Էկրան

Այս ներդիրում ծրագիրը թույլ է տալիս անմիջապես էկրանից «վերցնել» ցանկացած գույն։ Այսինքն՝ էկրանի ցանկացած հատվածից, որը տեսանելի էր ծրագրի գործարկման պահին։ Ամբողջ էկրանը ցուցադրվում է փոքրացված չափերով «Ընտրել տարածք» պատուհանում:

Եթե ​​սեղմեք այս պատուհանի որևէ մասի վրա, այն կհայտնվի հաջորդ փոքր պատուհանում՝ «Ընտրեք գույն»: Այստեղ արդեն կարող եք ավելի ճշգրիտ նպատակադրել և գույնը վերցնել կոնկրետ կետից։

Նաև այս պատուհանի աջ մասում կան սեղմատախտակին պատճենելու օժանդակ կոճակներ, իսկ ներքևում «Թարմացնել» (թարմացնում է էկրանի բովանդակությունը) և «Դիմել» (պահպանում է ընտրված գույնը և պատուհանը փոխարկում «Ընտրություն» կոճակների: «ներդիր):

Ընտրություն

Ահա գույների հեշտ համընկնման հիմնական գործիքները՝ «Tile», «Circle», «Web» և «Win», որոնք փոխարկվում են լրացուցիչ ներդիրների միջոցով:

Այս գործիքների հետ աշխատելը դժվար չէ: Պարզապես սեղմեք ձեր նախընտրած գույնի վրա, կարգավորեք այն RGB սլայդերներով (կամ HSV, եթե այս ձևաչափը ձեզ ավելի մոտ է) և տեսեք՝ այն համապատասխանում է, թե ոչ:

Եթե ​​ձեզ դուր է գալիս ընտրված գույնը, կարող եք պատճենել դրա կոդը «Տեքստի ներկայացում» տողից։ Ավելին, կոդը կարելի է ընտրել նաև ստանդարտ ձևաչափերից որևէ մեկում՝ սեղմելով փոքր սլաքը՝ ցանկն ընդլայնելու համար:

Նաև ուշադրություն դարձրեք վերին աջ անկյունում գտնվող երրորդ գույնի պատուհանին: Բացի ընտրված գույնից (ուղղահայաց շերտ), այն ցույց է տալիս ևս երեք գույն, որոնք լավ են միաձուլվում ընտրվածի հետ:

Այսպիսով, ծրագիրը անմիջապես առաջարկում է մի քանի համապատասխան գույներ, որոնք կարող են կիրառվել նախագծված դիզայնի այլ տարրերի վրա:

Ծրագիրն ունի բազմաթիվ տարբեր օժանդակ կոճակներ: Նրանց նպատակը պարզելու համար պարզապես մկնիկի օգնությամբ սավառնեք դրանց վրա և կարդացեք ծրագրի պատուհանի ամենաներքևում երևացող խորհուրդները:

Կարգավորումներ

Այստեղ դուք կարող եք հարմարեցնել որոշ պարամետրեր, ինչպիսիք են տառատեսակի տեսակը և չափը և ծրագրի որոշ կոսմետիկ հատկություններ: Ծրագրի հետ աշխատելն ավելի հարմար կլինի, եթե հանեք «Բացել «Էկրանի» ներդիրում» և «Գործարկել մինի պատուհանի ռեժիմով» վանդակները:

Ծրագրի մասին

Այս վերջին ներդիրում կարող եք գտնել ծրագրավորողի կոնտակտները և տեսնել, թե արդյոք թողարկվել է ծրագրի նոր տարբերակը՝ այցելելով նրա կայք։

Ծրագրի առավելություններն ու թերությունները

• գույների ընտրության համար կան բազմաթիվ տարբեր գործիքներ (շրջանակ, սալիկներ և այլն);
• թույլ է տալիս հարմարավետորեն համեմատել գույները՝ ծրագրի պատուհանը մոտեցնելով էկրանի այլ տարրերին.
• կան հուշումներ բոլոր կոճակների համար:

• մի փոքր բարդ ինտերֆեյս;
• վազում է նվազագույնի հասցնել և «Էկրանի» ներդիրում այնքան էլ հարմար չէ (չնայած այն կարող եք անջատել պարամետրերում);
• ոչ բոլորին դուր կգա ծրագրի պատուհանի գույնը:

գտածոներ

Ծրագիրը բավականին հզոր է անվճարի համար, այն տրամադրում է գրեթե այն ամենը, ինչ ձեզ անհրաժեշտ է կայքի դիզայն ստեղծելիս գույները հարմար ընտրելու համար: Կան որոշ աննշան թերություններ, ինչպիսիք են ծրագրի պատուհանի գույնը (յասամանագույն - ոչ բոլորի համար), բայց դրանք չեն խանգարում դրա հետ աշխատելուն:

P.S. Թույլատրվում է ազատ պատճենել և մեջբերել այս հոդվածը, պայմանով, որ նշված է աղբյուրի բաց ակտիվ հղումը և պահպանվում է Ռուսլան Բոգդանովի հեղինակությունը։

P.P.S. Եթե ​​ծրագիրը ձեզ բարդ թվաց, կան ավելի պարզ տարբերակներ.

Գույնը դիզայների աշխատանքի ամենակարեւոր տարրերից մեկն է: Բայց որպես հայեցակարգ, դա բավականին դժվար է տիրապետել. գունապնակների բազմաթիվ համակցությունները հաճախ դժվարացնում են որոշել, թե ինչպես լավագույնս ոճավորել վեբ էջերի և հավելվածների ինտերֆեյսը: Նախկինում մենք հրապարակել էինք ընտրության գործիքների ակնարկներ և. Եվ այսօր մենք ցանկանում ենք ընդլայնել թեման՝ բլոգում տեղադրելով Նիկ Բաբիչի «Essential Color Tools for UX Designers» հոդվածի թարգմանությունը:

Այս գրառումը պարունակում է վեբկայքերի և UX դիզայնի լավագույն գույների համապատասխան ծառայությունների ցանկը, որը ձեզ շատ ժամանակ կխնայի: Այս նախագծերի միջոցով դուք կսովորեք.

• որտեղից ոգեշնչել;
• ինչպես ստեղծել ձեր սեփական գունապնակը;
• ինչպես դիզայնը հասանելի դարձնել գունային տեսողության խանգարումներ ունեցող մարդկանց համար:

1. Ոգեշնչում փնտրել

Բնության գույները

Նկարիր քեզ շրջապատող աշխարհից: Ձեզ անհրաժեշտ է միայն նայել շուրջը: Նորաձև հագուստ, գրքերի շապիկներ, ինտերիերի ձևավորում... այնքան զարմանալի բաներ կան ձեր շուրջը: Սակայն գունային լավագույն համադրությունները բնության գույներն են: Նկարեք գեղեցիկ պահը և փորձեք ստեղծել ձեր ընտրությունը՝ հիմնվելով կոնկրետ պատկերի վրա:

Գունային լավագույն համադրությունները հանդիպում են բնության մեջ։ Ցանկացած լուսանկարից կարող եք ստանալ գունային սխեման

Վարքագիծ

Հանրաճանաչ ծառայությունում դուք կգտնեք հետաքրքիր աշխատանքներ՝ ներառված իրենց ոլորտի իրական մասնագետների լավագույն առցանց պորտֆելներում։ Այս կայքը նաև ոգեշնչման հիանալի աղբյուր է: Նախագծերի նոր արժանի օրինակներ տեսնելու համար պարզապես ընտրեք ձեր ուզած գույնը:

Դրիբբլ գույներ

Dribbble-ը լավագույններից մեկն է, որը օգտակար կլինի օգտատիրոջ միջերես ստեղծելիս: Եթե ​​ցանկանում եք տեսողականորեն հասկանալ, թե ինչպես են ուրիշներն օգտագործել որոշակի գույն, գնացեք dribbble.com/colors և մուտքագրեք ձեր ուզած արժեքը:

Կայքի համար գույն ընտրելիս այստեղ կարող եք սահմանել դրա նվազագույն տոկոսը՝ փորձ, օրինակ, փորձեք սահմանել 30% կապույտ:

Փորձեք Dribbble-ում որոշակի գույնի նվազագույն տոկոս սահմանել

դիզայնի ոգեշնչում

Designspiration-ը օգտակար գործիք է հիմնականում նրանց համար, ովքեր արդեն ունեն գունային համադրության գաղափարներ և ցանկանում են տեսնել նման համակցությունների օրինակներ: Ընտրեք 1-ից 5 տարբերակները, և դուք կգտնեք նկարներ, որոնք համապատասխանում են նշված պարամետրերին:

Designspiration-ում դուք կգտնեք գունային համադրությունների տարբեր օրինակներ

Tineye Multicolr

Tineye Multicolr գունային համընկնման ծառայության միջոցով կարող եք որոշել պատկերների ցանկալի տիրույթը և նույնիսկ սահմանել դրանցից յուրաքանչյուրի տոկոսը (հարաբերակցությունը): Կայքը ինտեգրված է Flickr-ի 20 միլիոն Creative Commons լուսանկարների տվյալների բազայի հետ: Սա, անկասկած, կատարյալ գունապնակ գտնելու ամենաարագ ուղիներից մեկն է:

Colorzilla

ColorZilla-ն ընդլայնում է Chrome և Mozilla Firefox բրաուզերներում տեղադրման համար: Այն ներառում է այնպիսի գործիքներ, ինչպիսիք են աչքի կաթիլը, գունապնակների զննումը, ստեղծումը և այլն:

ColorZilla ընդլայնումը հասանելի է Chrome-ում և Firefox-ում

Shutterstock Spectrum

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

Ավելին, ձեզ բաժանորդագրություն պետք չէ, քանի որ նկարի նախնական գնահատումը բավական կլինի (նույնիսկ չնայած այն հանգամանքին, որ այն ունի «ջրանիշ»):

W3Schools

Վերջերս մի բլոգ վերանայեց ընտրված W3Schools-ից: Թեմայի վերաբերյալ շատ տեղեկություններ կան՝ սկսած դրանց անուններից / երանգների կոդերից, ներկապնակների համակցությունների տեսությունից և վերջացրած տարբեր ձևաչափերի նկարագրությամբ՝ HEX, RGB, CMYK, HWB և այլն: Դուք նաև կգտնեք պարզ գեներատորներ, փոխարկիչներ: և նմանատիպ «մինի ծառայություններ»: Ընդհանուր առմամբ, հետաքրքիր է տեսնել:

2. Ստեղծեք գունային գունապնակ

Նյութերի դիզայնի գունավոր գործիք

Material Design Color Tool կայքի գույնի ընտրիչ ծառայությունը թույլ է տալիս ստեղծել, համօգտագործել և նախադիտել գունային սխեմաներ ձեր ընտրության համար: Նրա օգտակար գործառույթներից մեկը գույների ցանկացած համակցության մատչելիության մակարդակի չափումն է։

հովացուցիչներ

Coolors-ը բազմագույն գունապնակ ստեղծելու կայք է: Պարզապես ֆիքսեք որոշակի գույն և սեղմեք բացատ սանդղակը: Գործիքը լավ է նաև նրանով, որ դուք կստանաք մեկից ավելի արդյունք, բայց կարող եք մի քանի տարբերակ ստեղծել՝ փոխելով միայն նախնական տվյալները:

Գունային սխեման Coolors-ում` հիմնված լուսանկարի վրա

Adobe Color CC

Գույնի համապատասխանության ծառայությունը Adobe Color CC (նախկին Kuler) այժմ բավականին տարածված է: Այն անվճար հասանելի է ինտերնետում, բայց կա նաև նկարագրող տարբերակ: Այս վեբ հավելվածի միջոցով դուք կպատրաստեք ձեր գունապնակը՝ օգտագործելով գունային անիվը.

Կամ պատրաստի պատկերից կարող եք կոնկրետ արդյունք ստանալ.

Կայքի գույնի ընտրություն՝ ըստ նկարի

Այստեղ կան հարյուրավոր պատրաստի համակցություններ, փնտրեք դրանք «Դիտել» բաժնում.

Եթե ​​դուք օգտագործում եք աշխատասեղանի տարբերակը, կարող եք մեկ սեղմումով արտահանել ձեր ստեղծած գունային համակարգը InDesign, Photoshop և Illustrator:

գունապնակ

Այն հաճախ համեմատվում է նախորդ Adobe Color CC-ի հետ, քանի որ այս նմուշները շատ նման են: Միակ տարբերությունն այն է, որ Paletton-ում դուք չեք սահմանափակվում հինգ տարբերակով, բայց կարող եք փորձարկել լրացուցիչ ինտերֆեյսի երանգներ:

Բացի այդ, դուք կարող եք դիտել. Մյուսների հետ միասին հավելվածը թույլ է տալիս աշխատել ցանկացած վայրում՝ պարզապես օգտագործելով ձեր սմարթֆոնը։ Բացի ուղղակիորեն գունային գունապնակներ ստեղծելուց/արտահանելուց, այստեղ դուք կարող եք ընտրել որոշակի գույներ նկարներից կամ օգտագործել հիմնական տարբերակները:

3. Ներկապնակը հասանելի դարձնելը

Ներկայումս գույների ընկալման խանգարումները շատ ավելի տարածված են, քան մենք կարծում ենք: Աշխարհում մոտ 285 միլիոն մարդ տեսողության հետ կապված խնդիրներ ունի։ Դուք միշտ պետք է ստուգեք, թե արդյոք ձեր ընտրածը հասանելի է այդպիսի օգտատերերի համար:

WebAIM Գույնի հակադրության ստուգիչ

Որոշ հնչերանգներ հիանալի կերպով համակցված են միմյանց հետ, իսկ մյուսները՝ բոլորովին հակառակը։ Հսկայական թվով նախագծեր չեն անցնում A/A թեստը, և սա փաստ է։ Շատ կարևոր է ստուգել ինտերֆեյսի տեսողական ձևավորումը և հնչերանգների հակադրությունը, հատկապես, եթե էջում շատ տեքստ կա: Այս նպատակների համար օգտագործեք կայքի գույներն ընտրելիս:

WebAIM Color Contrast Checker-ը վեբ վրա հիմնված գործիք է, որը ստուգում է գունային կոդերը տասնվեցական արժեքներով:

հովացուցիչներ

Այս ծառայության մասին մենք արդեն նշել ենք վերևում: Ի թիվս այլ բաների, Coolors-ը կօգնի նաև ստուգել ձեր հորինած գունապնակը՝ դալտոնիկության համար:

Դալտոնիկության տեսակը սխեմայի մեջ

«Նորմալ» ռեժիմի փոխարեն ընտրեք տեսողության խնդրի տեսակը, որը ցանկանում եք մոդելավորել: Արդյունքում դուք հստակ կհասկանաք, թե ինչպես կտեսնի ձեր դիզայնը այն մարդը, ով չի կարողանում տարբերել որոշակի գույները։

Ահա թե ինչպես է պրոտանոմալիայով հիվանդ մարդը ներկապնակ է տեսնում

NoCoffee Vision Simulator Chrome-ի համար

NoCoffee Vision Simulator կայքի օգնությամբ դուք կարող եք տեսնել, թե ինչպես են դալտոնիկ կամ թույլ տեսողություն ունեցող մարդիկ ընկալում որոշակի վեբ էջեր։ Օրինակ, «Ախրոմատոպսիա» տարբերակը «Գույնի անբավարարություն» բաժնում նշելով, դուք կտեսնեք վեբ էջը մոխրագույն:

Ահա թե ինչ տեսք ունի CNN-ի նախագիծը դեյտերանոպիա ունեցող մարդու համար

Եզրակացություն

Հոդվածում նշված վեբկայքերի և UX դիզայնի բոլոր գունային համադրման ծառայությունները անպայման կօգնեն ձեզ հետաքրքիր և արդյունավետ տիրույթի որոնման հարցում: Բայց հիշեք, որ զարմանալի գունապնակներ ստեղծելու սովորելու լավագույն միջոցը շատ պրակտիկա և փորձարկումն է:

Գույնը լայնորեն կիրառվում է դիզայնի մեջ՝ այն թույլ է տալիս «վերակենդանացնել» բովանդակությունը՝ ստեղծել իմաստային կապ տարրերի միջև, աշխատանքը լցնել հույզերով և տրամադրությամբ։ Սկսնակ դիզայներները ընտրում են պատահական գույներ, բայց կան գույները ավելի իմաստալից օգտագործելու եղանակներ: Դիտարկենք 4 նման մեթոդ՝ կազմակերպված պարզից բարդ սկզբունքով։

1. Օգտագործեք հայտնի գամմա

brandcolors.net կայքում հավաքվել են հայտնի ապրանքանիշերի ավելի քան 500 գունային համակցություններ։ Yandex-ը, Google-ը, Burger King-ն իրենց բոլոր ապրանքներում օգտագործում են նույն գունապնակը։ Այս ապրանքանիշերը և դրանց գույները ծանոթ և սիրված են շատերի կողմից: Մուտքագրեք անունը որոնման տողում կամ ոլորեք էջը, սեղմեք ցանկալի ապրանքանիշի և գույնի վրա. դրա կոդը կպատճենվի clipboard-ում:

2. Ընտրեք պատրաստի պրոֆեսիոնալ գունապնակ

Ամենահեշտ ձևը գույների պատրաստի համադրություն վերցնելն է։ Պետք չէ ամեն անգամ նորից հայտնագործել անիվը, քանի որ ներդաշնակ համադրությունները հայտնի են վաղուց։ Գնացեք colordrop.io և ընտրեք: Կայքում կան հարյուրավոր պրոֆեսիոնալ 4 գունավոր գունապնակներ: Ձեր ուզածը ընտրելուց հետո սեղմեք և պատճենեք գունային ծածկագրերը աջ կողմում բացվող վահանակից։

Բացի այդ, ծառայությունը պարունակում է 24 հարթ դիզայնի գույների պատրաստի ընտրություն: Կտտացրեք ձախ կողմում «Flat Colors» անվան տակ և վերցրեք ձեր նախընտրած երանգի ծածկագիրը:

3. Որոշեք ձեր հավանած լուսանկարի կամ նկարի գունային գունապնակը

Այս մեթոդը մի փոքր ավելի բարդ է։ Բայց նաև ավելի արդյունավետ:

• Ձախ կողմում գտնվող վերին վահանակի coolors.co կայքում գտեք տեսախցիկի պատկերակը, սեղմեք դրա վրա: Պատկերի վերբեռնման պատուհանը կբացվի:
• Կարող եք համակարգչից ընտրել ձեր նախընտրած գունային սխեմայով լուսանկար կամ նկար կամ պատճենել հղումը դատարկ սյունակում:
• Ծառայությունը կորոշի գույների համադրությունը (ներքևում, վերբեռնված նկարի տակ):
• Դուք կարող եք փոխել այս ներկապնակի առանձին գույները՝ նշելով դրանք և ընտրելով լուսանկարում մի կետ, որտեղից ցանկանում եք վերցնել գույնը:
• «Կոլաժ» կոճակը պահպանում է ստացված գունապնակը՝ գունային կոդերով համակարգչում:
• «Ավտո» կոճակը նույն լուսանկարի հիման վրա ստեղծում է նոր համակցություններ։
• Սեղմեք «OK» և անցեք կայքի գլխավոր էջ՝ ներկապնակով հետագա աշխատանքի համար:

Պակաս ֆունկցիոնալ չէ կայքի գլխավոր էջը։ Այստեղ դուք կարող եք վերցնել առանձին գույների երանգներ կամ հավաքել նոր գունապնակ՝ փոխարինելով առանձին գույները:

4. Ստեղծեք ձեր սեփական գունային սխեման առցանց

Վերբեռնելով լուսանկար նույն coolors.co կայքում՝ դուք կարող եք ոչ միայն որոշել գունային կոդը, այլ նաև ստեղծել ձեր սեփական համակցությունները: Դա անելու համար սեղմեք spacebar - ծառայությունը ավտոմատ կերպով ստեղծում է 5 գույների համադրություն:

Յուրաքանչյուր գույնի վրա 4 կոճակի պատկերակներ:

• Այլընտրանքային երանգներ - Գույնի երանգներ (ավելի մուգ և բաց),
• Քաշեք (գունապնակում տեղափոխեք գույնը աջ կամ ձախ),
• Կարգավորել (Կարգավորել երանգը, հագեցվածությունը, պայծառությունը և այլն),
• Կողպեք (ֆիքսել գույնը):