CodeKitHubما هي هذه الأداة؟
يقوم خلاط الألوان بإجراء استيفاء خطي بين قنوات الأحمر والأخضر والأزرق للونين بنسبة مختارة، وهي نفس الحسابات التي يستخدمها التدرج داخليًا. عند 0% تكون النتيجة اللون A، وعند 100% تكون اللون B، وعند 50% تكون المتوسط الحسابي لكل قناة RGB.
هذا يختلف عن مزج الطلاء الفعلي (الذي يعتمد على الطرح ويرتبط بالصبغة)، وليس نفسه أخذ المتوسط في مساحة HSL — الاستيفاء الخطي في RGB هو ما تستخدمه تدرجات CSS وأدوات التصميم ومعظم أدوات "اللون بين لونين"، لذا تتطابق النتيجة مع ما تراه في تدرج المتصفح بين نفس اللونين.
لماذا تستخدمها؟
- اعثر على لون تمرير أو حالة نشطة يبدو طبيعيًا ويقع بين لونك الأساسي ولون تمييز — بدلاً من تخمين تعديل عشوائي.
- شاهد كود HEX الدقيق عند أي نسبة، وليس مجرد تقدير بصري من لقطة شاشة لتدرج.
- يُنشئ التدرج المكوّن من 11 خطوة بنقرة واحدة لوحة ألوان كاملة من لون إلى آخر، مفيد لتصور البيانات أو التدرجات متعددة النقاط.
- انقر على أي خطوة لنسخ كود HEX الخاص بها فورًا.
- مجاني وفوري ومحلي بالكامل — بدون رفع ملفات وبدون حساب.
كيفية الاستخدام
- اختر اللون A واللون B باستخدام منتقيات الألوان أو بكتابة كود HEX.
- اسحب شريط تمرير النسبة لتحديد كمية اللون B الممزوجة.
- اقرأ قيم HEX وRGB الناتجة أعلى العينة اللونية.
- انقر على أي عينة في سلم الـ11 خطوة أدناه لنسخ كود HEX الخاص بها.
مثال
الإدخال
اللون A #3B82F6 (أزرق)، اللون B #F59E0B (كهرماني)، نسبة 50%الناتج
#9B9E7D — rgb(155, 158, 125)عند 50% بالضبط، تكون كل قناة RGB هي المتوسط الحسابي لقناتي اللونين المدخلين.
الأسئلة الشائعة
لماذا لا يتطابق هذا مع ما سأحصل عليه عند مزج طلاء حقيقي؟
مزج الطلاء عملية طرحية (الأصباغ تمتص الضوء) وتعتمد على الأصباغ المحددة المستخدمة — مزج الطلاء الأزرق والأصفر يعطي الأخضر، على سبيل المثال. هذه الأداة تمزج الضوء (قنوات RGB) بطريقة جمعية/خطية، وهي الطريقة التي تدمج بها الشاشات وتدرجات CSS ومعظم أدوات التصميم الرقمي الألوان. النظامان يُنتجان نتائج مختلفة حقًا بحكم التصميم، وليس بسبب خطأ.
هل هذا مثل linear-gradient في CSS بين اللونين؟
نعم — يقوم linear-gradient(اللونA, اللونB) في CSS باستيفاء قنوات RGB بنفس الطريقة التي تستخدمها هذه الأداة، لذا فإن اللون الذي تراه في منتصف ذلك التدرج يطابق نتيجة 50% هنا.
لماذا يبدو اللون الممزوج أحيانًا باهتًا أو رماديًا؟
مزج لونين مشبعين لكن مختلفين جدًا في الصبغة (مثل الأزرق والبرتقالي، وهما شبه متكاملين) في مساحة RGB غالبًا ما ينتج نقطة منتصف منخفضة التشبع ورمادية-بنية — هذه خاصية حقيقية للاستيفاء في RGB، وليست خللاً. إذا أردت مزيجًا أكثر حيوية، جرّب ألوانًا أقرب لبعضها على عجلة الألوان، أو امزج في مساحة HSL بتعديل الصبغة مع الحفاظ على تشبع عالٍ (وهو ما لا تفعله أداة المزج المباشر في RGB هذه).
هل يمكنني مزج أكثر من لونين في آن واحد؟
ليس في خطوة واحدة — تمزج الأداة لونين فقط بالضبط. لدمج ثلاثة ألوان، امزج أول لونين بالنسبة التي تريدها، وانسخ النتيجة، والصقها كلون A جديد مقابل لونك الثالث. القيام بذلك على مراحل يمنحك أيضًا تحكمًا في وزن كل لون، وهو ما لا يوفره متوسط ثلاثي مباشر.
هل يجب أن أستخدم هذه الأداة أم مولّد درجات الألوان؟
إذا كنت بحاجة إلى لون يقع بين لونين مختلفين — مثل درجة انتقالية بين أزرق علامتك التجارية ولون تمييز كهرماني — استخدم هذا الخلاط. إذا كنت بحاجة إلى نسخ أفتح وأغمق من لون واحد (حالات التمرير، الخلفيات، سلم بأسلوب Tailwind من 50 إلى 900)، استخدم بدلاً من ذلك مولّد درجات الألوان: فهو يثبّت الصبغة والتشبع ويغيّر الإضاءة فقط، لذا تبقى كل نتيجة ضمن نفس عائلة اللون بوضوح.
ما تنسيقات الألوان التي يمكنني كتابتها في حقول الإدخال؟
تقبل الحقول النصية أكواد HEX من 6 أرقام، مع أو بدون علامة # في البداية (مثل 3B82F6 أو #3B82F6). لا يتم تحليل صيغة HEX المختصرة من 3 أرقام أو تدوين rgb() أو أسماء الألوان في CSS هناك — لكن يمكنك اختيار أي لون بصريًا باستخدام منتقي الألوان الأصلي بجانب كل حقل، وسيتحدث حقل HEX تلقائيًا ليطابقه.