ابنِ لوحة ألوان لعلامتك من صور منتجاتك

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

يمكنك أن تفعل أفضل خلال عشر دقائق تقريباً. استخرج الألوان من صور المنتج الحقيقي، وأعطِ كل لون وظيفة، وتحقق من الأزواج المقروءة كنص. تقوم أداة استخراج لوحة الألوان المجانية بالاستخراج والفحص داخل متصفحك، دون رفع أي شيء.

لماذا نبدأ من المنتج لا من لوحة الإلهام

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

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

الخطوة 1: اختر الصور واقتصّها

اختر صورتين أو ثلاث واضحة: المنتج على خلفية بسيطة، ووجه العبوة أمامك، ولقطة نمط حياة تعجبك. ثم اقتصّها بعناية. فالأداة تحسب كل بكسل تعطيه لها، ولو وضعت زجاجة على طاولة خشبية لأعادت الطاولة كأحد ألوان علامتك. اقتصّ على المنتج والملصق، وستكون اللوحة هي المنتج.

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

الخطوة 2: استخرج من خمسة إلى ثمانية ألوان

ضع كل صورة في أداة الاستخراج، واطلب 5 أو 6 ألوان لصورة منتج نظيفة، أو 8 لصورة مزدحمة. فهي تجمع البكسلات المتشابهة وتعرض متوسط كل مجموعة، من الأكبر إلى الأصغر، مع نسبة الصورة التي يغطيها كل لون. ونقطة البداية ثابتة، فالصورة نفسها تعطي اللوحة نفسها دائماً، ولون مميز صغير ومشرق، كغطاء أحمر على زجاجة بيضاء، يحصل على خانته الخاصة بدلاً من أن يذوب في المتوسط.

شغّل كل صورك وابحث عن الألوان التي تتكرر. هذه هي العلامة. أما اللون الذي يظهر في لقطة واحدة فقط فغالباً ما يكون خلفية أو إضاءة.

الخطوة 3: امنح كل لون وظيفة

لا تفيد اللوحة إلا إذا كان لكل لون دور. ومعظم العلامات تحتاج أربعة:

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

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

الخطوة 4: افحص التباين قبل وضعه على أي شيء

أزواج الألوان التي تبدو جيدة على شاشة كبيرة قد يصعب قراءتها على هاتف في ضوء الشمس، وأصعب بكثير على ذوي ضعف البصر. وتعطي إرشادات الوصول إلى محتوى الويب (WCAG) الصادرة عن W3C رقماً لذلك، هو نسبة التباين، وتتراوح من 1:1 (اللون نفسه مرتين) إلى 21:1 (الأسود على الأبيض). والعتبات كالتالي:

	النص العادي	النص الكبير
AA (SC 1.4.3)	4.5:1	3:1
AAA (SC 1.4.6)	7:1	4.5:1

النص الكبير يعني 18 نقطة على الأقل، أو 14 نقطة عريضة، وفق تعريف WCAG. والأرقام حدود صارمة: يقول توجيه W3C بشأن المعيار 1.4.3 إن النسبة المحسوبة لا ينبغي تقريبها، فـ4.499:1 لا تحقق 4.5:1.

كُتبت WCAG لمحتوى الويب لا للإعلانات، لكن المنطق ينطبق على أي نص على الشاشة، بما في ذلك الترجمات المدمجة داخل الفيديو والكلمات على البطاقة الختامية.

مثال عملي

لنفترض أن عبوتك تعطيك كحلياً #1a3c6e وكريمياً #fdf6e3 وبرتقالياً #e07a2e.

