CSS color-mix()

Adam Argyle

CSS color-mix() ফাংশন আপনাকে যেকোনও মানানসই কালার স্পেসে, সরাসরি আপনার CSS থেকে রঙ মেশাতে দেয়।

color-mix()-এর আগে, কোনও রঙকে গাঢ়, হালকা বা ডিস্যাচুরেট করতে, ডেভেলপাররা CSS প্রিপ্রসেসর বা কালার চ্যানেলে calc() ব্যবহার করতেন।

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

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

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() CSS-এ রঙ মেশানোর ক্ষমতা নিয়ে আসে। কোন কালার স্পেস ব্যবহার করে মিশিয়ে কোন রঙ কতটা প্রাধান্য পাবে তা ডেভেলপাররা বেছে নিতে পারেন।

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

আমরা এটাই চাই। ফ্লেক্সিবিলিটি, পাওয়ার ও সম্পূর্ণ ফিচারযুক্ত API. দারুণ।

CSS-এ রঙ মেশানো

CSS একাধিক কালার স্পেস ও কালার গ্যামাট জগতে বিদ্যমান এবং এই কারণে মিক্সিংয়ের জন্য কালার স্পেস নির্দিষ্ট করা ঐচ্ছিক নয়। এছাড়াও, বিভিন্ন কালার স্পেস মিক্সের ফলাফলকে ব্যাপকভাবে পরিবর্তন করতে পারে, তাই কালার স্পেসের প্রভাব সম্পর্কে জানা থাকলে আপনি প্রয়োজনীয় ফলাফল পেতে পারেন।

ইন্টার‍্যাক্টিভ পরিচয়ের জন্য, এই color-mix() টুল ব্যবহার করে দেখুন: - প্রতিটি কালার স্পেসের প্রভাব এক্সপ্লোর করুন। - সিলিন্ডার আকৃতির কালার স্পেসে (lch, oklch, hsl ও hwb) মিক্স করার সময় হিউ ইন্টারপোলেশনের প্রভাব এক্সপ্লোর করুন। - উপরের দুটি কালার বক্সের যেকোনও একটিতে ক্লিক করে মিক্স করা হচ্ছে এমন রঙ পরিবর্তন করুন। - মিক্সিং রেশিও পরিবর্তন করতে স্লাইডার ব্যবহার করুন। - জেনারেট করা color-mix() CSS কোড নিচে উপলভ্য।

বিভিন্ন কালার স্পেসে মিক্স করা হচ্ছে

মিক্সিং (এবং গ্রেডিয়েন্ট)-এর জন্য ডিফল্ট কালার স্পেস হল oklab। এটি সামঞ্জস্যপূর্ণ ফলাফল প্রদান করে। আপনার প্রয়োজন অনুযায়ী মিক্স কাস্টমাইজ করতে, আপনি বিকল্প কালার স্পেসও নির্দিষ্ট করতে পারেন।

উদাহরণ হিসেবে black ও white-এর কথা ধরা যাক। তারা যে কালার স্পেসে মিক্স করে, তাতে খুব বেশি পার্থক্য হওয়ার কথা নয়, তাই না? ভুল।

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

এটির প্রভাব অনেক বেশি!

অন্য একটি উদাহরণ হিসেবে blue ও white-এর কথা ধরা যাক। আমি এটি বিশেষভাবে বেছে নিয়েছি কারণ এটি এমন একটি কেস যেখানে কালার স্পেসের আকার ফলাফলে প্রভাব ফেলতে পারে। এই ক্ষেত্রে সাদা থেকে নীল রঙে যাওয়ার সময় বেশিরভাগ কালার স্পেস বেগুনি হয়ে যায়। এছাড়াও, এটি দেখায় যে oklab কীভাবে মিক্সিংয়ের জন্য এত নির্ভরযোগ্য কালার স্পেস, এটি সাদা ও নীল রঙ মিক্স করা নিয়ে বেশিরভাগ লোকজনের প্রত্যাশার (কোনও বেগুনি রঙ নয়) সবচেয়ে কাছাকাছি।

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

color-mix()-এর সাথে কালার স্পেসের প্রভাব সম্পর্কে জানা গ্রেডিয়েন্ট তৈরি করার ক্ষেত্রেও দারুণ জ্ঞান। কালার ৪ সিনট্যাক্স কালার স্পেস নির্দিষ্ট করার জন্য গ্রেডিয়েন্টকেও অনুমতি দেয়, যেখানে একটি গ্রেডিয়েন্ট স্পেসের একটি এলাকা জুড়ে মিশ্রণ দেখায়।

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

আপনি যদি ভাবেন যে কোন কালার স্পেস "সবচেয়ে ভাল," তাহলে জেনে রাখুন যে এমন কোনও কালার স্পেস নেই। সেই জন্যই এত বিকল্প আছে! এছাড়াও, কোনও একটি "সেরা" হলে, নতুন কালার স্পেস আবিষ্কার করা হত না (oklch এবং oklab দেখুন)। প্রতিটি কালার স্পেসের ক্ষেত্রে সঠিক পছন্দ হিসেবে উজ্জ্বল হয়ে ওঠার অনন্য মুহূর্ত থাকতে পারে।

