أداة مزج الألوان
امزج لونين في فضاء لوني تختاره وبأي نسبة، كما تفعل CSS color-mix(). أدخل لونين بأي تنسيق من CSS، وحدد نسبة اللون الثاني من 0 إلى 100 بالمئة، واختر بين OKLab وOKLCH وLab وLCH وsRGB وlinear sRGB وDisplay P3 وHSL وHWB وXYZ. تظهر النتيجة بصيغ HEX وRGB وHSL وOKLCH، بالإضافة إلى تعبير color-mix() جاهز لورقة الأنماط.
الأسئلة الشائعة
كيف تعمل النسبة؟
النسبة هي حصة اللون 2 في المزيج. تعيد نسبة 0% اللون 1، وتعيد نسبة 100% اللون 2، بينما تقع نسبة 50% في المنتصف بينهما ضمن الفضاء المحدد. وهذا يطابق color-mix(in space, color1 (100 - p)%, color2 p%).
أي فضاء لوني ينبغي أن أختار؟
فضاء OKLab، وهو الخيار الافتراضي، موحّد إدراكيًا ويتجنب النتائج الوسطى الداكنة أو العكرة. يمزج sRGB القنوات المرمّزة غاما مثل المتصفحات الأقدم وSass، ما يجعل مزج الألوان المشبعة أغمق وأقل حيوية. أما Lab فهو فضاء CIE الإدراكي الأقدم، ويتصرف بشكل مشابه لـ OKLab، لكن درجات الأزرق فيه أقل تساويًا.
ما وظيفة الفضاءات المعتمدة على تدرج اللون؟
تُجري OKLCH وLCH وHSL وHWB استيفاءً لتدرج اللون على القوس الأقصر لعجلة الألوان، وهو الخيار الافتراضي في CSS، لذا يحافظ اللون الوسطي على تشبعه وقد يكون أكثر حيوية من أي من اللونين المدخلين. وإذا كان أحد اللونين رماديًا محايدًا بلا تدرج لوني، يُستخدم تدرج اللون للآخر.
ما فائدة linear sRGB وXYZ؟
يمزج كلاهما شدة الضوء خطيًا، مثل تداخل حزم الضوء، لذا يبدو اللون الوسطي أكثر سطوعًا مما يبدو في sRGB. وهما مفيدان للتأثيرات المبنية على الفيزياء ولمحاكاة مظهر وحدات البكسل عند تعتيمها أو مزجها.
كيف تُعالج الشفافية؟
مثل CSS color-mix()، تستوفي أداة المزج الألوان باستخدام ألفا مضروبة مسبقًا، كي لا يسحب اللون الشفاف المزيج نحو الأسود. وتُستوفى قيمة ألفا نفسها بالنسبة ذاتها، وتظهر في hex ذي 8 أرقام وبعد الشرطة المائلة في دوال CSS.
ما تنسيقات الإدخال التي يمكنني استخدامها؟
تقبل الأداة رموز hex مع # أو بدونه، وأسماء ألوان CSS، وrgb() وhsl() وhwb() وlab() وlch() وoklab() وoklch() وفضاءات color() مثل display-p3، وcmyk()، بأي مزيج منها. ويمكن أن يصل طول كل لون إلى 100 حرفًا.
ماذا يحدث عندما تكون النتيجة خارج نطاق sRGB؟
قد يؤدي المزج في Display P3 أو OKLCH أو LCH إلى ألوان لا يستطيع sRGB عرضها. عندها تُحوَّل قيم HEX وRGB وHSL إلى sRGB باستخدام خوارزمية CSS Color 4، وتُرفق النتيجة بملاحظة، بينما تحتفظ قيمة OKLCH باللون غير المحوَّل.
كيف أستخدم تعبير color-mix()؟
ألصقه في أي خاصية CSS تقبل لونًا. يحدد التعبير المدخلات برموز hex، أو بواسطة oklch() للمدخلات ذات النطاق اللوني الواسع، ليعيد المتصفح حساب المزيج نفسه. يعمل color-mix() في جميع الإصدارات الحالية من Chrome وEdge وFirefox وSafari.
ما مدى دقة النتيجة؟
تكون الكمية نسبة مئوية صحيحة، ويُحسب المزيج بدقة كاملة باستخدام مكتبة culori. تُقرَّب قنوات RGB إلى أعداد صحيحة، ونسب HSL إلى منزلتين عشريتين، والسطوع والتشبع في OKLCH إلى أربع منازل، لذلك قد تختلف المتصفحات بمقدار خطوة واحدة في الرقم الأخير.
كيف أحصل على عدة درجات بين لونين؟
شغّل أداة المزج بكميات مختلفة، مثل 25% و50% و75%. ولإنشاء تدرج كامل باتجاه الأبيض أو الأسود أو الرمادي، تنشئ مولدات تدرجات الألوان والظلال والنغمات كل درجة في جدول واحد.