වෙබ් වර්ණ පුවරු

වෙබ් වර්ණ පුවරු යනු කුමක්ද?

වෙබ් නිර්මාණකරුවන්ට සහ ග්‍රැෆික් නිර්මාණකරුවන්ට වර්ණ ඉතා වැදගත් වේ. #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 සමානතා

වඩාත් සුලභ hex වර්ණ කේත මතක තබා ගැනීම ඔබට එම වර්ණ භාවිතා කිරීමට අවශ්‍ය විට පමණක් නොව, ඔබ hex වර්ණ කේතය දකින විට වෙනත් වර්ණ මොනවාදැයි වඩා හොඳින් අනාවැකි කීමට උපකාරී වේ.

• රතු = #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)
• Fuchsia = #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% කින් සන්නාම පිළිගැනීම වැඩි කරන බවයි. උදාහරණයක් ලෙස, ඔබ කොකා-කෝලා ගැන සිතන විට, ඔබ බොහෝ විට දීප්තිමත් රතු කෑන් සිතනු ඇත.

වෙබ් අඩවි සඳහා වර්ණ පටිපාටියක් තෝරා ගන්නේ කෙසේද?

ඔබේ වෙබ් අඩවියේ හෝ වෙබ් යෙදුමේ ඔබ තෝරාගත යුතු වර්ණ තීරණය කිරීම සඳහා, ඔබ විකුණන්නේ කුමක්ද යන්න පිළිබඳව ඔබට හොඳ අවබෝධයක් තිබිය යුතුය. උදාහරණයක් ලෙස, ඔබ උසස් තත්ත්වයේ, උසස් රූපයක් ලබා ගැනීමට උත්සාහ කරන්නේ නම්, ඔබ තෝරා ගත යුතු වර්ණය දම් පාටයි. කෙසේ වෙතත්, ඔබට පුළුල් ප්‍රේක්ෂක පිරිසක් වෙත ළඟා වීමට අවශ්‍ය නම්, නිල්; එය සෞඛ්‍යය හෝ මූල්‍ය වැනි වඩාත් සංවේදී මාතෘකා සඳහා හොඳින් ගැලපෙන සහනදායී සහ මෘදු වර්ණයකි.

ඉහත උදාහරණ බොහෝ අධ්යයන මගින් ඔප්පු කර ඇත. නමුත් ඔබේ වෙබ් අඩවිය සඳහා ඔබ තෝරා ගන්නා වර්ණය ඔබේ මෝස්තරයේ සංකීර්ණත්වය සහ වර්ණ සංයෝජන වර්ග මත රඳා පවතී. උදාහරණයක් ලෙස, ඔබ ඒකවර්ණ වෙබ් නිර්මාණ පුවරුවක් භාවිතා කරන්නේ නම්, තිරය මත ප්‍රමාණවත් විවිධත්වයක් ලබා ගැනීමට ඔබට එම වර්ණයෙන් වර්ණ හතක් හෝ වැඩි ගණනක් අවශ්‍ය විය හැකිය. පෙළ, පසුබිම්, සබැඳි, හෝවර් වර්ණ, 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. ටෝරිගේ ඇස

Tori's Eye යනු ඒකවර්ණ වර්ණ පටිපාටියකට කදිම නිදසුනකි. මෙහිදී, හරිත වර්ණ වටා කේන්ද්‍රගත වූ සරල නමුත් බලවත් වර්ණ මාලාවක බලපෑම් දක්නට ලැබේ. මෙම වර්ණ පටිපාටිය සාමාන්‍යයෙන් ඉවත් කිරීම පහසුය, මන්ද එක් වර්ණයක එක් සෙවනක් සෑම විටම පාහේ එකම වර්ණයෙන් තවත් සෙවනක් සමඟ ක්‍රියා කරයි.

3. චීස් Survival Kit

රතු යනු වෙබ් අඩවි වර්ණ මාලාවක් සඳහා අතිශයින් ජනප්රිය වර්ණයකි. එයට හැඟීම්වල පොහොසත් මිශ්‍රණයක් ප්‍රකාශ කළ හැකි අතර එය බහුකාර්ය කරයි. Cheese Survival Kit වෙබ් අඩවියේ ඔබට දැකිය හැකි පරිදි, එය කුඩා මාත්‍රාවලින් භාවිතා කරන විට විශේෂයෙන් ප්‍රබල වේ. රතු වඩාත් උදාසීන වර්ණවලින් මෘදු වන අතර නිල් CTAs සහ ව්‍යාපාරයට අමුත්තන්ගේ අවධානය ආකර්ෂණය කර ගැනීමට අවශ්‍ය අනෙකුත් ප්‍රදේශවලට උපකාරී වේ.

4. අහ්රෙෆ්ස්

Ahrefs යනු වර්ණ පුවරුව නිදහසේ භාවිතා කරන වෙබ් අඩවියකට උදාහරණයකි. තද නිල් පැහැය ප්‍රධාන වර්ණය ලෙස ක්‍රියා කරයි, නමුත් වෙබ් අඩවිය පුරා වෙනස්කම් පවතී. තැඹිලි, රෝස සහ ටර්කියුයිස් යන වර්ණ සඳහාද එයම වේ.

වර්ණ ගැන නිතර අසනු ලබන ප්රශ්න

1. වෙබ් අඩවියක් සඳහා හොඳම වර්ණය කුමක්ද?

නිල් යනු 35% ක් සහිත වඩාත්ම ජනප්රිය වර්ණය වන බැවින් නිසැකවම ආරක්ෂිතම තේරීම වේ. කෙසේ වෙතත්, ඔබේ තරඟකරුවන් සියලු දෙනා නිල් භාවිතා කරන්නේ නම්, ඔබේ පිරිනැමීම සහ වෙළඳ නාමය "වෙනස් කිරීම" අර්ථවත් විය හැකිය. නමුත් ඔබ අමුත්තන් යටපත් නොකිරීමට වග බලා ගත යුතුය.

2. වෙබ් අඩවියේ වර්ණ කීයක් තිබිය යුතුද?

වෙළඳ නාමවලින් 51% ක් ඒකවර්ණ ලාංඡන ඇති බවත්, 39% වර්ණ දෙකක් භාවිතා කරන බවත්, සමාගම්වලින් 19% ක් පමණක් සම්පූර්ණ වර්ණ ලාංඡන වලට කැමති බවත් සලකන්න. මෙතැන් සිට, වර්ණ 1, 2 සහ 3 සහිත වෙබ් අඩවි දේදුනු වර්ණ සමඟ වෙබ් අඩවියක් නිර්මාණය කිරීමට උත්සාහ කරනවාට වඩා අර්ථවත් බව ඔබට පෙනෙනු ඇත. කෙසේ වෙතත්, මයික්‍රොසොෆ්ට් සහ ගූගල් වැනි සන්නාමයන් ඔවුන්ගේ මෝස්තර සඳහා අවම වශයෙන් ඝන වර්ණ 4ක් භාවිතා කරන බැවින් වැඩි වර්ණ සමඟ වැඩ කිරීමේ වාසිය විශ්වාස කරයි.

3. මා වර්ණ භාවිතා කළ යුත්තේ කොතැනින්ද?

සිත් ඇදගන්නා වර්ණ භාවිතා කළ යුතු අතර, එසේ නොවුවහොත් ඒවායේ බලපෑම අහිමි වනු ඇත. මෙම බලපෑම "දැන් මිලදී ගන්න" බොත්තම් වැනි පරිවර්තන ලක්ෂ්‍යවල තිබිය යුතුය.