Veb Rang Palitralari

Veb rang palitralari nima?

Ranglar veb-dizaynerlar va grafik dizaynerlar uchun juda muhimdir. Dizaynerlar biz ta'riflagan ranglarni kundalik hayotda ko'k, qizil va yashil rangda #fff002, #426215 kabi kodlar bilan tasvirlaydi. Qaysi turdagi kodlash loyihasini amalga oshirayotgan bo'lishingizdan qat'i nazar, siz bir nuqtada ranglar bilan ishlashni boshlaysiz. Ko'pchilik veb-sahifalarni loyihalashda qilganidek, HTML yordamida kodlashni o'rgansangiz, bu ayniqsa foydali bo'ladi.

Hex kodi ranglarda nimani anglatadi?

Hex kod - bu uchta qiymatni birlashtirib, RGB formatida rangni ifodalash usuli. Ushbu rang kodlari veb-dizayn uchun HTMLning ajralmas qismi bo'lib, rang formatlarini raqamli ko'rsatishning muhim usuli bo'lib qoladi.

Olti burchakli rang kodlari funt belgisi yoki heshteg (#) bilan boshlanadi, undan keyin oltita harf yoki raqam keladi. Birinchi ikkita harf/raqam qizil rangga, keyingi ikkitasi yashil rangga va oxirgi ikkitasi ko'k rangga to'g'ri keladi. Rang qiymatlari 00 va FF oralig'idagi qiymatlarda aniqlanadi.

Raqamlar qiymat 1-9 bo'lganda ishlatiladi. Qiymat 9 dan katta bo'lsa harflar ishlatiladi. Masalan:

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

Hex rang kodlari va RGB ekvivalentlari

Ba'zi eng keng tarqalgan olti burchakli rang kodlarini yodlash sizga aniq ranglardan foydalanmoqchi bo'lganingizda emas, balki olti burchakli rang kodini ko'rganingizda boshqa ranglar qanday bo'lishini yaxshiroq taxmin qilish uchun foydali bo'lishi mumkin.

• Qizil = #FF0000 = RGB (255, 0, 0)
• Yashil = #008000 = RGB (1, 128, 0)v
• Moviy = #0000FF = RGB (0, 0, 255)
• Oq = #FFFFFF = RGB (255,255,255)
• Fil suyagi = #FFFFF0 = RGB (255, 255, 240)
• Qora = #000000 = RGB (0, 0, 0)
• Kulrang = #808080 = RGB (128, 128, 128)
• Kumush = #C0C0C0 = RGB (192, 192, 192)
• Sariq = #FFFF00 = RGB (255, 255, 0)
• Binafsha = #800080 = RGB (128, 0, 128)
• Apelsin = #FFA500 = RGB (255, 165, 0)
• Bordo = #800000 = RGB (128, 0, 0)
• Fuchsia = #FF00FF = RGB (255, 0, 255)
• Ohak = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Teal = #008080 = RGB (0, 128, 128)
• Zaytun = #808000 = RGB (128, 128, 0)
• Toʻq koʻk = #000080 = RGB (0, 0, 128)

Nima uchun veb-sayt ranglari muhim?

Siz ranglar sizga ta'sir qilmaydi deb o'ylashingiz mumkin, ammo tadqiqotga ko'ra, odamlarning 85 foizi rang sotib olgan mahsulotga katta ta'sir ko'rsatishini aytishadi. Uning aytishicha, ba'zi kompaniyalar tugmalar rangini o'zgartirganda, ular konversiyalarining keskin o'sishi yoki kamayganini sezishgan.

Misol uchun, proyeksiya ekranlarini ishlab chiqaruvchi Beamax kompaniyasi qizil havolalarni bosish ko'k havolalarga nisbatan 53,1% ga oshganini payqadi.

Ranglar nafaqat bosish, balki brendning tan olinishiga ham katta ta'sir ko'rsatadi. Ranglarning ruhiy ta'siri bo'yicha o'tkazilgan tadqiqot shuni ko'rsatdiki, ranglar brendning tan olinishini o'rtacha 80% ga oshiradi. Misol uchun, Coca-Cola haqida o'ylaganingizda, ehtimol jonli qizil qutilarni tasavvur qilasiz.

Veb-saytlar uchun rang sxemasini qanday tanlash mumkin?

Veb-saytingizda yoki veb-ilovangizda qaysi ranglarni tanlashingiz kerakligini hal qilish uchun avval siz sotayotgan narsangizni yaxshi tushunishingiz kerak. Misol uchun, agar siz yuqori sifatli, yuqori sifatli tasvirga erishmoqchi bo'lsangiz, siz tanlashingiz kerak bo'lgan rang binafsha rang. Biroq, agar siz kengroq auditoriyaga erishmoqchi bo'lsangiz, ko'k; Bu sog'liq yoki moliya kabi nozik mavzular uchun juda mos keladigan ishonchli va yumshoq rang.

Yuqoridagi misollar ko'plab tadqiqotlar bilan tasdiqlangan. Ammo veb-saytingiz uchun tanlagan rangingiz dizayningizning murakkabligi va rang kombinatsiyalarining turlariga bog'liq. Misol uchun, agar siz monoxrom veb-dizayn palitrasidan foydalanayotgan bo'lsangiz, ekranda etarlicha xilma-xillikka ega bo'lish uchun sizga yetti yoki undan ortiq rang kerak bo'lishi mumkin. Saytingizning matn, fon, havolalar, hover ranglari, CTA tugmalari va sarlavhalari kabi ba'zi qismlari uchun ranglarni o'rnatishingiz kerak.

Endi "Veb-saytlar va veb-ilovalar uchun rang sxemasini qanday tanlash mumkin?" Keling, buni bosqichma-bosqich ko'rib chiqaylik:

1. Asosiy ranglaringizni tanlang.

Asosiy rangni tanlashning eng yaxshi usuli - mahsulot yoki xizmatingizning kayfiyatiga mos keladigan ranglarni o'rganishdir.

Quyida biz siz uchun bir nechta misollarni keltirdik:

• Qizil: Bu hayajon yoki baxtni anglatadi.
• Apelsin: Bu do'stona, qiziqarli vaqtni anglatadi.
• Sariq optimizm va baxtni anglatadi.
• Yashil: bu tazelik va tabiatni anglatadi.
• Moviy: ishonchlilik va ishonchni anglatadi.
• Binafsha rang: sifat tarixiga ega taniqli brendni ifodalaydi.
• Jigarrang: Bu hamma foydalanishi mumkin bo'lgan ishonchli mahsulotni anglatadi.
• Qora hashamat yoki nafislikni anglatadi.
• Oq: zamonaviy, foydalanuvchilarga qulay mahsulotlarga ishora qiladi.

2. Qo'shimcha ranglaringizni tanlang.

Asosiy rangingizni to'ldiradigan bir yoki ikkita qo'shimcha rangni tanlang. Bu ideal rang sizning asosiy rangingizni "ajoyib" qiladigan ranglar bo'lishi kerak.

3. Fon rangini tanlang.

Asosiy rangingizdan kamroq "tajovuzkor" bo'ladigan fon rangini tanlang.

4. Shrift rangini tanlang.

Veb-saytingizdagi matn uchun rangni tanlang. E'tibor bering, qattiq qora shrift kamdan-kam uchraydi va tavsiya etilmaydi.

Dizaynerlar uchun eng yaxshi veb-rang palitralari

Softmedal veb-ranglar palitrasi to'plamidan o'zingiz qidirayotgan rangni topa olmasangiz, quyidagi muqobil rang saytlarini ko'rib chiqishingiz mumkin:

Rang tanlash uzoq jarayon bo'lib, to'g'ri ranglarni topish uchun ko'pincha nozik sozlashni talab qiladi. Shu nuqtada, noldan tegishli rang sxemalarini yaratadigan 100% bepul veb-ilovalardan foydalanib, vaqtni tejashingiz mumkin.

1. Paletton

Paletton - bu barcha veb-dizaynerlar bilishi kerak bo'lgan veb-ilova. Faqat urug' rangini kiriting va ilova siz uchun qolganini qiladi. Paletton ishonchli tanlov va dizayn haqida hech narsa bilmaydiganlar va yangi boshlanuvchilar uchun ajoyib veb-ilovadir.

2. Rang xavfsiz

Agar WCAG sizning dizayn jarayoningizda tashvish tug'dirsa, Color Safe foydalanish uchun eng yaxshi vositadir. Ushbu veb-ilova yordamida siz WCAG ko'rsatmalariga muvofiq mukammal aralashadigan va boy kontrastni taklif qiluvchi rang sxemalarini yaratishingiz mumkin.

Color Safe veb-ilovasidan foydalanib, siz saytingiz WCAG ko'rsatmalariga mos kelishiga va hamma uchun to'liq kirishiga ishonch hosil qilasiz.

3. Adobe Color CC

Bu ommaviy foydalanish uchun yaratilgan bepul Adobe vositalaridan biridir. Bu har kim noldan rang sxemalarini yaratishi mumkin bo'lgan murakkab veb-ilovadir. Bu sizning ehtiyojlaringizga eng mos keladigan turli xil rang modellarini tanlash imkonini beradi. Interfeys avvaliga biroz chalkashdek tuyulishi mumkin, biroq unga o‘rganib qolganingizdan so‘ng chiroyli rang variantlarini tanlashda hech qanday muammo bo‘lmasligi kerak.

4. Atmosfera

Ambiance bepul veb-ilovasi internetdagi boshqa rangli saytlardan oldindan tayyorlangan veb-ranglar palitralarini taklif etadi. Bu an'anaviy veb-ilova kabi ishlaydi, unda siz profilingizga ranglarni saqlashingiz va noldan o'z sxemalaringizni yaratishingiz mumkin. Ushbu veb-rang palitralarining barchasi Colorlovers-dan keladi. Ambiance interfeysi ko'rishni osonlashtiradi va UI dizayni uchun ranglarning o'zaro ta'siriga ko'proq e'tibor beradi.

5. 0to 255

0to255 aniq rang sxemasi generatori emas, lekin u sizga mavjud rang sxemalarini nozik sozlashda yordam beradi. Veb-ilova sizga turli xil ranglarni ko'rsatadi, shunda siz ranglarni bir zumda aralashtirishingiz va moslashtirishingiz mumkin.

Agar sizga foydali ranglar sxemasini yaratish qiyin bo'lsa, yuqoridagi ba'zi ilovalarni ko'rib chiqishingiz mumkin.

Eng yaxshi veb-rang palitralari

Quyidagi saytlar ajoyib effekt uchun turli xil veb-rang palitralaridan foydalanadi. Ular uyg'otadigan his-tuyg'ular va hissiyotlar uchun ehtiyotkorlik bilan tanlanadi.

1. Odopod

Odopod monoton ranglar palitrasi bilan yaratilgan, ammo uning asosiy sahifasida gradient bilan zerikarli ko'rinmaslikka qaratilgan. Katta tipografiya ajoyib kontrastni taqdim etadi. Mehmonlar qaerga bosishni xohlashlari aniq.

2. Torining ko'zi

Tori's Eye - monoxrom rang sxemasining ajoyib namunasidir. Bu erda yashil soyalar atrofida joylashgan oddiy, ammo kuchli ranglar palitrasining ta'siri ko'rinadi. Ushbu rang sxemasini tortib olish odatda oson, chunki bitta rangning bir soyasi deyarli har doim bir xil rangdagi boshqa soya bilan ishlaydi.

3. Pishloqdan omon qolish uchun to'plam

Qizil rang veb-sayt ranglar palitrasi uchun juda mashhur rangdir. U hissiyotlarning boy aralashmasini etkazishi mumkin, bu uni ko'p qirrali qiladi. Cheese Survival Kit veb-saytida ko'rib turganingizdek, u kichik dozalarda ishlatilganda ayniqsa kuchli. Qizil rang ko'proq neytral ranglar bilan yumshatiladi va ko'k CTA va biznes tashrif buyuruvchining e'tiborini jalb qilmoqchi bo'lgan boshqa sohalarda yordam beradi.

4. Ahrefs

Ahrefs ranglar palitrasidan erkin foydalanadigan veb-saytga misoldir. To'q ko'k asosiy rang sifatida ishlaydi, ammo saytning barcha joylarida o'zgarishlar mavjud. Xuddi shu narsa to'q sariq, pushti va firuza ranglariga tegishli.

Ranglar haqida tez-tez so'raladigan savollar

1. Veb-sayt uchun eng yaxshi rang qaysi?

Ko'k, albatta, eng xavfsiz tanlovdir, chunki u 35% bilan eng mashhur rangdir. Biroq, agar sizning raqobatchilaringiz barchasi ko'k rangdan foydalanayotgan bo'lsa, sizning taklifingiz va brendingizni "farqlash" mantiqiy bo'lishi mumkin. Lekin siz tashrif buyuruvchilarni ko'paytirmasligingizga ishonch hosil qilishingiz kerak.

2. Veb-sayt nechta rangga ega bo'lishi kerak?

E'tibor bering, brendlarning 51 foizi monoxrom logotiplarga ega, 39 foizi ikkita rangdan foydalanadi va kompaniyalarning atigi 19 foizi to'liq rangli logotiplarni afzal ko'radi. Bu yerdan siz 1, 2 va 3 rangdagi veb-saytlar kamalak ranglari bilan veb-sayt yaratishga urinishdan ko'ra ko'proq ma'noga ega ekanligini ko'rishingiz mumkin. Biroq, Microsoft va Google kabi brendlar ko'proq ranglar bilan ishlashning afzalligiga ishonishadi, chunki ular dizaynlarida kamida 4 ta qattiq rangdan foydalanadilar.

3. Ranglarni qayerda ishlatishim kerak?

Ko'zni qamashtiruvchi ranglardan kam foydalanish kerak, aks holda ular o'z ta'sirini yo'qotadi. Ushbu effekt "Hozir sotib olish" tugmalari kabi konversiya nuqtalarida bo'lishi kerak.