تتيح لك دالة 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. في العرض التوضيحي التالي، يتم مزج لونَين نابضَين بالحياة (الأحمر الأرجواني والليموني) معًا، ويؤدي كلاهما إلى نتيجة نابضة بالحياة، في حين ينتج عن كل من srgb وoklab ألوانًا غير مشبّعة.
إذا كنت تريد الاتساق والدقة، فاستخدم oklab. في الإصدار التجريبي التالي، الذي يمزج بين اللونين الأزرق والأسود، يُنتج hsl وhwb ألوانًا نابضة بالحياة بشكل مفرط وألوان متغيرة الألوان، بينما يُنتج srgb وoklab لونًا أزرق داكنًا.
اقضِ خمس دقائق في ملعب color-mix()، واختبِر ألوانًا ومساحات مختلفة، وستبدأ في التعرّف على مزايا كل مساحة. ومن المتوقع أيضًا
الحصول على مزيد من الإرشادات حول مساحات الألوان بينما نتكيف جميعًا مع
إمكانياتها في واجهات المستخدم الخاصة بنا.
ضبط طريقة استقراء تدرج اللون
إذا اخترت المزج في مساحة لون أسطوانية، أي مساحة لونية
في قناة تدرج لون h تقبل الزاوية، يمكنك تحديد ما إذا كان الاستيفاء
shorter وlonger وdecreasing وincreasing. يمكنك الاطّلاع على المزيد من المعلومات في دليل الألوان العالية الدقة هذا.
إليك نفس مثال مزيج من اللون الأزرق إلى الأبيض، ولكن هذه المرة، موجودة فقط في المساحات الأسطوانية ذات طرق الاستيفاء المختلفة لتدرج اللون.
هذا رمز 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(). إنه يتعرف على بناء الجملة ويسلط الضوء عليه، وينشئ معاينة للمزيج مباشرةً بجوار النمط في جزء "Styles" (الأنماط) ويسمح باختيار ألوان بديلة.
ستبدو كما يلي في أدوات مطوري البرامج:
مع أطيب التحيات،