توابع 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 %)

جزئیات فنی

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

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

صفحات مرتبط

ارجاع:رنگ‌های CSS