শিশুদের জন্য ওয়েব ডিজাইনঃ রং

শিশুদের জন্য ওয়েব ডিজাইন সিরিজের দশম অধ্যায়ে আপনাকে স্বাগতম, এ অধ্যায়ে সব কিছুই রং সম্পর্কে।

এই টিউটোরিয়ালে আমরা রঙ তত্ত্ব সম্পর্কে আলোচনা করবো, CSS-এ বিভিন্ন পদ্ধতিতে রঙের ব্যবহার, রঙয়ের অর্থ, এবং কিভাবে  ওয়েবসাইটের জন্য নিখুঁত রং ব্যবহার করতে হবে সে সম্পর্কে পর্যালোচনা করবো। তারপর আমরা ওয়েবে রং ব‍্যবহার করার জন্য কিছু টিপস দিয়ে শেষ করবো।

এই পেইজের শেষদিকে কমেন্ট সেকশনে আপনার মতামত জানাতে ভুলবেন না।

রং তত্ত্ব

রং তত্ত্ব অনেকগুলো বিষয়ের সাথে সম্পৃক্ত, কিন্তু এটার মূল বিষয় হচ্ছে, একটি ডিজাইনের ভিতর রং কিভাবে একটি অন্যটির সাথে কাজ করে তা দেখা। এরকম ব্যবহারযোগ্য একগুচ্ছ রংকে একসাথে একটি ‘কালার প্যালেট’ বলা হয়।  সুন্দরভাবে ডিজাইন করা কালার প্যালেটে একটি রং অন্যটির সাথে খুব সুন্দরভাবে মানিয়ে যাবে এবং একে অন্যের পরিপূরক হবে এবং তাতে ভালো বৈপরীত্য থাকবে ও প্রাণবন্ত হবে। আমরা এখন, এই বিষয়গুলো দ্বারা কি বুঝানো হয় সে সম্পর্কে বিস্তারিত আলোচনা করবো।

সঠিক রং বেছে নেয়া এবং কোনটি কাজ করবে ও কোনটি কাজ করবে না তা বুঝতে পারার উপর নির্ভর করে আমাদের ডিজাইনটি জনপ্রিয় হবে কি হবে না। খারাপ রং নির্বাচনের কারণে আমাদের ওয়েবসাইটটি ব্যবহার করা কঠিন মনে হতে পারে, অথবা লেখাগুলো পড়া অসম্ভব মনে হতে পারে যার ফলে ব্যবহারকারীরা ওয়েবসাইটটি বাদ দিতে পারে।

কিছু পরিভাষা

এই টিউটোরিয়ালের আরও গভীরে যাওয়ার আগে আমরা এখন রঙয়ের বেশকিছু বেসিক পরিভাষা নিয়ে আলোচনা করবো, যেগুলো আমরা পরবর্তীতে অনেক বেশি ব্যবহার করবো। এই পরিভাষাগুলো আমাদেরকে বুঝতে সহায়তা করবে যে কোন জিনিষ একটি রংকে অনন্য করে তুলে।

Hues বা হিউয়েস

হিউ (Hue) হচ্ছে (কম বেশি) কোন একটি বস্তুর রং। যখন আমরা “লাল” অথবা “হলুদ” রং সম্পর্কে বলি, তখন সাধারণত আমরা বস্তুটির হিউ সম্পর্কেই বলে থাকি।

স্যাটুরেশন

রঙয়ের স্যাটুরেশন দিয়ে বুঝানো হয় একটি রং কতটা প্রাণবন্ত ও শক্তিশালী। নিন্মমানের স্যাটুরেশনের কারণে একটি রং ফ্যাকাশে মনে হতে পারে। অন্যদিকে উচ্চমানের স্যাটুরেশনের কারণে অনেক প্রাণবন্ত ও উজ্জ্বল রং তৈরি হয়।

উজ্জ্বলতা অথবা অনুজ্জ্বলতা

