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

يفعل المصممون هذا باستمرار: يجدون صورة بالأجواء المناسبة ثم يبنون منها لوحة ألوان. وهي طريقة موثوقة للحصول على ألوان متناسقة، لأنها متناسقة بالفعل في الصورة.

كيف تستخرج الألوان من صورة خطوة بخطوة

1. افتح مولّد لوحة الألوان المجاني.
2. أفلت صورة أو شعارًا أو رسمًا أو لقطة شاشة، أو الصقها باستخدام Ctrl+V.
3. اختر عدد الألوان المراد استخراجها. تُرتَّب اللوحة من اللون الأكثر سيادة إلى الأقل.
4. انقر على عيّنة لنسخ رمز HEX الخاص بها، أو انقر على الصورة لالتقاط بكسل محدد.
5. استكشف تناسقات الألوان (المتكاملة والمتجاورة والثلاثية) لتجد ألوانًا مميزة مناسبة.
6. صدّر اللوحة كـ متغيرات CSS أو JSON أو صورة PNG.

HEX أم RGB أم HSL: أي رمز تستخدم؟

الصيغة	مثال	الأنسب لـ
HEX	#2BA8A2	تصميم الويب وأدلة الهوية ومعظم تطبيقات التصميم
RGB	rgb(43, 168, 162)	الكود والشاشات وإضافة الشفافية مع RGBA
HSL	hsl(177, 59%, 41%)	إنشاء درجات أفتح وأغمق من اللون نفسه

الصيغ الثلاث تصف اللون نفسه. HEX هي الطريقة الأكثر شيوعًا لمشاركة الألوان، أما HSL (الصبغة والتشبع والإضاءة) فهي الأسهل في التعديل يدويًا: احتفظ بالصبغة وغيّر الإضاءة لتحصل على عائلة من الدرجات الفاتحة والداكنة للأزرار وحالات التمرير والخلفيات.

كيف يعمل استخراج لوحة الألوان

قد تحتوي الصورة على مئات الآلاف من الألوان المتقاربة. ولاختزالها إلى عدد قليل، تستخدم الأداة خوارزمية التجميع k-means:

1. يُعامَل كل بكسل كنقطة في فضاء ألوان ثلاثي الأبعاد (أحمر وأخضر وأزرق).
2. تضع الخوارزمية k نقاط بداية، نقطة لكل لون طلبته.
3. ينضم كل بكسل إلى أقرب نقطة، وتنتقل كل نقطة إلى متوسط مجموعتها.
4. يتكرر ذلك حتى تتوقف المجموعات عن التغير، وتكون المراكز النهائية هي لوحتك.

ولأن كل لون هو متوسط مجموعة كاملة من البكسلات، فإن النتيجة تمثل المظهر العام للصورة لا بكسلًا عشوائيًا.

تحويل الألوان المستخرجة إلى لوحة قابلة للاستخدام

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

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

ثم أضف لونين محايدين للنصوص: لونًا داكنًا جدًا (نادرًا ما يكون أسود خالصًا) ورماديًا متوسطًا للنصوص الثانوية.

شرح تناسقات الألوان

• المتكامل: اللون المقابل في دائرة الألوان. تباين عالٍ، ومثالي كلون مميز.
• المتجاورة: الألوان المجاورة. هادئة ومتناسقة، ومناسبة للخلفيات والتدرجات.
• الثلاثية: ثلاثة ألوان موزعة بالتساوي حول الدائرة. حيوية ومرحة، فاجعل أحدها هو المهيمن.

لا تنسَ إمكانية الوصول

الألوان المتناسقة ليست دائمًا سهلة القراءة. توصي إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) بنسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. وكثيرًا ما تفشل الألوان الباهتة المستخرجة من الصور كألوان للنصوص، لذا خصّصها للخلفيات واستخدم أغمق ألوانك للنص الأساسي.

أين تجد مصادر رائعة للوحات الألوان

• صور الطبيعة: الغابات والشواطئ وغروب الشمس تعطي لوحات متوازنة بطبيعتها.
• لقطات الأفلام واللوحات الفنية: يختار المصورون السينمائيون والفنانون ألوانهم بعناية.
• صور منتجاتك: لوحة تتناسب مع منتجاتك تجعل متجرك يبدو متماسكًا.
• شعارك: استخرج ألوان علامتك التجارية الدقيقة عندما لا يملك أحد الرموز الأصلية.

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

كيف أجد رمز اللون الدقيق لشيء في صورة؟

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

لماذا لا تطابق الألوان المستخرجة ما أراه؟

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

كم لونًا يجب أن تضم لوحة العلامة التجارية؟

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

هل تُرفع صورتي؟

لا. تُستخرج الألوان في متصفحك ولا تغادر الصورة جهازك أبدًا.

الخلاصة

استخراج لوحة من صورة هو أسرع طريق إلى ألوان متناسقة. استخرج من 5 إلى 6 ألوان، ونظّمها وفق قاعدة 60-30-10، وتحقق من التباين قبل استخدامها للنصوص.