CSS color-mix()

Adam Argyle

خدمة مقارنة الأسعار color-mix() مزج الألوان، في أي من مساحات الألوان المدعومة، مباشرةً من CSS.

دعم المتصفح

• 111
• 111
• 113
• 16.2

المصدر

قبل color-mix()، استخدَم مطوّرو البرامج لتعتيم أحد الألوان أو إخفائه أو إلغاء تشبُّعه. المعالجات المسبقة لـ CSS أو calc() على اللون بشكل أفضل.

قبل استخدام SCSS

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

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

قبل مع HSL

.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() الملعب لاختبار ألوان مختلفة. والمساحات، وستبدأ في التعرف على مزايا كل مساحة. كذلك نتوقع حدوث المزيد من الإرشادات حول مساحات الألوان بينما نتكيف جميعًا مع الإمكانات في واجهات المستخدم لدينا.

ضبط طريقة استقراء التدرج اللوني

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

ملاحظة: سيضيف الملعب color-mix() قائمة منسدلة إضافية للتحديد إذا كانت مساحة اللون أسطوانية. يمكنك تشغيل الفيديو للاطّلاع على التأثيرات على التشكيلة.

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

تجربة الإصدار التجريبي

إليك رمز برمجي آخر أنشأته للمساعدة في تصور استقراء اللون، ولكن خصيصًا للتدرجات. أعتقد أن هذا سيساعدك على فهم كيف يمكن لكل على الرغم من ذلك، تُنتج مساحة اللون نتيجة المزيج الخاصة بها عند تحديد استقراء التدرج اللوني، وندرسه!

تحذير: توفير طريقة استقراء التدرج اللوني لنموذج غير أسطواني مساحة اللون هي خطأ في البنية في color-mix().

المزج مع بناءات الألوان المختلفة

حتى الآن تم مزج ألوان 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() بشكل كبير. إنه يتعرف على وتسلط الضوء على بناء الجملة، وتنشئ معاينة للمزيج بجوار النمط في جزء الأنماط ويسمح باختيار ألوان بديلة.

سيظهر لك الشكل التالي في "أدوات مطوري البرامج":

مع أطيب التحيات،