উজ্জ্বলতা দিয়ে একটি রং কতটা হালকা অথবা গাড় তা বোঝানো হয়। এটা শুরু হয় কালো থেকে (শূন্য উজ্জ্বলতা) এবং শেষ হয় সাদা (পূর্ণ উজ্জ্বলতা) দিয়ে।

রঙ চক্র

কালার হুইল তৈরি হয় লাল, হলুদ, এবং নীলের উপর ভিত্তি করে এবং এই রঙগুলো ডিজাইনারদের কাছে বেশ পরিচিত। ডিজাইনার হিসেবে, কোন রং কিভাবে তৈরি হয় তা বুঝতে পারলে কোন রং কিভাবে অন্য রঙয়ের সম্পূরক হিসেবে ব্যবহৃত হতে পারে এবং কেন তা বুঝতে আমাদের সাহায্য করবে।

নিচের গাড়ির বাম পাশের চাকাতে তিনটি প্রাথমিক রং দেখা যাচ্ছে। এই তিনটি রং দিয়ে আমরা অন্যান্য রংগুলোও তৈরি করতে পারি।

আর ডানপাশের চাকাটিতে মাধ্যমিক রংগুলো দেখা যাচ্ছেঃ যেসব রং প্রাথমিক রঙয়ের মিশ্রণে তৈরি হয়েছে। উদাহরণস্বরূপ, নীল আর হলুদ মিলে সবুজ হয়, আবার নীল আর লাল মিলে বেগুনী হয়।  

নিচের গাড়ির বামপাশের চাকাটিতে আরও বেশ কিছু স্তর দেখা যাচ্ছেঃ এগুলোকে বলা হয় tertiary বা তৃতীয় স্তরের রং। এগুলো প্রাথমিক ও মাধ্যমিক রঙয়ের মিশ্রণে তৈরি করা হয়েছে। উদাহরনতঃ নীলের সঙ্গে বেগুনী মেশানো হলে একধরনের গাড় নীলাভ বেগুনী রঙ তৈরি হয়।

ওয়েব কালার সিস্টেম

বেশ কয়েক প্রকারের কালার সিস্টেম বা রং ব্যবস্থাপনা (যে পদ্ধতিতে রংয়ের বিবরণ দেয়া হয়) প্রচলিত আছে। কিন্তু এর মধ্যে মাত্র কয়েকটি সিস্টেম কেবল ওয়েবের জন্য উপযুক্ত।

RGB

RGB দিয়ে “Red Green Blue” বুঝানো হয় এবং এর মাধ্যমে আমরা ইলেক্ট্রনিক ডিভাইসে কিভাবে বিভিন্ন রং দেখে থাকি তা তুলে ধরা হয়। এই তিন রঙয়ের মিশ্রণে আরও অনেক রং তৈরি হয়। এই তিনটি মান পর্যায়ক্রমে সাজানো থাকে। প্রত্যেকটির রেঞ্জ হচ্ছে ০ থেকে ২৫৫ এর মধ্যে।  

1

body {

2

    background: rgb(138,138,226);

3

}

উপরের CSS একটি পেইজে হলদে-কমলা পটভূমি তৈরি করে। ব্রাকেটের ভিতর যেই মানগুলো দেখতে পাচ্ছেন তা হচ্ছে লাল, সবুজ এবং নীলের বিভিন্ন মান।

আমরা এই সিরিজে একটি রঙের হেক্সাডেসিমাল মান ব্যবহার করবো, কিন্তু এছাড়াও আরও অনেকভাবে CSS-এ রং ব্যবহার করা যায়।

৫০০ টি নির্দিষ্ট রঙয়ের জন্য  Hex এবং RGB মানের তড়িৎ তালিকা পেতে এই ওয়েবসাইটে ঘুরে আসুন।

HSL

HSL দ্বারা বোঝানো হয় “Hue Saturation Lightness” এবং এর মান গুলো তিনটি নম্বর ও শতকরায় প্রকাশ করা হয়।

আমরা একইভাবে Hex অথবা RGB মানের পরিবর্তে HSL মান ব্যবহার করে কোন পেইজে হলদে-কমলা পটভুমি তৈরি করতে পারি:

