أقضي قدرًا مدهشًا من يومي في مكان ما بين ملف التصميم وورقة الأنماط، وأدفع لونًا نحو آخر حتى تبدو حالة التحليق أو الحدود أو التوقف المتدرج صحيحًا. لسنوات قمت بإجراء العمليات الحسابية في رأسي أو قمت بمقلبها في منتقي، وهو أمر جيد حتى تحتاج إلى اللون الدقيق في منتصف المسافة بين اللون الأزرق تمامًا واللون المحايد الدافئ وتحتاج إليه كرمز سداسي عشري يمكنك لصقه. لذلك قمت ببناء خلاط اللون على تولز.ديف يمزج بين لونين مع النسبة التي تتحكم فيها، ويقدم نفس أوضاع المزج التي يستخدمها محرر الصور، ويسلمك النتيجة إلى HEX وRGB وHSL. هذا هو الدليل الخاص به وماذا "؛ مزج الألوان والاقتباس؛ يعني على الشاشة.
ليرة تركية؛DR: يمزج خلاط الألوان لونين في لون واحد. تولز خلاط اللون يقحم لونين بنسبة قابلة للتعديل، ويدعم أوضاع المزج القابلة للفصل W3C (الضرب، الشاشة، التراكب، التغميق، التفتيح، الاختلاف، المتوسط)، ويبني تدرجًا من الخطوات المتوسطة بين الألوان، ويخرج كل نتيجة على شكل HEX، RGB، و HSL. يقبل أسماء الألوان السداسية، وrgb()، وhsl()، وCSS، ويعمل بالكامل من جانب العميل.
كيف تمزج لونين على الشاشة؟
الإجابة البسيطة هي المتوسط المرجح للونين '؛ القنوات الحمراء والخضراء والزرقاء. لخلط الأحمر (255, 0, 0) والأزرق (0, 0, 255) في أجزاء متساوية، يمكنك حساب متوسط كل قناة: يصبح اللون الأحمر (255+0)/2 = 128، يبقى الأخضر 0، يصبح اللون الأزرق (0+255)/2 = 128، العطاء (128, 0, 128)، وهو السداسي #800080، الأرجواني الصلب. قم بتحويل الوزن نحو جانب واحد وانزلق على طول الخط الفاصل بين اللونين. هذا هو بالضبط ما يفعله شريط تمرير النسبة: عند 0 بالمائة تحتفظ باللون الأول، وعند 100 بالمائة تهبط على اللون الثاني، و50 بالمائة هو الانقسام الزوجي.
هذا هو نفس الاستيفاء الذي يستخدمه تدرج CSS ثنائي التوقف، ولهذا السبب نقطة المنتصف linear-gradient(red, blue) هل هذا أرجواني. يجعل الخلاط العلاقة واضحة من خلال رسم التدرج بين اللونين كشريط من العينات، يمكنك نسخ كل منهما كنقطة توقف وسيطة. إذا كنت قد أردت "؛ ثلاثة ألوان متباعدة بالتساوي بين هذين الاثنين، "؛ شريط التدرج هو أسرع طريقة للحصول عليها.
تحذير صادق واحد، لأنه يفاجئ الناس: متوسط قنوات RGB ليس هو كيفية مزج الأصباغ. على الشاشة، الألوان فاتحة وتتحد بشكل إضافي؛ في مجموعة الطلاء، تكون صبغة وتتحد بشكل طرحي. مزج اتجاهات الضوء الأحمر والأخضر نحو اللون الزيتوني الباهت بدلاً من اللون الأصفر الزاهي الذي ستحصل عليه من الطلاء، لأنك تقوم بحساب متوسط قيم الضوء، وليس مزج الصبغة. هذا ليس خطأ في الأداة، بل هو طبيعة sRGB، والإصلاح عندما تريد نتيجة أكثر حيوية هو مزج الألوان التي تكون أقرب إلى بعضها البعض على العجلة. ال محول الألوان مفيد بجانب الخلاط عندما تريد رؤية نفس اللون معبرًا عنه عبر التنسيقات أثناء التفكير في اللون.
ما الفرق بين أوضاع المزج والمزج؟
المزيج هو المتوسط المرجح الموصوف أعلاه: فهو يهبط دائمًا في مكان ما على الخط المستقيم بين اللونين. أوضاع المزج هي شيء آخر تمامًا. إنها عمليات مزج الطبقات من برامج تحرير الصور، الموحدة للويب في W3C مستوى التركيب والمزج 1 المواصفات، وكل واحدة تجمع القنوات بصيغة مختلفة بدلاً من المتوسط البسيط.
| وضع | صيغة لكل قناة (القيم من 0 إلى 1) | تأثير |
|---|---|---|
| مزج | b (مرجح بالنسبة) |
المتوسط المرجح، يهبط بين اللونين |
| اضرب | a x b |
أغمق دائما؛ الأبيض يترك اللون دون تغيير، والأسود يفرض اللون الأسود |
| شاشة | a + b - a x b |
أخف دائما؛ معكوس الضرب |
| تراكب | اضرب أو اعرض حسب القاعدة | يزيد التباين |
| أظلم | min(a, b) |
يحافظ على القناة المظلمة |
| تفتيح | max(a, b) |
يحافظ على القناة الأخف |
| اختلاف | abs(a - b) |
مسافة القناة؛ الألوان المتطابقة تعطي اللون الأسود |
| متوسط | (a + b) / 2 |
المتوسط غير المرجح لكليهما |
الحدس الذي يستحق الحمل: الضرب دائمًا يصبح داكنًا لأن ضرب كسرين يعطي جزءًا أصغر، لذا فإن الأحمر مضروبًا في اللون الأزرق هو الأسود (كل لون يفتقد القناة الأخرى). تفتيح الشاشة دائمًا لأنها يتم تطبيقها على القيم المقلوبة. يمنحك الاختلاف مسافة قناة تلو الأخرى، ولهذا السبب يؤدي خلط اللون مع نفسه تحت الاختلاف إلى إنتاج أسود نقي. في الخلاط، يتصرف شريط تمرير النسبة مثل عتامة الطبقة: فهو يتلاشى النتيجة المخلوطة فوق اللون الأول، حتى تتمكن من طلب التأثير من الدقيق إلى الكامل.
ما الذي يتحكم فيه شريط تمرير النسبة؟
تحدد النسبة مدى قوة تطبيق اللون الثاني، أو النتيجة المخلوطة للوضع المختار، على اللون الأول. فكر في الأمر على أنه عتامة على الطبقة العليا. عند 0 بالمائة، تكون الطبقة العليا غير مرئية وترى اللون الأول دون تغيير. عند 100 بالمائة، تكون الطبقة العليا معتمة تمامًا وتحصل على المزيج الكامل لهذا الوضع. عند 50 بالمائة، تحصل على تقسيم متساوٍ. بالنسبة للمزيج العادي، يتم تقليل هذا إلى المتوسط المرجح المألوف؛ بالنسبة لوضع مثل الضرب، فإنه يتيح لك تطبيق تعتيم لطيف بدلاً من التأثير الكامل.
هذا النموذج الموحد متعمد، لأنه يعني أن شريط تمرير واحد يقوم بنفس المهمة المفاهيمية في كل وضع. من الناحية العملية، أستخدم نسبًا منخفضة لدفع اللون قليلاً نحو لون آخر (حالة التحويم التي هي "؛ الزر، ولكن 15 بالمائة نحو black"؛) ونسب عالية عندما أريد المزيج الكامل. ال مولد التدرج يلتقط من حيث يتوقف الخلاط عندما تريد تحويل زوج من الألوان المختلطة إلى تدرج CSS كامل متعدد التوقفات.
كيف يمكنني الحصول على اللون الدقيق في منتصف المسافة بين لونين؟
اضبط الوضع على Mix والنسبة على 50، والنتيجة هي نقطة المنتصف بالضبط. يمكنك أيضًا قراءته مباشرة من شريط التدرج: العينة المركزية هي اللون الأوسط. عندما تحتاج إلى عدة ألوان متباعدة بشكل متساوٍ بين نقطتي النهاية، ارفع عدد خطوات التدرج وانسخ العينات في المواضع التي تريدها. هذه هي المهمة اليومية التي تم تصميم الخلاط من أجلها، سواء كنت تقوم بإنشاء صبغات للوحة الألوان، أو تباعد ألوان تصور البيانات، أو العثور على اللون المحايد الموجود بين لونين من ألوان العلامة التجارية.
لبناء عائلات كاملة من لون واحد بدلا من مزج اثنين، فإن مولد ظلال الألوان هو الأنسب، لأنه يمزج لونًا واحدًا مع الأبيض والأسود والرمادي لإنتاج الصبغات والظلال والنغمات. وعندما تختار ألوانًا للنص أو واجهة المستخدم، قم بتشغيل النتيجة من خلال منتقي الألوان وفحص التباين، لأن اللون الذي يمتزج بشكل جميل لا يزال من الممكن أن يفشل في عتبة سهولة القراءة. تم وضع سير العمل الأوسع، من الانتقاء إلى التحقق إلى الشحن، في مجموعة أدوات مطور الويب مرشد.
لماذا تبدو ألواني المختلطة أحيانًا موحلة أو داكنة؟
هناك شيئان يسببان ذلك، وكلاهما يتعلق بمساحة اللون وليس بالأداة. الأول هو عدم التطابق بين الجمع والطرح الذي سبق ذكره: متوسط الألوان البعيدة في RGB ينجرف نحو اللون الرمادي، لذا فإن الألوان المعاكسة على العجلة تمتزج مع شيء باهت. والثاني هو أن قيم sRGB مشفرة بأشعة غاما، وليست ضوءًا خطيًا. سيتم أولاً تحويل المتوسط المادي الحقيقي للضوء إلى مساحة خطية، ومتوسط، ثم تحويله مرة أخرى، مما يحافظ على سطوع نقاط المنتصف. معظم الأدوات وتدرجات CSS ومحرري الصور يستكملون مباشرة في sRGB المشفر بأشعة غاما لأنه سريع ويمكن التنبؤ به ويتطابق مع ما يتوقعه المصممون من التدرج، لذلك يفعل هذا الخلاط الشيء نفسه. إذا كنت تريد مزيجًا أكثر سطوعًا، أو مزج ألوان أقرب، أو الاعتماد على وضع الشاشة، أو الوصول إلى مساحة موحدة إدراكيًا مثل OKLCH في CSS النهائي. أدوات خصوصية البيانات عبر الإنترنت يشرح الدليل لماذا، سواء كانت نقاط المنتصف موحلة أم لا، يعد إجراء هذه العمليات الحسابية في متصفحك بدلاً من الخادم هو الإعداد الافتراضي المناسب لأعمال التصميم التي تفضل الاحتفاظ بها محليًا.
الأسئلة المتداولة
كيف تخلط لونين؟
لمزج لونين، يمكنك حساب متوسط قنواتها الحمراء والخضراء والزرقاء، مرجحة بمقدار كل لون تريده. مزيج 50/50 من اللون الأحمر (255، 0، 0) والأزرق (0، 0، 255) متوسط إلى (128، 0، 128)، وهو أرجواني. تقوم هذه الأداة بإجراء هذا الاستيفاء لك وتتيح لك تغيير الوزن باستخدام شريط تمرير النسبة، حتى تتمكن من الهبوط في أي مكان بين اللونين بدلاً من نقطة المنتصف الدقيقة فقط.
ما الفرق بين الخلط والضرب؟
المزيج هو متوسط مرجح يقع بين اللونين، لذا فإن مزج اللون الأحمر والأزرق يعطي اللون الأرجواني. يجمعهما الضرب بالطريقة التي تفعلها مرشحات الحبر أو الضوء المتداخلة، ويضرب قيم القناة، لذلك ينتج دائمًا لونًا داكنًا مثل كلا المدخلين أو أغمق منهما. ضرب اللونين الأحمر والأزرق يعطي اللون الأسود، لأن كل لون يفتقد القناة التي يمتلكها الآخر. الضرب هو وضع مزج من تحرير الصور، وليس متوسطًا بسيطًا.
لماذا يؤدي خلط لونين ساطعين في بعض الأحيان إلى نتيجة موحلة؟
لأن متوسط قنوات RGB يحرك النتيجة نحو اللون الرمادي عندما يكون اللونان متباعدين على عجلة الألوان. متوسط اللون الأحمر والأخضر إلى بني زيتوني باهت بدلاً من الأصفر الزاهي، نظرًا لأن ألوان الشاشة تمتزج كضوء بينما اللون الأصفر الزاهي الذي قد تتوقعه يأتي من خلط الأصباغ. للحصول على مزيج أكثر حيوية، قم بمزج الألوان الأقرب في اللون، أو جرب وضع الشاشة، الذي يحافظ على النتائج أكثر إشراقًا.
هل يمكنني مزج الألوان في HSL بدلاً من RGB؟
يقوم هذا الخلاط بالتحريف في RGB، وهو ما تفعله تدرجات CSS ومحررات الصور افتراضيًا، ويقوم بالإبلاغ عن النتيجة في HSL أيضًا. يمكن التنبؤ بالخلط في RGB ويتطابق مع الطريقة التي يعرض بها تدرج CSS ثنائي التوقف. يمكن أن ينتقل استيفاء اللون في HSL لمسافة طويلة حول عجلة الألوان وينتج ألوانًا غير متوقعة بين الألوان، ولهذا السبب يعد استيفاء RGB هو الإعداد الافتراضي الأكثر أمانًا للمزيج للأغراض العامة.
ما الذي يتغير فيه شريط تمرير النسبة؟
تحدد النسبة مدى قوة تطبيق اللون الثاني، أو النتيجة المخلوطة، على الأول. عند 0 بالمائة تحصل على اللون الأول دون تغيير، وعند 100 بالمائة تحصل على اللون الثاني الكامل أو المزيج الكامل للوضع المختار، وعند 50 بالمائة تحصل على تقسيم متساوٍ. بالنسبة لأوضاع المزج، فإنه يتصرف مثل عتامة الطبقة في محرر الصور، مما يؤدي إلى تلاشي اللون المخلوط فوق القاعدة.
كيف أحصل على اللون في منتصف المسافة بين لونين؟
اضبط الوضع على Mix والنسبة على 50 بالمائة، والنتيجة هي نقطة المنتصف بالضبط. يمكنك أيضًا قراءته من شريط التدرج، حيث يكون اللون الأوسط هو اللون الأوسط. للحصول على تحكم أدق، أضف المزيد من الخطوات إلى التدرج وانسخ أي عينة متوسطة تتطابق مع الموضع الذي تحتاجه بين اللونين.
ما هي أوضاع المزج المستخدمة مثل الشاشة والتراكب؟
إنها أوضاع مزج الطبقات من برامج تحرير الصور، المحددة للويب في مواصفات W3C Compositing and Blending. تفتيح الشاشة وتستخدم للتوهج والإبرازات، وتضاعف اللون الداكن وتستخدم للظلال والصبغات، ويزيد التراكب من التباين من خلال الجمع بين الاثنين. تتيح لك معاينتها في الخلاط التنبؤ بكيفية دمج طبقتين ملونتين قبل تطبيقها في CSS أو أداة التصميم.
ما هي تنسيقات الألوان التي يقبلها الخلاط؟
يقبل الخلاط الرموز السداسية (ثلاثة أو ستة أو ثمانية أرقام)، وقيم rgb() وrgba()، وقيم hsl() وhsla()، وأسماء ألوان CSS الشائعة مثل المرجان أو rebeccapurple. يحتوي كل إدخال على عينة ألوان أصلية يمكنك النقر عليها للاختيار بصريًا، وتظهر كل نتيجة بتنسيق HEX وRGB وHSL حتى تتمكن من نسخ أي تنسيق تحتاجه ورقة الأنماط الخاصة بك.
هل خلاط الألوان مجاني وخاص؟
نعم. خلاط الألوان مجاني تمامًا بدون تسجيل ولا علامات مائية ولا حدود للاستخدام، وكل عملية حسابية تحدث في متصفحك. لا يتم تحميل الألوان التي تدخلها أبدًا، لذلك لا يترك أي شيء تقوم بخلطه جهازك، ولأن العمليات الحسابية تعمل محليًا، تستمر الأداة في العمل إذا فقدت اتصالك بعد تحميل الصفحة.