যেমন, আপনি যদি একটি প্রাণবন্ত মিক্স ফলাফল চান, তাহলে hsl বা hwb ব্যবহার করুন। নিম্নলিখিত ডেমোতে, দুটি প্রাণবন্ত রঙ (ম্যাজেন্টা এবং লাইম) একসাথে মিশ্রিত হয় এবং hsl এবং hwb উভয়ই একটি প্রাণবন্ত ফলাফল তৈরি করে, যখন srgb এবং oklab অসম্পৃক্ত রঙ তৈরি করে।

আপনি যদি ধারাবাহিকতা ও সূক্ষ্মতা চান, তাহলে oklab ব্যবহার করুন। নিচের ডেমোতে নীল ও কালো রঙ মেশানো হয়েছে। এতে hsl ও hwb-এর ফলে অতিরিক্ত উজ্জ্বল ও হিউ শিফটেড রঙ তৈরি হয়েছে, অন্যদিকে srgb ও oklab-এর ফলে গাঢ় নীল রঙ তৈরি হয়েছে।

color-mix() প্লেগ্রাউন্ডে পাঁচ মিনিট সময় দিন, বিভিন্ন রঙ ও স্পেস পরীক্ষা করুন এবং আপনি প্রতিটি স্পেসের সুবিধা বুঝতে শুরু করবেন। এছাড়াও, কালার স্পেস সম্পর্কে আরও নির্দেশিকা পাওয়ার আশা করুন, কারণ আমরা সবাই আমাদের ইউজার ইন্টারফেসে সেগুলির সম্ভাবনা অনুযায়ী অ্যাডজাস্ট করি।

হিউ ইন্টারপোলেশন পদ্ধতি অ্যাডজাস্ট করা হচ্ছে

আপনি যদি সিলিন্ডার আকৃতির কালার স্পেসে মিক্স করার বিকল্প বেছে নেন, তাহলে মূলত যেকোনও কালার স্পেসের সাথে h হিউ চ্যানেল যা একটি কোণ গ্রহণ করে, আপনি ইন্টারপোলেশন shorter, longer, decreasing এবং increasing-এ যায় কিনা তা নির্দিষ্ট করতে পারেন। আপনি আরও জানতে চাইলে, এই HD কালার গাইড-এ এই বিষয়ে বিস্তারিত তথ্য দেওয়া আছে।

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

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

বিভিন্ন রঙের সিনট্যাক্সের সাথে মেশানো হচ্ছে

এখনও পর্যন্ত আমরা বেশিরভাগ ক্ষেত্রে CSS-এর নাম দেওয়া রঙ মিশিয়েছি, যেমন blue এবং white। CSS color mixing দুটি আলাদা কালার স্পেস থেকে নেওয়া রঙ মেশানোর জন্য প্রস্তুত। এটি হল আরেকটি কারণ যার জন্য মিক্সিংয়ের জন্য কালার স্পেস নির্দিষ্ট করা গুরুত্বপূর্ণ, কারণ এটি দুটি রঙ একই স্পেসে না থাকলে সাধারণ স্পেস সেট করে।

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

আগের উদাহরণে, hsl এবং display-p3-কে oklch-এ কনভার্ট করা হবে এবং তারপর মিক্স করা হবে। বেশ ভালো ও ফ্লেক্সিবল।

মিক্সিং রেশিও অ্যাডজাস্ট করা

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

এই বিষয় শুরু করতে, এখানে মিক্সের একটি নমুনা দেওয়া হল যেগুলি সবই সমতুল্য (এবং স্পেসিফিকেশন থেকে নেওয়া):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

আমি দেখেছি যে এইসব উদাহরণ প্রান্তিক কেসগুলি ভালভাবে ব্যাখ্যা করে। প্রথম সেট উদাহরণে দেখানো হয়েছে যে ৫০% প্রয়োজন নেই, তবে ঐচ্ছিকভাবে উল্লেখ করা যেতে পারে। শেষ উদাহরণে একটি আকর্ষণীয় কেস দেখানো হয়েছে যেখানে একসাথে যোগ করলে অনুপাত ১০০% ছাড়িয়ে যায়। সেগুলি সমানভাবে মোট ১০০%-এ ক্ল্যাম্প করা হয়।

এছাড়াও, মনে রাখবেন যে যদি শুধুমাত্র একটি রঙ অনুপাত নির্দিষ্ট করে, তাহলে অন্যটি ১০০% থেকে অবশিষ্ট অংশ হিসেবে ধরে নেওয়া হয়। এই আচরণটি আরও ভালভাবে বুঝতে সাহায্য করার জন্য এখানে আরও কয়েকটি উদাহরণ দেওয়া হল।

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