1

body {

2

    background: hsl(43,100%,57%);

3

}

প্রথম মানটি হচ্ছে ৪৩, যা রঙ চক্রের একটি কোণকে নির্দেশ করে। এটা হচ্ছে হিউ। রঙ চক্রে লাল রঙ থাকে ০ থেকে ৩৬০ ডিগ্রীতে, অন্যদিকে ১২০ ডিগ্রি দিয়ে সবুজ বুঝানো হয় এবং ২৪০ ডিগ্রি দিয়ে নীল বুঝানো হয়।

দ্বিতীয় মানটি দিয়ে রঙয়ের স্যাটুরেশনের শতকরা হার বোঝানো হয়। ১০০% দিয়ে পরিপূর্ণ স্যাটুরেশন বোঝানো হয়ে থাকে।

চুড়ান্ত মানটি হচ্ছে, লাইটনেস, যা দিয়ে হিউটি কতটা হাল্কা অথবা গাড় তা বুঝানো হয়ে থাকে। ১০০% দিয়ে সম্পূর্ণ হাল্কা বা সাদা বুঝানো হয়, এবং ০% দিয়ে কালো বুঝানো হয়, এবং এই দুটির মাঝামাঝি যেকোনো মান হচ্ছে এদের সম্পূরক।

আমরা কোন ধরণের রংয়ের মান আমাদের CSSএ ব্যবহার করবো, সেটা সম্পূর্ণই আমাদের ইচ্ছার উপর নির্ভর করে, কিন্তু HSL মানগুলো ধারনা করা বেশ সহজ। এজন্য রংচক্রের লাল (০) রঙ থেকে ঘড়ির কাটার উল্টো দিকে রঙের মান নির্ধারণ করতে হবে এবং তারপর স্যাটুরেশন এবং লাইটনেসের জন্য ইচ্ছানুযায়ী শতকরা হার নির্বাচন করতে হবে।

রঙের নাম

বেশ কিছু রঙ আছে যেগুলোর নাম সরাসরি CSS এ ব্যবহার করা যায়, কোন নম্বরের প্রয়োজন হয় না।

1

body {

2

    background: green;

3

}

এই ধরণের রংগুলোর একটি সম্পূর্ণ তালিকা এখানে পাবেন।

Conversion Tools এর উপর কিছু সংক্ষিপ্ত নোট

যদি আমাদের কাছে কোন রঙের Hex মান থাকে এবং আমরা এর পরিবর্তে RGB অথবা HSL মান (অথবা এর বিপরীত!) পেতে চাই, তাহলে বেশ কিছু টুল আছে যেগুলো এক্ষেত্রে কাজে লাগাতে পারবো, যেমন rgb.to এবং Colorrrs।

রঙের অর্থ

বিভিন্ন রঙ্গয়ের ভিন্ন ভিন্ন অর্থ আছে। আপনি কোন দেশে বসবাস করেন, তার উপর নির্ভর করে কিছু বিশেষ রঙ ব্যবহার করে বিপদ, ভালবাসা, সুখ, অথবা মন্দ জিনিষ বোঝানো হয়। রঙ একজন ব্যবহারকারীকে বিশেষ কিছু অনুভুতি দিতে পারে, তাই এই সম্পর্কে বোঝাপড়া থাকা ব্যবহারকারীর সঙ্গে নির্দিষ্ট বার্তা বিনিময় করা সহজতর করে তোলে।

এই চার্টটি দেখুন যাতে ভিন্ন ভিন্ন রঙ ভিন্ন ভিন্ন সংস্কৃতিতে কি অর্থে ব্যবহার করা হয় তা দেখানো হয়েছে।

চলুন সংক্ষিপ্ত আকারে আলোচনা করি তিনটি প্রাথমিক রঙঃ হলুদ, লাল, এবং নীল দিয়ে কি কি বোঝানো হয়ে থাকে।

হলুদ

