আপনার UI-কে wyróż.cloudflare.com করার জন্য সঠিক রঙের প্যালেট (color palette) বেছে নেওয়ার বিকল্প কিছু নেই। এই টিউটোরিয়ালের মাধ্যমে আপনি শিখবেন যে UI তৈরির সময় এলিমেন্ট, ফন্ট এবং প্রায় সব কিছুর রঙ নির্ধারণ করা কতটা সহজ।
রঙ যোগ করতে, সিএসএস-এর color ডেটা টাইপ আছে, যা স্ট্যান্ডার্ড রেড, গ্রিন, ব্লু (RGB) ফরম্যাটে রঙ উপস্থাপন করে।
color সিনট্যাক্স
সিএসএস-এ রঙ সংজ্ঞায়িত করার একাধিক পদ্ধতি রয়েছে:
- কীওয়ার্ড দিয়ে। এগুলো স্ট্রিং হিসেবে টাইপ করা হয়, যেমন 'red', 'white', 'yellow' বা হেক্স নম্বর যেমন #fff।
- হেক্সাডেসিমেল নোটেশন দিয়ে, উদাহরণস্বরূপ #fff।
rgb()বাrgba()ফাংশনাল নোটেশন দিয়ে।- বা HSL ফাংশন যেমন
hsl()এবংhsla()ব্যবহার করে।
কীওয়ার্ড আইডেন্টিফায়ার ব্যবহার
যে কোনো এলিমেন্টে রঙ যোগ করার সবচেয়ে সহজ উপায় হলো কীওয়ার্ড অ্যাট্রিবিউট ব্যবহার করা।
দ্রষ্টব্য: আপনি কোন নির্দিষ্ট প্রপার্টি ব্যবহার করবেন রঙ যোগ করার জন্য (ব্যাকগ্রাউন্ড, টেক্সট বা এলিমেন্ট) সেটা নিয়ে কিছু নюয়ান্স রয়েছে। আমাদের উদাহরণে আমরা একটি পুরনো বাটন ব্যবহার করব।
<button class="color">Color Me</button>
আমাদের বাটন এলিমেন্টের সাথে রঙ যোগ করার দুটি অপশন রয়েছে। বা background-color প্রপার্টি দিয়ে বা color প্রপার্টি দিয়ে। এই কেসে color প্রপার্টি টেক্সটের রঙ পরিবর্তন করে এবং background-color, ব্যাকগ্রাউন্ডের। চলুন আমাদের বাটন সিলেক্ট করি এবং তারপর বাটনে রঙ যোগ করি!
সহজ কি না?
rgba() এবং hsl() ফাংশন
আপনি দেখতে পাচ্ছেন কীওয়ার্ড দিয়ে নির্দিষ্ট রঙ প্রপার্টিতে রঙ যোগ করা যায়। আপনি এই কীওয়ার্ড রঙ চিটশিট (cheatsheet) রেফার করতে পারেন সব অপশন দেখতে। যদিও কীওয়ার্ড রঙ আমাদের বিশাল রঙের সক্রিয়তা দেয়, তবুও সেটা সীমিত।
এই কীওয়ার্ড রঙ, বা প্রায় যেকোনো অন্য রঙ, হেক্স RGB বা RGB ডেসিমাল হিসেবে ও এক্সপ্রেস করা যায়। উদাহরণস্বরূপ 'black' হবে #000000 বা ডেসিমালে 0,0,0 এবং এভাবে। এই হেক্স বা ডেসিমাল অপশন দিয়ে আপনি আরও নির্দিষ্ট রঙ পেতে পারেন।
RGB ডেসিমাল যোগ করার একটি সহজ উপায় হলো rgb() ফাংশন ব্যবহার করা। প্রতিটি ডেসিমালের সর্বোচ্চ মান ২৫৫। চলুন আমাদের কীওয়ার্ড রঙ দুটি নতুন অপশন দিয়ে দেখাই:
button.color { /* RGB এবং ডেসিমাল */ color: #fff; background-color: rgb(210,105,30); }
লক্ষ্য করেছেন কি যে black-এ একই ক্যারেক্টার রিপিট হয়েছে? যখন একই ক্যারেক্টার হয়, তখন আপনি শুধু প্রথম তিনটি টাইপ করতে পারেন যেমন আমি white-এর জন্য #fff করলাম। এটি #ffffff হিসেবে ও এক্সপ্রেস করা যায়।
রঙ যোগ করার আরেকটি অপশন হলো hsl() ফাংশন ব্যবহার করা। HSL মানে হিউ (hue), স্যাচুরেশন (saturation), এবং লাইটনেস (lightness)। লাইটনেস হয় সাদা (100%) থেকে কালো (0%) পর্যন্ত পারসেন্টেজ। স্যাচুরেশনও একটি পারসেন্টেজ কিন্তু গ্রে রঙের জন্য যেখানে 100% মানে 'পূর্ণ' গ্রে রঙ। হিউ উপস্থাপন করে ডিগ্রি (0 থেকে 360) রঙ চক্রে (color wheel) RGB-তে যেখানে ০ হলো লাল, ১২০ হলো সবুজ এবং ২৪০ হলো নীল। আমি জানি এটা জটিল শুনাচ্ছে 😊।
ভিজ্যুয়াল স্টুডিও (Visual Studio) এর মত কোড এডিটর একটি রঙ পিকার (color picker) দিয়ে থাকে। চলুন hsl() টাইপ করুন তারপর হভার (hover) করুন এবং রঙ পিকার পপ আপ দেখুন।
বামপাশে আপনি হিউ ম্যানিপুলেট করতে পারেন, এবং অন্য দুটি বার স্যাচুরেশন এবং লাইটনেস। এর সাথে খেলুন এবং দেখুন কী কী কুল রঙ পেতে পারেন। HSL শেড (shades) এর জন্য উপযোগী, এবং আমরা স্যাচুরেশন এবং লাইটনেস দিয়ে ম্যানিপুলেট করতে পারি। কিছু লোক নিজস্ব প্রয়োজনের জন্য এটি পছন্দ করেন।
রঙের অপাসিটি (Opacity) মডিফাই করা
আপনি লক্ষ্য করতে পারেন যে rgb এবং hsl ফাংশন দুটোই rgba() বা hsla() হিসেবে এক্সপ্রেস করা যায়। 'a' মানে আলফা (alpha) কিন্তু আসলে এটা ট্রান্সপেরেন্সি / অপাসিটি যেখানে ০ মানে ট্রান্সপেরেন্ট এবং ১ মানে সম্পূর্ণ অপেক (opaque)।
অপাসিটি মডিফাই করে আপনি আপনার রঙ আরও রিফাইনড করতে পারেন। চলুন আমাদের বাটনের রঙ এর অপাসিটি মডিফাই করে শেষ করি:
button.color { color: #fff; background-color: rgba(210,105,30, 0.7); }
অপাসিটির সাথে আমাদের টেক্সট আরও ভালো পড়া যায়!
