সমস্ত প্রধান ইঞ্জিন এখন নতুন CSS কালার স্পেস এবং ফাংশন সমর্থন করে। কীভাবে তারা আপনার ডিজাইনগুলিতে প্রাণবন্ততা আনতে পারে তা খুঁজে বের করুন।
CSS এখন রঙের স্থানগুলিকে সমর্থন করে যা আমাদের sRGB স্বরগ্রামের বাইরের রঙগুলি অ্যাক্সেস করতে দেয়। এর মানে হল যে আপনি HD (হাই ডেফিনিশন) ডিসপ্লে সমর্থন করতে পারেন, HD গামুট থেকে রং ব্যবহার করে। ওয়েবে রঙের আরও ভাল ব্যবহার করতে এই সমর্থনটি নতুন ফাংশন সহ আসে।
CSS থেকে রঙের স্পেস অ্যাক্সেস করুন
আমাদের ইতিমধ্যেই বেশ কিছু ফাংশন রয়েছে যা আমাদের sRGB গামুটের মধ্যে রঙগুলি অ্যাক্সেস করতে দেয়— rgb() , hsl() এবং hwb() । এখন ব্রাউজারে সমর্থিত হল color() ফাংশন, যেকোন RGB কালার স্পেসের মধ্যে রঙ অ্যাক্সেস করার একটি স্বাভাবিক উপায়। এর মধ্যে রয়েছে sRGB, Display P3 এবং Rec2020। আপনি নিম্নলিখিত CSS এ কিছু উদাহরণ দেখতে পারেন:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
এছাড়াও lch() , lab() , oklch() , এবং oklab() ব্যবহার করে sRGB ব্যতীত রঙের স্থানগুলিতে অ্যাক্সেসের অনুমতি দেয় এমন বেশ কয়েকটি ফাংশন সমর্থিত।
আপনি হাই ডেফিনিশন CSS কালার গাইডে এই সমস্ত ভিন্ন রঙের স্থান সম্পর্কে জানতে পারেন।
color-mix() ফাংশন
এই নতুন রঙের স্থানগুলির পাশাপাশি, সমস্ত ইঞ্জিন এখন color-mix() ফাংশন সমর্থন করে। এই ফাংশনটি যেকোনও রঙের জায়গায় এক রঙের সাথে অন্য রঙের মিশ্রণকে সক্ষম করে। নিম্নলিখিত CSS-এ, srgb রঙের জায়গায়, 25% নীল সাদাতে মিশ্রিত হয়।
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
color-mix() সম্পর্কে আরও জানুন
এই নতুন ফাংশন এবং রঙের স্থানগুলি ওয়েবে প্রাণবন্ত HD রঙ আনার প্রতিশ্রুতি দেয়। অনুপ্রেরণার জন্য, gradient.style এ HD গ্রেডিয়েন্ট জেনারেটর ব্যবহার করে কিছু সুন্দর গ্রেডিয়েন্ট তৈরি করে শুরু করুন।