হলুদ রঙ অন্যান্য রঙের চেয়ে একজন ব্যবহারকারীর মনোযোগ বেশি করে আকৃষ্ট করে থাকে এবং সাধারণত সুখ এবং সূর্যালোক বোঝাতে ব্যবহার করা হয়ে থাকে। অন্যদিকে, হলুদ দিয়ে "সতর্কীকরণ" বোঝানো হয়, যা বিভিন্ন ট্রাফিক সিগন্যালসমূহে দেখা যায়।

ওয়েবে হলুদের ব্যবহার বেশ দৃষ্টিকটু, তাই এটা খুব বেশি ব্যবহার না করাই ভালো। শুধুমাত্র গুরুত্বপূর্ণ তথ্য হাইলাইট করতেই এটা ব্যবহার করতে হবে।

লাল

কোন দেশে আপনি বাস করেন তার উপর নির্ভর করে, লাল রঙ দিয়ে অনেক কিছুই বোঝানো হতে পারে। লাল রঙ দিয়ে বিপদ থেকে শুরু করে রাগ, শক্তি, ভালবাসা এবং সুখও বোঝানো হয়ে থাকে। এটা দিয়ে যাই বোঝানো হোক না কেন, লাল সবসময় চূড়ান্ত অনুভূতি বা প্রতিক্রিয়া বুঝাতে ব্যবহার করা হয়।

ওয়েব ডিজাইনে লাল দিয়ে সাধারনত কোন জিনিষ মুছে যাওয়া অথবা ভুল হলে তা বোঝানো হয়ে থাকে। এটি একটি গাঢ় রঙ যা ব্যবহারকারীর দৃষ্টি আকর্ষণ করে তাই এটা একটি বিশেষ রঙ হিসাবে ভাল কাজ করে। একটি ওয়েবসাইটে লাল রঙের অনেক বেশি ব্যবহার অতিরঞ্জিত হতে পারে, এর ফলে কোন জিনিষটি আসলেই গুরুত্বপূর্ণ তা বোঝা কঠিন হয়ে উঠতে পারে।

নীল

নীল দিয়ে বেশিরভাগ সময়েই শান্তভাব ও দুঃখীভাব দুটোই বোঝানো হয়ে থাকে এবং এটা ওয়েবের সবচেয়ে জনপ্রিয় রঙ। 

একটি ডিজাইনে নীল রঙের ব্যবহার কি অনুভূতি সৃষ্টি করবে তা বেশিরভাগ ক্ষেত্রেই নির্ভর করে আমরা এজন্য কি ধরণের শেড ও হিউ ব্যবহার করেছি তার উপর। গাড় নীল দিয়ে শক্তি ও নির্ভরযোগ্যতা বোঝানো হয়, আর হালকা নীল দিয়ে মজা ও বন্ধুত্বভাব বোঝানো হয়ে থাকে।

কালার প্যালেট নির্বাচন করা

বেশিরভাগ সাইটেই সাধারণত ধারাবাহিকভাবে বিভিন্ন ধরণের রঙ ব্যবহার করা হয় যা ক্রমান্বয়ে সাজানো থাকে এবং একটি নির্দিষ্ট ডিজাইনের বিশেষ অনুভূতি প্রকাশ করে থাকে।  রঙ নির্বাচন ডিজাইনের অন্যান্য সিদ্ধান্তের মতই গুরুত্বপূর্ণ, যাতে আমরা খুব সহজেই বুঝতে পারি কোন রংগুলো একসাথে ভালো করবে। এবং এই রংগুলো পেইজের মধ্যে বৈপরীত্য সৃষ্টি করে কি করে না। এবং এগুলো আমাদের বিষয়বস্তুর সাথে সংগতিপূর্ণ কিনা।

এখানে Tuts+ টাউন টিউটোরিয়াল সিরিজে ব্যবহৃত মূল কালার প্যালেটগুলো কিছুটা অন্যভাবে দেখানো হলো:

হাল্কা রংগুলো ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয়েছে। অন্যদিকে গাড় রংগুলো টেক্সট কালার ও নির্দিষ্ট সেকশন হাইলাইট করতে ব্যবহার করা হয়েছে।

