ما هو خلّاط الألوان؟

امزج لونين معًا بشريط تمرير للنسبة وشاهد النتيجة في الوقت الفعلي. يعرض قيم HEX وRGB وHSL يمكنك نسخها مباشرة إلى الكود أو أداة التصميم.

اختر لونين، حدّد وضع المزج — RGB أو RYB أو LAB أو LCH أو HSL أو OKLCH — وحرّك مؤشّر النسبة بين ٠٪ و ١٠٠٪. وضع RGB يحسب المتوسّط مباشرة في فضاء الشاشة وهو الأسرع، لكنّ نقطة المنتصف قد تظهر باهتة. ووضع RYB يمزج مثل الطلاء الحقيقي، فيعطي الأزرق مع الأصفر لونًا أخضر والأحمر مع الأصفر لونًا برتقاليًا. أمّا LAB و LCH فيمزجان في فضاء إدراكي، فيكون الانتقال أنعم بين عائلات الألوان. ووضع OKLCH هو أحدث نموذج إدراكي متوافق مع مواصفة CSS color-mix، وغالبًا ما يعطي نقطة منتصف بأكثر مظهر طبيعي. تظهر النتائج بصيغ HEX و RGB و HSL و CMYK مع أقرب اسم لوني، إضافة إلى قراءة تباين WCAG على خلفية بيضاء وسوداء وتدرّج CSS خطّي جاهز للنسخ. توفر أزرار ٢٥ و ٥٠ و ٧٥ بالمائة قفزة فورية إلى نقاط المزج الشائعة دون سحب المؤشّر بدقّة.

كيفية الاستخدام

1. الخطوة 1 — اختر اللون الأول باستخدام أداة اختيار اللون أو أدخل قيمته بصيغة HEX.
2. الخطوة 2 — اختر اللون الثاني، ثم اضبط شريط نسبة المزج (0% = اللون الأول فقط، 100% = اللون الثاني فقط).
3. الخطوة 3 — اطّلع على نتيجة المزج مع أكواد اللون وانسخ القيم التي تحتاجها.

متى تستخدم

• بناء حالات hover و disabled بمزج لون الهوية مع الأبيض أو الرمادي.
• توليد نقاط متوسّطة لتدرّج CSS دون أن يتلوّن الوسط بلون كدر.
• إنشاء لون مساعد هادئ بمزج لونين من الهوية بنسبة منخفضة للتنبيهات الناعمة.

النتيجة

يمزج مصمم اللون الأزرق المؤسسي (#2196F3) مع الأبيض (#FFFFFF) بنسبة 30% لإنشاء تدرّج خفيف (#A1C9F8) لحالات التمرير في مجموعة واجهة المستخدم.

الأسئلة الشائعة

أيّ وضع مزج هو الأنسب في معظم الحالات؟

إن كان مسار البناء يدعمه فاستخدم OKLCH، فهو أكثر الأوضاع انتظامًا إدراكيًا، ويتوافق مع مواصفة CSS color-mix الحديثة. ثم يأتي LAB كخيار ثانٍ مدعوم في معظم أدوات التصميم. وضع RGB كافٍ إذا تشابه اللونان في الإضاءة، و LCH يحافظ على نقاء اللون بشكل أفضل، بينما HSL يناسب الدوران بين الصبغات أكثر من المزج السلس.

لماذا تبدو نقطة المنتصف في RGB أحياناً رمادية أو معكّرة؟

RGB يحسب المتوسّط رقمياً لا إدراكياً. الألوان المتكاملة مثل الأزرق والبرتقالي تُلغي قنوات R و G و B بعضها، فيتحوّل المنتصف إلى رمادي ضعيف الإشباع. التبديل إلى LAB أو LCH يحافظ على إشباع نقطة المنتصف. وللحصول على نتيجة مطابقة لمزج الطلاء الحقيقي، استخدم وضع RYB؛ فهو يمزج الأزرق والأصفر إلى أخضر بدلاً من الرمادي.

كيف يختلف هذا عن دالة CSS اسمها color-mix()؟

color-mix() متوفّرة في المتصفّحات الحديثة وتدعم srgb و lab و oklab و lch و oklch. هذه الأداة تعطي ناتج HEX يمكن لصقه في أنماط CSS الأقدم، مع منزلق بصري يضبط النسبة دون تخمين النسبة المئوية.

هل يمكنني مزج أكثر من لونين؟

ليس في خطوة واحدة، لكن سلسل الأداة: امزج A و B لتحصل على C، ثم امزج C مع D. لتدرّج ثلاثي أنعم، امزج A→B بنسبة ٥٠٪ و B→C بنسبة ٥٠٪ واستعمل هاتين النقطتين الوسطيّتين كمحطّتين تحيطان بـ B الأصلي.

ماذا تعني نسبة ٠٪ مقابل ١٠٠٪؟

٠٪ تعطيك اللون الأول صرفاً، و ١٠٠٪ تعطيك اللون الثاني صرفاً، و ٥٠٪ نقطة المنتصف. المنزلق يتحرّك بخطوة ١٪، فيمكن ضبط درجة فاتحة أو غامقة بدقّة — في حالات واجهات المستخدم، فرق بين ١٠٪ و ١٥٪ يبدو محسوساً.

أدوات ذات صلة