ვებ ფერის პალიტრები

რა არის ვებ ფერის პალიტრები?

ფერები ძალიან მნიშვნელოვანია ვებ დიზაინერებისთვის და გრაფიკული დიზაინერებისთვის. დიზაინერები აღწერენ ფერებს, რომლებსაც ჩვენ აღვწერთ, როგორც ლურჯ, წითელ და მწვანეს ყოველდღიურ ცხოვრებაში ისეთი კოდებით, როგორიცაა #fff002, #426215. არ აქვს მნიშვნელობა რა ტიპის კოდირების პროექტს ახორციელებთ, სავარაუდოდ, რაღაც მომენტში დაიწყებთ ფერებთან მუშაობას. ეს განსაკუთრებით სასარგებლო იქნება, თუ ისწავლით კოდირებას HTML-ის გამოყენებით, როგორც ამას ბევრი ადამიანი აკეთებს ვებ გვერდების დიზაინისთვის.

რას ნიშნავს 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. აირჩიეთ თქვენი ძირითადი ფერები.

ძირითადი ფერის გადაწყვეტილების საუკეთესო გზა არის ფერების შესწავლა, რომლებიც შეესაბამება თქვენი პროდუქტის ან სერვისის განწყობას.

ქვემოთ ჩვენ ჩამოვთვალეთ რამდენიმე მაგალითი თქვენთვის:

• წითელი: ეს ნიშნავს მღელვარებას ან ბედნიერებას.
• ნარინჯისფერი: ეს ნიშნავს მეგობრულ, მხიარულ დროს.
• ყვითელი ნიშნავს ოპტიმიზმს და ბედნიერებას.
• მწვანე: ეს ნიშნავს სიახლეს და ბუნებას.
• ლურჯი: ნიშნავს საიმედოობას და გარანტიას.
• Purple: წარმოადგენს გამორჩეულ ბრენდს ხარისხის ისტორიით.
• ყავისფერი: ეს ნიშნავს საიმედო პროდუქტს, რომლის გამოყენებაც ყველას შეუძლია.
• შავი ნიშნავს ფუფუნებას ან ელეგანტურობას.
• თეთრი: ეხება ელეგანტურ, მოსახერხებელ პროდუქტებს.

2. აირჩიეთ თქვენი დამატებითი ფერები.

აირჩიეთ ერთი ან ორი დამატებითი ფერი, რომელიც ავსებს თქვენს ძირითად ფერს. ეს იდეალურად უნდა იყოს ის ფერები, რომლებიც თქვენს მთავარ ფერს „განსაცვიფრებელს“ აქცევს.

3. აირჩიეთ ფონის ფერი.

აირჩიეთ ფონის ფერი, რომელიც ნაკლებად "აგრესიული" იქნება, ვიდრე თქვენი ძირითადი ფერი.

4. აირჩიეთ შრიფტის ფერი.

აირჩიეთ ტექსტის ფერი თქვენს ვებსაიტზე. გაითვალისწინეთ, რომ მყარი შავი შრიფტი იშვიათია და არ არის რეკომენდებული.

საუკეთესო ვებ ფერების პალიტრები დიზაინერებისთვის

თუ ვერ პოულობთ ფერს, რომელსაც ეძებთ Softmedal ვებ ფერების პალიტრების კოლექციაში, შეგიძლიათ გადახედოთ ქვემოთ მოცემულ ალტერნატიულ ფერთა საიტებს:

ფერის შერჩევა ხანგრძლივი პროცესია და ხშირად საჭიროებს დიდ დაზუსტებას სწორი ფერების მოსაძებნად. ამ ეტაპზე, შეგიძლიათ დაზოგოთ დრო 100% უფასო ვებ აპლიკაციების გამოყენებით, რომლებიც ქმნიან შესაბამის ფერთა სქემებს ნულიდან.

1. პალეტონი

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. ტორის თვალი

ტორის თვალი მონოქრომული ფერის სქემის შესანიშნავი მაგალითია. აქ ჩანს მარტივი, მაგრამ ძლიერი ფერის პალიტრის ეფექტი, რომელიც ორიენტირებულია მწვანე ფერებში. ამ ფერის სქემის ამოღება ჩვეულებრივ ადვილია, რადგან ერთი ფერის ერთი ჩრდილი თითქმის ყოველთვის იმუშავებს იმავე ფერის სხვა ჩრდილთან.

3. ყველის გადარჩენის ნაკრები

წითელი ძალიან პოპულარული ფერია ვებსაიტის ფერთა პალიტრისთვის. მას შეუძლია ემოციების მდიდარი ნაზავის გადმოცემა, რაც მას მრავალმხრივს ხდის. როგორც ხედავთ Cheese Survival Kit-ის ვებსაიტზე, ის განსაკუთრებით ეფექტურია მცირე დოზებით გამოყენებისას. წითელი რბილდება უფრო ნეიტრალური ფერებით, ხოლო ლურჯი ეხმარება CTA-ებს და სხვა სფეროებს, სადაც ბიზნესს სურს მიიპყროს ვიზიტორის ყურადღება.

4. აჰრეფსი

Ahrefs არის ვებსაიტის მაგალითი, რომელიც თავისუფლად იყენებს ფერთა პალიტრას. მუქი ლურჯი მოქმედებს, როგორც უპირატესი ფერი, მაგრამ ვარიაციები არსებობს მთელ საიტზე. იგივე ეხება ნარინჯისფერ, ვარდისფერ და ფირუზის ფერებს.

ყველაზე ხშირად დასმული კითხვები ფერების შესახებ

1. რომელია საუკეთესო ფერი ვებსაიტისთვის?

ცისფერი ნამდვილად ყველაზე უსაფრთხო არჩევანია, რადგან ის ყველაზე პოპულარული ფერია 35%-ით. თუმცა, თუ თქვენი კონკურენტები ყველა იყენებს ლურჯს, შეიძლება აზრი ჰქონდეს თქვენი შეთავაზებისა და ბრენდის "დიფერენცირებას". მაგრამ თქვენ უნდა დარწმუნდეთ, რომ არ გადატვირთავთ ვიზიტორებს.

2. რამდენი ფერი უნდა ჰქონდეს ვებგვერდს?

გაითვალისწინეთ, რომ ბრენდების 51%-ს აქვს მონოქრომული ლოგოები, 39% იყენებს ორ ფერს და კომპანიების მხოლოდ 19%-ს ანიჭებს უპირატესობას სრული ფერის ლოგოს. აქედან ხედავთ, რომ 1, 2 და 3 ფერის მქონე ვებსაიტებს უფრო მეტი აზრი აქვთ, ვიდრე ცისარტყელას ფერებით ვებსაიტის შექმნის მცდელობას. თუმცა, ბრენდებს, როგორიცაა Microsoft და Google, სჯერათ მეტ ფერებთან მუშაობის უპირატესობის, რადგან ისინი იყენებენ მინიმუმ 4 მყარ ფერს თავიანთ დიზაინში.

3. სად გამოვიყენო ფერები?

თვალისმომჭრელი ფერები ზომიერად უნდა გამოიყენოთ, წინააღმდეგ შემთხვევაში ეფექტს დაკარგავენ. ეს ეფექტი უნდა იყოს კონვერტაციის წერტილებში, როგორიცაა "ყიდვა ახლა" ღილაკები.