الصيغة هي (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو الإضاءة النسبية للون الأفتح وL2 للأغمق. وتتراوح الإضاءة النسبية من 0 للأسود إلى 1 للأبيض. الكحلي يساوي تقريباً 0.046، والكريمي 0.923، والبرتقالي 0.300.

• نص كحلي على كريمي: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096، أي نحو 10.1 بهذه الأرقام المقربة، و10.16:1 بالدقة. وهو يجتاز AAA لأي حجم. هذا هو زوجك الرئيسي.
• نص برتقالي على كريمي: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350، أي نحو 2.78:1. وهذا يفشل حتى للنص الكبير. فلا ينبغي للبرتقالي أن يحمل كلمات على الكريمي.
• نص أسود على برتقالي: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05، أي 7.0 بهذه الأرقام المقربة، و6.99:1 بالدقة. يجتاز AA لكل نص لكنه يقصر قليلاً عن AAA. مناسب لنص زر.
• نص كريمي على كحلي: هو الزوج نفسه الأول، فالنسبة 10.16:1 نفسها. فعكس الزوج لا يغيّر النسبة أبداً.

لذا تكاد الأدوار تختار نفسها: خلفية كريمية، ونص كحلي، والبرتقالي شكلاً مميزاً بكلمات سوداء فوقه (الكحلي على البرتقالي 3.65:1 فقط، وهذا يكفي AA للنص الكبير وحده). وتعرض الأداة هذه الشبكة كاملة مرة واحدة، كل لون مقابل كل لون، إضافة إلى الأبيض والأسود، وكل خانة مصنفة AAA أو AA أو AA للنص الكبير أو فشل.

الخطوة 5: دوّنها مرة واحدة

صدّر اللوحة كمتغيرات CSS مخصصة أو JSON، واحفظها بجانب ملفات شعارك. وأعد تسمية المتغيرات بحسب وظيفتها بعد أن تقرر: --brand-bg و--brand-text و--brand-accent أوضح بكثير من --color-3 بعد شهر. وأضف سطراً تحت كل منها يذكر الأزواج التي اجتازت الفحص، حتى لا يعيد أحد الفحص.

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

استخدام اللوحة في الإعلانات والمنشورات

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

موقع Hermoso من ذلك

Hermoso وكيل تسويق بالذكاء الاصطناعي. يبحث في الإعلانات التي تنجح في سوقك، وينتج إعلانات صور وفيديو تحمل هوية علامتك، وينشر ويجدول على حساباتك الاجتماعية الخاصة، ويدير حملات مدفوعة على حسابات الإعلانات الخاصة بك. وعند إضافة علامتك من موقعك، يتعلم منتجاتك وشعارك ولوحة ألوانك. تبقى التعليقات والبطاقات الختامية مطفأة ما لم تطلب غير ذلك، وحين تطلب، يمكنك تحديد ألوان النص والصندوق والبطاقة الختامية بأكواد سِت عشرية، فتكون الأزواج التي فحصتها هنا هي التي تصدر فعلاً. يعمل في تطبيق الويب، أو داخل Claude وChatGPT وCursor عبر خادم MCP الخاص به.

أسئلة شائعة

كيف أجد الأكواد السِت عشرية لألوان منتجي؟

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

ما نسبة التباين التي يحتاجها النص؟

بموجب WCAG 2.2، يحتاج المستوى AA إلى 4.5:1 للنص العادي و3:1 للنص الكبير، ويحتاج AAA إلى 7:1 و4.5:1. والنص الكبير هو ما لا يقل عن 18 نقطة، أو 14 نقطة عريضة.

هل 4.49:1 كافية لمستوى AA؟

لا. تقول W3C إن النسبة لا ينبغي تقريبها عند مقارنتها بالعتبة، فـ4.499:1 لا تحقق 4.5:1.

كم لوناً ينبغي أن تحتوي لوحة العلامة؟

بقدر ما يكفي لإعطاء كل لون وظيفة: عادةً خلفية، ولون نص، ولون مميز، ومحايد أو اثنان. وخمسة ألوان مسماة بأدوار واضحة تُبقي الإعلانات أكثر تناسقاً من قائمة طويلة.

هل الألوان المأخوذة من صورة دقيقة؟

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