استخلاص الألوان من الصور: بناء لوحات ألوان احترافية

آخر تحديث: June 28, 2026

يُعد استخلاص لوحة ألوان من صورة فوتوغرافية أسرع طريقة لبناء مجموعة من الألوان التي تبدو وكأنها تنتمي لبعضها البعض بالفعل. لقد قامت الصورة الفوتوغرافية بالعمل الشاق لاختيار تدرجات لونية متناغمة؛ أما عملية الاستخلاص فتقتصر على قياسها. يغطي هذا الدليل كيفية عمل عملية الاستخلاص فعليًا، والأساليب التي تنتج لوحات ألوان يمكنك استخدامها في نظام تصميم، وقواعد التباين التي تحافظ على سهولة وصول تلك الألوان.

إجابة سريعة: كيف تستخلص الألوان من صورة؟

افتح الصورة في أداة اختيار الألوان (color picker)، وقم بأخذ عينات من أكثر 5 إلى 7 ألوان تكرارًا، ووزّنها بناءً على المساحة التي يغطيها كل لون. تجاهل التكرارات القريبة جدًا، واحتفظ بلون سائد واحد، ولونين ثانويين، ولون تمييز (accent) واحد. بعد ذلك، طبق قاعدة 60-30-10: 60% للون السائد، و30% للون الثانوي، و10% للون التمييز. تحقق من كل زوج من النص والخلفية مقابل مدقق تباين WCAG قبل النشر — فاللوحة اللونية التي تبدو جيدة ولكنها تفشل في التباين لا يمكن استخدامها للنص الحقيقي.

لماذا نستخلص الألوان من صورة؟

تحتوي الصورة الفوتوغرافية الجيدة بالفعل على لوحة ألوان متناغمة لأن المصور أو المشهد قام بتكوينها بهذه الطريقة. عندما تستخرج هذه الألوان، فإنك ترث هذا التناغم بدلاً من اختيار رموز Hex من الصفر. ولهذا السبب غالبًا ما يبدأ مصممو العلامات التجارية بالاعتماد على صورة رئيسية (hero image)، أو منظر طبيعي مفضل للمؤسس، أو صورة منتج.

البديل — وهو اختيار الألوان من عجلة الألوان — يعمل، ولكنه يميل إلى إنتاج لوحات ألوان صحيحة تقنيًا ولكنها تفتقر إلى العمق العاطفي. فالألوان المستخلصة من صورة حقيقية تحمل السياق الذي يجعلها تبدو مقصودة.

كيف يعمل استخلاص الألوان؟

يقلل الاستخلاص آلاف البكسلات المتميزة إلى عدد قليل من الألوان التمثيلية. تهيمن ثلاث طرق، ولكل منها مفاضلة (trade-off).

• يعد عد الترددات سريعًا ولكنه يبالغ في وزن الخلفيات الكبيرة مثل السماء.
• يحقق Median cut توازنًا بين السرعة والجودة وهو ما يستخدمه معظم المحررين.
• ينتج K-means أفضل النتائج "المصممة" ولكنه أبطأ.

تفصيل عملي: قم دائمًا بتقليل حجم الصورة إلى حوالي 100×100 بكسل قبل الاستخلاص. فالصورة عالية الدقة تحتوي على ملايين البكسلات والتفاصيل الإضافية لا تغير الألوان الرئيسية، بل تبطئ عملية العد فقط. توثق Mozilla canvas pixel manipulation reference خطوة قراءة البكسل التي تشكل أساس أدوات الاستخلاص المعتمدة على المتصفح.

ما هي الألوان التي يجب الاحتفاظ بها؟

عادةً ما تعيد عملية الاستخلاص عددًا أكبر من الألوان مما يمكنك استخدامه. قد تنتج الصورة اثني عشر مرشحًا، لكن لوحة الألوان القابلة للاستخدام تتراوح بين خمسة وسبعة ألوان. خطوة التصفية هي المكان الذي تقع فيه معظم لوحات الألوان في الخطأ.

