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