CSS color-mix()

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 للألوان. ومع ذلك، لم تكن هناك طريقة حقيقية لمزج الألوان في CSS. للاقتراب من ذلك، عليك إجراء عمليات حسابية على قيم الألوان الجزئية. في ما يلي مثال مصغّر على كيفية محاكاة 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);
}

هذا ما نريده. المرونة والقوة وواجهات برمجة التطبيقات المتكاملة أعجبكم منتج؟

مزج الألوان في CSS

يتوفّر CSS في عالم متعدد فضاءات الألوان والسلسلة اللونية، ولهذا السبب ليس من الاختياري تحديد فضاء الألوان للمزج. علاوةً على ذلك، يمكن أن تغيّر فضاءات الألوان المختلفة نتائج المزيج بشكل كبير، لذا فإنّ معرفة تأثيرات فضاء لوني ستساعدك في الحصول على النتائج التي تحتاج إليها.

للحصول على مقدّمة تفاعلية، جرِّب أداة color-mix() هذه: - استكشاف تأثيرات كل فضاء لوني - استكشاف تأثيرات استيفاء درجة اللون عند المزج في مساحة ألوان أسطوانية (lch وoklch وhsl وhwb). - تغيير الألوان التي يتم مزجها من خلال النقر على أي من مربّعَي الألوان العلويَين - استخدام شريط التمرير لتغيير نسبة المزج - رمز CSS الذي تم إنشاؤه color-mix() والمتاح في أسفل الصفحة

المزج في مساحات الألوان المختلفة

الفضاء اللوني الافتراضي للمزج (والـ تدرجات) هو 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);

له تأثير كبير.

لنأخذ blue وwhite كمثال آخر. لقد اخترت هذا المثال تحديدًا لأنّه حالة يمكن أن يؤثر فيها شكل فضاء لوني في النتائج. في هذه الحالة، تتحوّل معظم مساحات الألوان إلى اللون الأرجواني أثناء الانتقال من الأبيض إلى الأزرق. يوضّح هذا المثال أيضًا كيف أنّ oklab هو فضاء لوني موثوق جدًا للمزج، وهو الأقرب إلى توقّعات معظم الأشخاص بشأن مزج الأبيض والأزرق (بدون اللون الأرجواني).

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

إنّ تعلُّم تأثيرات فضاء لوني باستخدام color-mix() هو معرفة رائعة لـ إنشاء التدرجات أيضًا. يسمح أيضًا تنسيق اللون 4 للتدرجات بتحديد مساحة الألوان، حيث يعرض التدرج المزيج على مساحة معيّنة.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

إذا كنت تتساءل عن مساحة الألوان "الأفضل"، فليس هناك مساحة ألوان واحدة. ولهذا السبب، هناك العديد من الخيارات. لن يتم أيضًا ابتكار مساحات ألوان جديدة (راجِع oklch وoklab)، إذا كانت إحداها "الأفضل". يمكن أن يكون لكل مساحة ألوان لحظة فريدة للتألق وأن تكون الخيار المناسب.

على سبيل المثال، إذا كنت تريد نتيجة مزيج نابضة بالحياة، استخدِم hsl أو hwb. في العرض التوضيحي التالي، يتم مزج لونَين نابضَين بالحياة (الأرجواني والليموني) معًا، وينتج عن كل من hsl وhwb نتيجة نابضة بالحياة، بينما ينتج عن srgb وoklab ألوان غير مشبّعة.

إذا كنت تريد الاتساق والوضوح، استخدِم oklab. في العرض التوضيحي التالي الذي يمزج بين الأزرق والأسود، ينتج عن hsl وhwb ألوان نابضة بالحياة ومغيّرة درجة اللون بشكل مفرط، بينما ينتج عن srgb وoklab لون أزرق داكن.

خصِّص خمس دقائق لتجربة color-mix() playground، واختبِر ألوانًا مختلفة ومساحات، وستبدأ في التعرّف على مزايا كل مساحة. توقَّع أيضًا المزيد من الإرشادات حول مساحات الألوان بينما نتكيّف جميعًا مع إمكاناتها في واجهات المستخدِم.

تعديل طريقة استيفاء درجة اللون

إذا اخترت المزج في فضاء لوني أسطواني، أي فضاء لوني يتضمّن قناة درجة اللون h تقبل زاوية، يمكنك تحديد ما إذا كان نوع الاستكمال shorter وlonger وdecreasing وincreasing. تمت تغطية هذا الموضوع جيدًا في دليل الألوان بدقة HD هذا إذا أردت معرفة المزيد.

في ما يلي مثال مزج اللون الأزرق بالأبيض نفسه، ولكن هذه المرة، يكون ذلك فقط في المساحات الأسطوانية باستخدام طرق مختلفة لاستيفاء درجة اللون.

في ما يلي Codepen آخر أنشأته للمساعدة في تصوّر استيفاء درجة اللون، ولكن للتدرجات على وجه التحديد. أعتقد أنّ هذا سيساعدك في فهم كيفية إنتاج كل فضاء لوني لنتيجة المزيج عند تحديد استيفاء درجة اللون، لذا اطّلِع عليها.

المزج باستخدام تنسيقات ألوان مختلفة