• احتفظ بلون سائد واحد — وهو اللون الذي يغطي أكبر مساحة، وغالبًا ما يكون لونًا محايدًا أو درجة سماوية.
• احتفظ بلونين ثانويين يدعمان اللون السائد.
• احتفظ بلون تمييز (accent) واحد بالضبط لاستخدامه في عبارات الحث على اتخاذ إجراء (calls to action) والتظليل.
• تجاهل التكرارات القريبة جدًا؛ فدرجتان من الأخضر تفصل بينهما ثلاث درجات تُقرأ كلون موحل واحد.
• تجاهل الأسود النقي والأبيض النقي ما لم تكن التصميمات تحتاج إليهما كألوان محايدة.

قاعدة 60-30-10 لتطبيق لوحة الألوان

بمجرد حصولك على ألوانك، تخبرك قاعدة 60-30-10 بكمية كل لون الذي يجب استخدامه. وهي إرشادات مستمدة من التصميم الداخلي وتُترجم بسلاسة إلى واجهات المستخدم.

مثال تطبيقي: استخلص من صورة غابة وقد تحصل على أخضر سائد، وأخضر ثانوي أفتح، وبني كـ "accent". يصبح الأخضر هو خلفية الصفحة بنسبة 60%، ويملأ اللون الثانوي الأفتح البطاقات بنسبة 30%، ويدفع البني زر عبارة الحث على اتخاذ إجراء بنسبة 10%. تبدو النتيجة وكأنها الغابة دون أن تكون غابة حرفية.

كيف تتحقق من ألوان سهولة الوصول (Accessibility)؟

اللوحة اللونية التي تفشل في التباين ليست لوحة لونية مكتملة. يحتاج النص إلى نسبة تباين دنيا مقابل خلفيته ليكون مقروءًا، والمعيار هو WCAG 2.1.

• يحتاج النص العادي إلى تباين لا يقل عن 4.5:1 مقابل الخلفية.
• يحتاج النص الكبير (18pt أو 14pt bold) إلى 3:1.
• استهدف 7:1 للنص الأساسي عندما تستطيع؛ فهو يساعد القراء ذوي الرؤية المنخفضة.

اختبر كل زوج تخطط لاستخدامه بالفعل — التمييز على السائد، النص على الثانوي، وهكذا. يُعد WebAIM contrast checker الأداة المجانية القياسية، ويحدد W3C WCAG 2.1 contrast guidance الرياضيات. إذا فشل لون التمييز على خلفيتك، فإما أن قم بتغميق اللون المميز أو تفتيح الخلفية حتى ينجح الاختبار.

تحويل اللوحة إلى نظام تصميم (Design System)

مجموعة من رموز Hex ليست نظامًا حتى تقوم بتعيين أدوار وبناء متغيرات. هذه هي الخطوة التي تفصل بين لوحة المزاج (mood board) وبين شيء يمكن للمطور استخدامه.

1. قم بتسمية كل لون حسب دوره (أساسي، ثانوي، تمييز، سطح، نص)، وليس حسب درجة اللون (hue).
2. أنشئ متغيرًا فاتحًا وآخر داكن لكل لون لدعم كلا الوضعين.
3. حدد حالات التمرير النشط (hover and active states) عن طريق تحويل التشبع أو السطوع قليلاً.
4. قم بتثبيت اللوحة في متغيرات أداتك لتبقى متسقة.

بمجرد وضع اللوحة، يصبح بقية البناء أسرع. الأزرار والعناوين والبطاقات كلها تسحب من نفس الرموز المسماة (tokens). بالنسبة للصور التي ستقبع داخل هذا النظام، قم بتشغيلها عبر image compressor وimage resizer لكي تتوافق مع ميزانية الأداء الخاصة بالنظام. يغطي image optimization guide قرارات التنسيق والحجم التي تحافظ على تصميم غني بالألوان سريعًا.

متى يعطيك الاستخلاص لوحة ألوان خاطئة؟

يَقيس الاستخلاص ما هو موجود في الصورة، وليس ما تحتاجه علامتك التجارية. فيما يلي بعض أوضاع الفشل الشائعة:

