Веб түстер палитралары

Веб түстер палитрасы дегеніміз не?

Түстер веб-дизайнерлер мен графикалық дизайнерлер үшін өте маңызды. Дизайнерлер күнделікті өмірде көк, қызыл және жасыл деп сипаттайтын түстерді #fff002, #426215 сияқты кодтармен сипаттайды. Сіз қандай кодтау жобасымен айналыссаңыз да, сіз бір сәтте түстермен жұмыс істей бастайсыз. Бұл, әсіресе, көптеген адамдар веб-беттерді құрастыру үшін жасайтындай, HTML көмегімен кодтауды үйренсеңіз пайдалы болады.

Hex коды түстерде нені білдіреді?

Он алтылық код үш мәнді біріктіру арқылы RGB пішімінде түсті көрсету тәсілі болып табылады. Бұл түс кодтары веб-дизайнға арналған HTML-дің ажырамас бөлігі болып табылады және түс пішімдерін сандық түрде көрсетудің маңызды тәсілі болып қала береді.

Он алтылық түс кодтары фунт белгісінен немесе хэштегтен (#) басталады, одан кейін алты әріп немесе сандар бар. Алғашқы екі әріп/сан қызылға, келесі екеуі жасылға және соңғы екеуі көкке сәйкес келеді. Түс мәндері 00 мен FF арасындағы мәндерде анықталады.

Мән 1-9 болған кезде сандар пайдаланылады. Мән 9-дан үлкен болғанда әріптер қолданылады. Мысалы:

• A = 10
• B = 11
• C = 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. Түс қауіпсіз

Егер 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

Ahrefs - түстер палитрасын еркін пайдаланатын веб-сайттың мысалы. Қою көк басым түс ретінде әрекет етеді, бірақ барлық сайтта вариациялар бар. Бұл қызғылт сары, қызғылт және көгілдір түстерге де қатысты.

Түстер туралы жиі қойылатын сұрақтар

1. Веб-сайт үшін ең жақсы түс қандай?

Көк - ең қауіпсіз таңдау, өйткені ол 35% ең танымал түс. Дегенмен, егер сіздің бәсекелестеріңіздің барлығы көк түсті пайдаланса, ұсынысыңыз бен брендіңізді «айыру» мағынасы бар. Бірақ келушілерді таң қалдырмайтыныңызға сенімді болуыңыз керек.

2. Веб-сайтта қанша түс болуы керек?

Брендтердің 51% -ында монохромды логотиптер бар, 39% -ы екі түсті пайдаланады, ал компаниялардың тек 19% -ы толық түсті логотиптерді қалайды. Осы жерден кемпірқосақ түстері бар веб-сайт жасаудан гөрі 1, 2 және 3 түстері бар веб-сайттардың мағынасы бар екенін көруге болады. Дегенмен, Microsoft және Google сияқты брендтер көп түстермен жұмыс істеудің артықшылығына сенеді, өйткені олар дизайнында кемінде 4 қатты түсті пайдаланады.

3. Түстерді қайда қолдану керек?

Көздің жауын алатын түстерді аз пайдалану керек, әйтпесе олар өз әсерін жоғалтады. Бұл әсер «Қазір сатып алу» түймелері сияқты конверсия нүктелерінде болуы керек.