CSS color-mix() ফাংশন

পরিভাষা ও ব্যবহার

CSS-র color-mix() ফাংশন ব্যবহার করে দেওয়া রঙ স্পেসে নির্দিষ্ট অনুপাতে দুই রঙের মিশ্রণ করা

উদাহরণ

উদাহরণ ১

এককোণীয় রংযুক্তি সময়ে নির্দিষ্ট অনুপাতে দুইটি রংযুক্তি মিশ্রণ করুন:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

স্বয়ং প্রয়াস করুন

উদাহরণ 2

ওকল্যাব রংযুক্তি সময়ে ভিন্ন অনুপাতে দুইটি রংযুক্তি মিশ্রণ করুন:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

স্বয়ং প্রয়াস করুন

CSS সংজ্ঞা

color-mix(color-interpolation-method, color1 %, color2 %)
মান বর্ণনা
color-interpolation-method

প্রয়োজনীয়। ব্যবহারকৃত রংযুক্তির অনুপাত পদ্ধতিকে নির্দেশ করে

এটি in শব্দটির পরে রংযুক্তি সময়ের নাম দ্বারা গঠিত

উপলব্ধ দুই ধরণ:

আকৃতির রংযুক্তি:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

এককোণীয় রংযুক্তি সময়:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

প্রয়োজনীয়। মিশ্রিত রংযুক্তি, এবং বাছাইযোগ্য প্রতিশত মান (0% থেকে 100%) রংযুক্তির অনুপাত নির্দেশ করে

ডিফল্ট প্রতিশত মান 50%।
color2 %

প্রয়োজনীয়। মিশ্রিত রংযুক্তি, এবং বাছাইযোগ্য প্রতিশত মান (0% থেকে 100%) রংযুক্তির অনুপাত নির্দেশ করে

ডিফল্ট প্রতিশত মান 50%।

প্রযুক্তিগত বিবরণ

সংস্করণ: CSS Color Module Level 5

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম এই ফাংশনটি সম্পূর্ণরূপে সমর্থনকারী ব্রাউজারের সংস্করণকে নির্দেশ করে

Chrome Edge Firefox স্যাফারি অপেরা
111 111 113 16.2 97

সংশ্লিষ্ট পৃষ্ঠা

সূত্র:CSS রঙ