فنکشن color-mix() CSS

تعریف و استفاده

CSS کا color-mix() فنکشن برای ترکیب دو رنگ به نسبت مشخص در فضای رنگی داده شده استفاده می‌شود.

مثال

مثال 1

رنگ‌های دوگانه را در فضای رنگی hsl با نسبت‌های مشخص ترکیب کنید:

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

آزمایش کنید

مثال 2

رنگ‌های دوگانه را در فضای رنگی oklab با نسبت‌های مختلف ترکیب کنید:

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 %)

جزئیات فنی

پشتیبانی مرورگر

تبلویغات میزانی نشانگر نسخه اولین مرورگرهایی هستند که این عملکرد را کامل پشتیبانی می‌کنند.

مرتبط پیج

مراجع:سی ای ایس رنگ