CSS কালার-মিক্স()

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-এ রং মিশ্রিত করার কোনো বাস্তব উপায় নেই। কাছাকাছি পেতে আপনাকে আংশিক রঙের মানগুলির গণিত করতে হবে। সিএসএস আজ কীভাবে মিক্সিং অনুকরণ করতে পারে তার একটি সংক্ষিপ্ত উদাহরণ এখানে দেওয়া হল:

.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 এটা ভালোবাসি.

সিএসএসে রং মেশানো

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

একটি ইন্টারেক্টিভ ভূমিকার জন্য, এই 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);