সম্পূরক রং এবং বিপরীত রং

সাধারনভাবে বলতে গেলে, রঙ চক্রে এমনভাবে রংগুলো সাজানো থাকে, যা দৃষ্টিশক্তির জন্য সহায়ক। এগুলো হচ্ছে সম্পূরক রং-যেগুলো মিশ্রিত করলে ধূসর রঙের শেড সৃষ্টি করবে। কাজের সুবিধার্থে একটি রংচক্রে বেশ কিছু রং পাশাপাশি রেখে কাজ করা সম্ভব, কিন্তু সঠিক রং পেতে স্যাটুরেশন এবং উজ্জ্বলতার মধ্যে সমন্বয় করে নিতে হবে।

আমরা পূর্ববর্তী ডিজাইন বেসিক টিউটোরিয়াল থেকে রংয়ের পার্থক্য এখানে কিছুটা তুলে ধরেছি, কিন্তু এখন আমরা এই বিষয়টি সংক্ষিপ্ত আকারে কিছুটা অন্যরকমভাবে প্রকাশ করবো।

রঙ্গের সঠিক বৈসাদৃশ্য চোখের চাপ কমায় এবং চাক্ষুষ অনুক্রম পরিষ্কার করে তোলে। ভালো ও খারাপ বৈসাদৃশ্য চিহ্নিত করতে বিপরীত রংয়ের ব্যাকগ্রাউণ্ডে টেক্সট বা লেখা পরীক্ষা করে দেখা যেতে পারে।

উপরের ছবিতে দেখা যাচ্ছে বামদিকের ছবিটি ডানদিকের ছবির তুলনায় অস্পষ্ট। খারাপ বৈসাদৃশ্যের কোন লেখা পড়া খুব কঠিন এবং এটা একটি ঝাপসা ভাব সৃষ্টি করে আমাদের চোখের ক্ষতি করে। 

কালার প্যালেট টুলস

বেশ কিছু টুলস আছে যেখান থেকে পছন্দসই ও সুন্দর সুন্দর কালার প্যালেট বেছে নেয়া যায়। এগুলো অনেক সময় সাশ্রয় করে এবং বেশ অনুপ্রেরনাদায়ক।

Coolors

Coolors.co হচ্ছে এই মুহূর্তে সবচেয়ে সহজে ব্যবহারযোগ্য রঙ নির্বাচক।

এটাতে আছে অনেক সুন্দর সুন্দর কালার প্যালেট যেগুলো আমরা কেবল স্পেসবার ব্যবহার করেই কাস্টমাইজ ও পরিবর্তন করতে পারবো।

এডোবি কালার

এডোবি কালার হচ্ছে আরেকটি কালার সিলেকশন টুল যেটা দিয়ে অসাধারণ রং চক্র তৈরি করা সম্ভব, যেমনটি আমরা পূর্বে বলেছি।

এটা ব্যবহার করে আমরা চাইলে আমাদের রং চক্র পরিবর্তন করতে পারবো, রং প্যালেট নির্ধারণ করতে পারবো, এবং প্রত্যেকটি পৃথক রংকে আরও ভালোভাবে সমন্বয় করতে পারবো।

এডোবি কালার দিয়ে আমরা আমাদের প্রিয়  প্যালেটগুলো সংরক্ষন করতে পারবো এবং জনপ্রিয় ও প্রাক-নির্বাচিত প্যালেটগুলো সহজেই ব্রাউজ করে দেখত পারবো।

সাধারণ কিছু টিপস

যখন ওয়েবের জন্য  রং নির্বাচন করবেন এবং সেগুলো কোন পেইজের উপাদানের মধ্যে প্রয়োগ করবেন, তখন বেশ কিছু বিষয় মনে রাখবেন যাতে এই রংগুলো ব্যবহারকারীর অভিজ্ঞতার উন্নতি ঘটাতে সাহায্য করে।

বৈসাদৃশ্য