لقد مزجنا حتى الآن في الغالب ألوان CSS المسماة، مثل blue وwhite. إنّ ميزة مزج الألوان في CSS جاهزة لمزج الألوان من فضاءَي ألوان مختلفَين. هذا سبب آخر لأهمية تحديد الفضاء اللوني للمزج، لأنّه يضبط المساحة الشائعة عندما لا يكون اللونان في الفضاء اللوني نفسه.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

في المثال السابق، سيتم تحويل hsl وdisplay-p3 إلى oklch ثم مزجهما. هذا رائع ومرن.

تعديل نسب المزج

من غير المرجّح أن تريد في كل مرة تمزج فيها أجزاءً متساوية من كل لون، كما هو موضّح في معظم الأمثلة حتى الآن. هناك بنية لتوضيح مقدار كل لون يجب أن يظهر في المزيج الناتج.

لبدء هذا الموضوع، إليك نموذج من عمليات المزج المتكافئة (ومن المواصفات):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

أرى أنّ هذه الأمثلة توضّح الحالات القصوى جيدًا. توضّح المجموعة الأولى من الأمثلة كيف أنّ% 50 ليست مطلوبة ولكن يمكن تحديدها اختياريًا. يوضّح المثال الأخير حالة مثيرة للاهتمام عندما تتجاوز النسب% 100 عند جمعها معًا، يتم تقليلها بالتساوي إلى %100 إجمالاً.

لاحظ أيضًا أنّه إذا حدّد لون واحد فقط نسبة، يُفترض أنّ اللون الآخر هو الباقي حتى %100. في ما يلي بعض الأمثلة الإضافية للمساعدة في توضيح هذا السلوك.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

توضّح هذه الأمثلة قاعدتَين: ‫1. عندما تتجاوز النسب %100، يتم تقليلها وتوزيعها بالتساوي. ‫1. عند توفير نسبة واحدة فقط، يتم ضبط اللون الآخر على %100 ناقص هذه النسبة.

القاعدة الأخيرة أقل وضوحًا بعض الشيء: ماذا يحدث إذا تم توفير نسب مئوية لكلا اللونَين ولم يبلغ مجموعها %100؟

color-mix(in lch, purple 20%, plum 20%)

يؤدي هذا المزيج من color-mix() إلى الشفافية، أي شفافية بنسبة 40%. عندما لا يبلغ مجموع النسب %100، لن يكون المزيج الناتج غير شفاف. لن يتم مزج أي من اللونَين بالكامل.

دمج color-mix()

مثل كل CSS، يتم التعامل مع الدمج بشكل جيد وكما هو متوقّع، وسيتم حلّ الدوال الداخلية أولاً وعرض قيمها في السياق الرئيسي.

color-mix(in lch, purple 40%, color-mix(plum, white))

لا تتردد في الدمج بقدر ما تحتاج إليه للحصول على النتيجة التي تعمل عليها.

إنشاء نظام ألوان فاتح وداكن

لننشئ أنظمة ألوان باستخدام color-mix().

نظام ألوان أساسي

في CSS التالي، يتم إنشاء مظهر فاتح ومظهر داكن استنادًا إلى لون ست عشري للعلامة التجارية. ينشئ المظهر الفاتح لونَين نصيَّين أزرقَين داكنَين ولونًا سطحيًا أبيض فاتحًا جدًا للخلفية. بعد ذلك، في الاستعلام عن وسائط الإعدادات المفضّلة الداكنة، يتم تعيين ألوان جديدة للخصائص المخصّصة بحيث تكون الخلفية داكنة وألوان النص فاتحة.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

يتم تحقيق كل ذلك من خلال مزج الأبيض أو الأسود بلون العلامة التجارية.

نظام ألوان متوسّط

يمكن الانتقال إلى خطوة أخرى من خلال إضافة أكثر من مظهر فاتح وداكن. في العرض التوضيحي التالي، تؤدي التغييرات في مجموعة أزرار الاختيار إلى تعديل سمة في علامة HTML [color-scheme="auto"]التي تتيح بعد ذلك للمحدّدات تطبيق نسق الألوان بشكل مشروط.

يعرض هذا العرض التوضيحي المتوسّط أيضًا تقنية لنسق الألوان حيث يتم إدراج جميع ألوان النسق في :root. يسهّل ذلك رؤيتها كلها معًا وتعديلها إذا لزم الأمر. في وقت لاحق من ورقة الأنماط، يمكنك استخدام المتغيّرات كما تم تعريفها. يوفّر ذلك البحث في ورقة الأنماط عن عمليات معالجة الألوان لأنّها جميعًا مضمّنة في كتلة :root الأولية.

حالات استخدام أكثر إثارة للاهتمام

لدى Ana Tudor عرض توضيحي رائع يتضمّن بعض حالات الاستخدام للدراسة:

تصحيح أخطاء `color-mix()` باستخدام "أدوات مطوّري البرامج"

تتوفّر في "أدوات مطوّري البرامج في Chrome" إمكانية دعم رائعة لـ color-mix(). تتعرّف الأدوات على البنية وتبرزها، وتنشئ معاينة للمزيج بجانب النمط مباشرةً في لوحة "الأنماط"، وتسمح باختيار ألوان بديلة.

سيبدو ذلك على النحو التالي في "أدوات مطوّري البرامج":

نتمنّى لكم مزجًا سعيدًا.