دالة 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