• يهيمن سماء زرقاء ساطعة على العد فتجد نفسك بخمسة درجات من الأزرق.
• يتم تجاهل لون تمييز صغير ولكنه مهم لأنه يغطي مساحة قليلة.
• تُدخل القطع الناتجة عن الضغط (Compression artifacts) ألوان ضوضاء تبدو كعينات حقيقية.
• تنتج صورة ذات إضاءة مختلطة درجات متوسطة موحلة.

عندما تشعر أن اللوحة المستخلصة غير مناسبة، قم بوزن الاستخلاص بناءً على التأثير الإدراكي (perceptual impact) — مثل السطوع والتشبع وتباين الحواف — بدلاً من التردد الخام. أو اختر صورة مصدر مختلفة. تعد الصورة المصدر هي العامل الأكبر في ما إذا كانت اللوحة الناتجة قابلة للاستخدام، لذا فاختر واحدة لديها بالفعل المزاج الذي تريده. بالنسبة للأعمال الفنية للعلامة التجارية ذات الطابع الخاص حيث تريد لوحة ألوان ثنائية محكومة بدلاً من عينة مأخوذة، يوضح duotone effect guide كيفية تعيين صورة إلى لونين عمداً. إذا كانت الألوان المستخلصة ستدفع أيضًا مجموعة شعارات أو أيقونات، فإن SVG to PNG converter يحافظ على العلامات المتجهة (vector marks) حادة عند كل حجم تلمسه اللوحة.

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

كيف تستخلص الألوان من صورة؟

تقوم أداة بتجميع بكسلات الصورة حسب التشابه وتعيد أكثر الألوان شيوعًا كلوحة ألوان — عادةً ما تكون خمسة أو ستة. يأتي كل لون مع قيمة Hex أو RGB الخاصة به. والنتيجة هي لوحة ألوان مدفوعة بالبيانات ومؤسسة على الصورة بدلاً من التخمين.

أي الألوان المستخلصة يجب أن أحتفظ بها؟

اللون السائد (الأكثر تكرارًا)، ولونان تمييز، ولون محايد. تجاهل الألوان القريبة جدًا من بعضها البعض أو التي تظهر في مناطق صغيرة فقط. خمسة ألوان عادة ما تكون كافية؛ فالمزيد يفتت اللوحة اللونية. طبقها باستخدام قاعدة 60-30-10.

ما هي قاعدة 60-30-10؟

هي دليل تناسبي: 60% من التصميم باللون السائد، و30% بلون ثانوي، و10% بلون التمييز. تحافظ هذه القاعدة على توازن اللوحة اللونية بدلاً من أن تجعلها موحلة. تتغذى الألوان المستخلصة مباشرة في هذه الأدوار.

كيف أتحقق من ألوان سهولة الوصول؟

اختبر نسبة التباين بين النص وألوان الخلفية مقابل عتبات WCAG (4.5:1 للنص العادي). قد تبدو اللوحة اللونية جيدة ولكنها لا تزال تفشل في إمكانية الوصول إذا وُضع لون تمييز فاتح على خلفية فاتحة. اضبط الدرجة، وليس درجة اللون (hue)، لتصحيح التباين.

كم عدد الألوان التي يجب أن تحتوي عليها اللوحة؟

عادةً ما تكون خمسة: لون سائد، ولونان ثانويان، ولون تمييز، ولون محايد. المزيد يفتت اللوحة ويجعل من الصعب تطبيقها باستمرار. الخمسة ألوان تتطابق بسلاسة مع قاعدة التناسب 60-30-10.

كيف أطبق لوحة ألوان مستخلصة على تصميم؟

استخدم قاعدة 60-30-10: يغطي اللون السائد 60% من التصميم (عادةً الخلفية)، واللون الثانوي 30% (الأسطح، العناصر الثانوية)، ولون التمييز 10% (عبارات الحث على اتخاذ إجراء، التظليل). تحافظ هذه النسبة على توازن اللوحة اللونية بدلاً من أن تجعلها موحلة. تجاهل أي ألوان مستخلصة لا تتناسب مع هذه الأدوار الثلاثة، حتى لو ظهرت في الصورة المصدر.