এই উদাহরণগুলি দুটি নিয়ম ব্যাখ্যা করে: ১. অনুপাত ১০০% ছাড়িয়ে গেলে, সেগুলি ক্ল্যাম্প করে সমানভাবে ভাগ করা হয়। ১. শুধুমাত্র একটি অনুপাত প্রদান করা হলে, অন্য রঙটি ১০০ থেকে সেই অনুপাত বিয়োগ করে সেট করা হয়।

শেষ নিয়মটি একটু কম স্পষ্ট; দুটি রঙের জন্যই শতাংশের হিসেব দেওয়া হলে এবং সেগুলি যোগ করে ১০০% না হলে কী হবে?

color-mix(in lch, purple 20%, plum 20%)

color-mix()-এর এই কম্বিনেশনের ফলে 40% স্বচ্ছতা, স্বচ্ছতা পাওয়া যায়। অনুপাত ১০০% না হলে, ফলাফল হিসেবে পাওয়া মিক্স অস্বচ্ছ হবে না। কোনও রঙই সম্পূর্ণভাবে মেশানো হবে না।

color-mix() নেস্টিং করা হচ্ছে

সব CSS-এর মতো, নেস্টিং ভালভাবে এবং প্রত্যাশা অনুযায়ী ম্যানেজ করা হয়; ইনার ফাংশন প্রথমে সমাধান করবে এবং পেরেন্ট কনটেক্সটে তাদের ভ্যালু ফিরিয়ে দেবে।

color-mix(in lch, purple 40%, color-mix(plum, white))

আপনি যে ফলাফল পেতে চাইছেন তা পাওয়ার জন্য যত খুশি নেস্ট করতে পারেন।

লাইট ও ডার্ক রঙের স্কিম তৈরি করা

color-mix()-এর সাহায্যে কালার স্কিম তৈরি করা যাক!

একটি বেসিক রঙের স্কিম

নিম্নলিখিত CSS-এ, ব্র্যান্ডের হেক্স কালারের উপর ভিত্তি করে একটি হালকা ও গাঢ় থিম তৈরি করা হয়েছে। লাইট থিম দুটি গাঢ় নীল টেক্সট কালার ও খুব হালকা সাদা ব্যাকগ্রাউন্ড সারফেস কালার তৈরি করে। তারপর, ডার্ক থিম পছন্দ করা হলে মিডিয়া কোয়েরিতে কাস্টম প্রপার্টিতে নতুন রঙ অ্যাসাইন করা হয়, ফলে ব্যাকগ্রাউন্ড গাঢ় এবং টেক্সটের রঙ হালকা হয়ে যায়।

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

ব্র্যান্ডের রঙে সাদা বা কালো রঙ মিশিয়ে এই সবকটি রঙ তৈরি করা হয়।

ইন্টারমিডিয়েট কালার স্কিম

লাইট ও ডার্ক থিম ছাড়াও আরও থিম যোগ করে এটিকে আরও এক ধাপ এগিয়ে নিয়ে যাওয়া যেতে পারে। নিম্নলিখিত ডেমোতে, রেডিও গ্রুপে করা পরিবর্তন HTML ট্যাগে [color-scheme="auto"] একটি অ্যাট্রিবিউট আপডেট করে যা তারপরে কন্ডিশনালভাবে কালার থিম প্রয়োগ করার জন্য সিলেক্টরকে সক্ষম করে।

এই ইন্টারমিডিয়েট ডেমো থেকে কালার থিমিং টেকনিকও দেখানো হয় যেখানে সব থিমের রঙ :root-এ তালিকাভুক্ত করা হয়। এর ফলে, সেগুলি একসাথে দেখা এবং প্রয়োজন হলে অ্যাডজাস্ট করা সহজ হয়। স্টাইলশিটে পরে, আপনি ভেরিয়েবলগুলিকে যেভাবে সংজ্ঞায়িত করা হয়েছে সেইভাবেই ব্যবহার করতে পারবেন। এর ফলে, রঙ পরিবর্তন করার জন্য স্টাইলশিট ঘেঁটে দেখার প্রয়োজন হয় না, কারণ সেগুলি সবই প্রাথমিক :root ব্লকে থাকে।

আরও আকর্ষণীয় ব্যবহারিক ক্ষেত্র

Ana Tudor-এর কাছে কিছু ব্যবহারের কেস সহ একটি দুর্দান্ত ডেমো আছে অধ্যয়নের জন্য:

DevTools-এর সাহায্যে color-mix() ডিবাগ করা

Chrome DevTools-এ color-mix()-এর জন্য দারুণ সহায়তা আছে। এটি সিনট্যাক্স শনাক্ত করে হাইলাইট করে, 'স্টাইল' প্যানেলে স্টাইলের ঠিক পাশে মিক্সের প্রিভিউ তৈরি করে এবং বিকল্প রঙ বেছে নেওয়ার সুবিধা দেয়।

DevTools-এ এটি এই ধরনের দেখতে হবে:

মিক্সিং উপভোগ করুন!