রংয়ের বৈসাদৃশ্যের বিষয়টি খুব গুরুত্বপূর্ণ, তাই  এ নিয়ে কোন সন্দেহ থাকলে নিরাপদ অপশন বেছে নেয়াই সবচেয়ে ভাল, এমনকি যদি এটা দেখতে কিছুটা বিরক্তিকর মনে হয় তবুও বাদ দিতে হবে! একজন ডিজাইনার হিসেবে আমাদের দায়িত্ব ও কর্তব্য হচ্ছে কোন ডিজাইন যাতে কার্যকর, সহজেই  ব্যবহারযোগ্য ও পাঠযোগ্য হয় তা নিশ্চিত করা। খারাপ কন্ট্রাস্ট বা বৈসাদৃশ্যের কারনে যত ভালো বিষয়বস্তুই হোক না কেন, তা মানুষ পড়তে সক্ষম হবে না।

তাই রং নির্বাচনের ক্ষেত্রে সাহসী হওয়া দোষনীয় নয়, কিন্তু এর ফলে যাতে একটি সাইটের মূল উদ্দেশ্য ও বিষয়বস্তু ব্যাহত না হয়।

রংয়ের সংখ্যা

রঙয়ের প্যালেট নির্বাচন টুল, যেমন Coolors, একটি প্যালেটে পাঁচটি রং সরবরাহ করে থাকে। এই পাঁচটি রং থেকে একটি অথবা দুইটি রং বেশী প্রভাবশালী অর্থাৎ, বেশি ব্যবহার করা হয় এবং অন্যগুলো কম ব্যবহার করা হয় যেমন, বাটন এবং লিঙ্কের মত জিনিষের ক্ষেত্রে ব্যবহার করা হয়।

একসাথে পাঁচটি রঙয়ের বেশী ব্যবহার করা হলে ডিজাইনটি হ-য-ব-র-ল দেখাবে এবং দেখতে কঠিন মনে হবে; যদিও এখানে সাদা, কালো এবং ধূসর রং গণনায় ধরা হয় নি।

সাধারণ প্যাটার্নসমূহ

সাধারনত, বেশির ভাগ মানুষের কাছে বিশেষভাবে গ্রহণযোগ্য রঙয়ের সঠিক ব্যবহার বিকৃত না করা গুরুত্বপূর্ণ। যেমন, বেশীরভাগ মানুষের কাছে সবুজ দিয়ে "যুক্ত" হওয়া বা সংযুক্ত থাকা বোঝায় এবং লাল দিয়ে "বাদ" দেয়া বা মুছে দেয়া বোঝায়। ওয়েবসাইটের জন্য এর বিপরীত হিসেবে এই দুটি রঙয়ের ব্যবহার করা বাজে সিদ্ধান্ত। কারন এটা সাধারণত আশা করা হয় না এবং এরূপ রংয়ের ব্যবহার একজন ব্যবহারকারীকে দ্বিধান্বিত করে তুলবে।

সমাপ্তি

এই টিউটোরিয়ালে আমরা রঙের তত্ত্ব এবং রঙয়ের নিয়মাবলী এবং ওয়েবের জন্য কিভাবে সঠিক রং নির্বাচন ও ব্যবহার করতে হবে তা নিয়ে আলোচনা করলাম। প্রত্যেক রং-ই আলাদা আলাদা অর্থ বহন করে। আমাদেরকে নিশ্চিত করতে হবে, যাতে সচেতনভাবে এমন রং প্যালেট নির্বাচন করা হয়, যেটা আমাদের ওয়েবসাইটের বিষয়বস্তুর সাথে সংগতিপূর্ণ হয়।

পরবর্তী টিউটোরিয়ালে, কিভাবে আমরা আমাদের কঠোর পরিশ্রমের ফসল বন্ধু-বান্ধব ও পরিচিতজনের সাথে বিভিন্ন পদ্ধতিতে শেয়ার করতে পারি তা নিয়ে এবং কিছু চূড়ান্ত অভিমত নিয়ে আলোচনা করবো।

আপনাকে নগরীর আশেপাশেই দেখতে চাই!