اپنی پروڈکٹ کی تصاویر سے برانڈ کا رنگ پیلیٹ بنائیں

بہت سے چھوٹے برانڈز کے پاس لوگو فائل ہوتی ہے مگر رنگوں کی فہرست نہیں۔ رنگ خود پروڈکٹ میں ہوتے ہیں: بوتل، لیبل، ڈبہ، کپڑا۔ جب اشتہار، تھمب نیل یا کیپشن کا انداز بنانا ہو تو کوئی تصویر دیکھ کر hex کوڈ اندازے سے اٹھاتا ہے اور امید کرتا ہے۔

تقریباً دس منٹ میں اس سے بہتر ہو سکتا ہے۔ اصل پروڈکٹ کی تصاویر سے رنگ نکالیں، ہر ایک کو کام دیں، اور دیکھیں کون سے جوڑے بطور متن پڑھنے کے قابل ہیں۔ ہمارا مفت رنگ پیلیٹ ایکسٹریکٹر یہ نکالنے اور جانچنے کا کام آپ کے براؤزر میں کرتا ہے، کچھ اپ لوڈ نہیں ہوتا۔

موڈ بورڈ کے بجائے پروڈکٹ سے کیوں شروع کریں

لوگ آپ کے پروڈکٹ کو شیلف پر یا ہاتھ میں اس کی شکل سے پہچانتے ہیں۔ جس اشتہار کے رنگ پیک سے ملتے ہوں وہ ایک نظر میں اسی برانڈ جیسا لگتا ہے، اور جو رنگ سے ہٹ جائے وہ نقل جیسا لگتا ہے۔ پروڈکٹ سے لیا گیا پیلیٹ اس بارے میں بھی ایماندار ہوتا ہے کہ آپ واقعی کیا بیچتے ہیں، جو موڈ بورڈ شاذ ہی کرتا ہے۔

سروسز کے لیے بھی یہ کام کرتا ہے۔ اگر کوئی فزیکل پروڈکٹ نہیں تو اپنی بہترین اسکرین شاٹس، دکان کا سامنے کا حصہ یا ٹیم کی تصاویر استعمال کریں، جو کچھ لوگ پہلے ہی آپ سے منسلک کرتے ہیں۔

مرحلہ 1: تصاویر چنیں اور کاٹیں

دو یا تین صاف تصاویر چنیں: پروڈکٹ سادہ پس منظر پر، پیکیجنگ کا سامنے کا حصہ، اور ایک لائف اسٹائل شاٹ جو آپ کو پسند ہو۔ پھر سختی سے کراپ کریں۔ extractor ہر دی گئی پکسل گنتا ہے، تو لکڑی کی میز پر رکھی بوتل میز کو بھی آپ کے برانڈ رنگوں میں سے ایک کے طور پر واپس کر دے گی۔ پروڈکٹ اور لیبل تک کراپ کریں تو پیلیٹ پروڈکٹ ہی ہوگا۔

اگر ممکن ہو تو دن کی روشنی یا ہلکی روشنی میں شوٹ کریں۔ گرم لیمپ سفید پیکنگ کو کریمی بنا دیتا ہے اور ہر نکالا گیا رنگ اس رنگت کو ساتھ لے کر آتا ہے۔

مرحلہ 2: پانچ سے آٹھ رنگ نکالیں

ہر تصویر extractor میں ڈالیں اور صاف پروڈکٹ شاٹ کے لیے 5 یا 6 رنگ، کسی مصروف تصویر کے لیے 8 مانگیں۔ یہ ملتے جلتے پکسلز کو گروپ کرتا ہے اور ہر گروپ کا اوسط بڑے سے چھوٹے کی ترتیب میں دکھاتا ہے، ساتھ میں یہ کہ تصویر کا کتنا حصہ ہر ایک گھیرتا ہے۔ آغاز کا نقطہ طے شدہ ہے، اس لیے وہی تصویر ہمیشہ وہی پیلیٹ دیتی ہے، اور ایک چھوٹا روشن لہجہ، جیسے سفید بوتل پر لال ڈھکن، اپنا swatch لیتا ہے، اوسط میں گم نہیں ہوتا۔

اپنی تمام تصاویر چلائیں اور وہ رنگ تلاش کریں جو بار بار آئیں۔ وہی برانڈ ہیں۔ جو رنگ صرف ایک شاٹ میں آئے وہ عموماً پس منظر یا روشنی ہوتا ہے۔

مرحلہ 3: ہر رنگ کو ایک کام دیں

پیلیٹ تبھی کام کا ہے جب ہر رنگ کا کردار ہو۔ زیادہ تر برانڈز کو چار چاہئیں:

Background: وہ رنگ جس پر لے آؤٹ کا زیادہ حصہ ہوتا ہے۔ اکثر پیک کا بنیادی رنگ، یا ہلکا نیوٹرل۔
Text: ایک گہرا رنگ جو پس منظر پر پڑھا جا سکے۔ تقریباً سیاہ چلتا ہے۔ گہرا برانڈ رنگ بہتر ہے، اگر contrast چیک پاس کر لے۔
Accent: نمایاں رنگ، بٹن، قیمت کے اسٹیکر یا ایک ہائی لائٹ لفظ کے لیے۔
Support: ایک یا دو نیوٹرل، باکسز، ڈیوائیڈرز اور ثانوی متن کے لیے۔

تصویر نے جو کچھ دیا سب استعمال کرنے سے بچیں۔ کام کے واضح کردار والے پانچ نام دیے گئے رنگ سو اشتہارات کو یکساں رکھیں گے۔ بارہ نہیں رکھیں گے۔

مرحلہ 4: کسی بھی چیز پر لگانے سے پہلے contrast چیک کریں

وہ رنگ جوڑے جو بڑی اسکرین پر ٹھیک لگتے ہیں، دھوپ میں فون پر پڑھنا مشکل ہو سکتے ہیں، اور کم بینائی والے لوگوں کے لیے اس سے بھی زیادہ مشکل۔ W3C کی Web Content Accessibility Guidelines اس کے لیے ایک عدد دیتی ہیں، contrast ratio، جو 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 point، یا 14 point bold، WCAG کی تعریف کے تحت۔ اور یہ عدد سخت حدیں ہیں: W3C کی 1.4.3 پر رہنمائی کہتی ہے کہ حساب شدہ ratio کو گول نہیں کرنا چاہیے، تو 4.499:1، 4.5:1 پر پورا نہیں اترتا۔

WCAG ویب مواد کے لیے لکھا گیا تھا، اشتہارات کے لیے نہیں، مگر استدلال اسکرین پر موجود کسی بھی متن پر لاگو ہوتا ہے، ویڈیو پر جلائے گئے کیپشنز اور end card کے الفاظ سمیت۔

ایک عملی مثال

فرض کریں آپ کی پیکیجنگ ایک نیوی #1a3c6e، ایک کریم #fdf6e3 اور ایک نارنجی #e07a2e دیتی ہے۔

فارمولا (L1 + 0.05) / (L2 + 0.05) ہے، جہاں L1 ہلکے رنگ کی relative luminance ہے اور L2 گہرے کی۔ Relative luminance سیاہ کے لیے 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۔ جوڑے کو الٹ کرنے سے ratio کبھی نہیں بدلتا۔

تو کردار تقریباً خود ہی طے ہو جاتے ہیں: کریم پس منظر، نیوی متن، اور نارنجی بطور accent شکل جس پر سیاہ الفاظ ہوں (نیوی پر نارنجی صرف 3.65:1 ہے، جو صرف بڑے متن کے لیے AA ہے)۔ extractor یہ پورا گرڈ ایک ساتھ دکھاتا ہے، ہر رنگ دوسرے ہر رنگ کے مقابل، ساتھ میں سفید اور سیاہ، اور ہر خانہ AAA، AA، AA large یا Fail کی درجہ بندی کے ساتھ۔

مرحلہ 5: ایک بار لکھ لیں

پیلیٹ کو CSS custom properties یا JSON کے طور پر برآمد کریں اور اسے اپنی لوگو فائلوں کے ساتھ رکھیں۔ فیصلہ ہونے کے بعد متغیرات کو ان کے کام کے مطابق نام دیں: --brand-bg، --brand-text، --brand-accent ایک ماہ بعد --color-3 سے بہتر پڑھے جاتے ہیں۔ ہر ایک کے نیچے ایک لائن لکھیں کہ کون سے جوڑے پاس ہوئے، تاکہ کوئی دوبارہ چیک نہ کرے۔

پھر جو سرکاری اعداد آپ کے پاس پہلے سے ہوں ان سے ملائیں۔ تصویر آپ کے کیمرے کا دیکھا ہوا رنگ دیتی ہے، جو پرنٹ شدہ پیک کے قریب ہوتا ہے، ink spec کے عین مطابق نہیں۔ اگر آپ کے پرنٹر یا ڈیزائنر کے پاس درست قدریں ہیں تو وہی مانی جائیں گی۔

اشتہارات اور پوسٹس میں پیلیٹ استعمال کرنا

کیپشنز اور سب ٹائٹلز: آپ کا متن کا رنگ آپ کے پس منظر کے رنگ کے باکس پر، یا الٹا۔ پہلے جوڑا چیک کریں۔
End cards: پس منظر کا رنگ، لوگو اور ایک لائن آپ کے متن کے رنگ میں۔ accent ایک مختصر call to action کے پیچھے بٹن کی شکل بھر سکتا ہے۔
Thumbnails اور covers: ایک accent، ایک بڑا پڑھنے لائق لفظ، اور بہت سا پس منظر۔
پیکیجنگ پر QR codes: برانڈ رنگ کام کرتا ہے اگر وہ پیک سے واضح طور پر گہرا ہو۔ ہمارا QR code generator contrast کم ہونے پر خبردار کرتا ہے۔

Hermoso کہاں فٹ ہوتا ہے

Hermoso ایک AI marketing agent ہے۔ یہ آپ کے مارکیٹ میں پہلے سے کامیاب اشتہارات کی تحقیق کرتا ہے، آپ کے برانڈ کے مطابق image اور video اشتہارات بناتا ہے، آپ کے اپنے social accounts پر پوسٹ اور شیڈول کرتا ہے، اور آپ کے اپنے ad accounts پر paid campaigns چلاتا ہے۔ جب آپ اپنی ویب سائٹ سے برانڈ شامل کرتے ہیں تو یہ آپ کی پروڈکٹس، لوگو اور پیلیٹ سیکھ لیتا ہے۔ Captions اور end cards آپ کے کہے بغیر بند رہتے ہیں، اور جب آپ کہیں تو آپ hex codes سے متن، باکس اور end card کے رنگ مقرر کر سکتے ہیں، تاکہ یہاں چیک کیے گئے جوڑے ہی شائع ہوں۔ یہ web app میں کام کرتا ہے، یا Claude، ChatGPT اور Cursor کے اندر اپنے MCP server کے ذریعے۔

اکثر پوچھے گئے سوالات

میری پروڈکٹ کے رنگوں کے hex codes کیسے ڈھونڈوں؟

کسی صاف تصویر کو پروڈکٹ یا پیکیجنگ تک کراپ کریں اور کسی رنگ پیلیٹ ایکسٹریکٹر میں ڈالیں۔ یہ اہم رنگ HEX، RGB اور HSL میں دکھاتا ہے۔ دو یا تین تصاویر چلائیں اور وہ رنگ رکھیں جو بار بار آئیں۔

متن کو کتنے contrast ratio کی ضرورت ہے؟

WCAG 2.2 کے تحت level AA کو عام متن کے لیے 4.5:1 اور بڑے متن کے لیے 3:1 چاہیے، اور AAA کو 7:1 اور 4.5:1۔ بڑا متن کم از کم 18 point، یا 14 point bold ہوتا ہے۔

کیا AA کے لیے 4.49:1 کافی ہے؟

نہیں۔ W3C کہتی ہے کہ حد سے موازنہ کرتے وقت ratio کو گول نہیں کرنا چاہیے، تو 4.499:1، 4.5:1 پر پورا نہیں اترتا۔

برانڈ پیلیٹ میں کتنے رنگ ہونے چاہئیں؟

اتنے کہ ہر ایک کو کام ملے: عموماً ایک پس منظر، ایک متن کا رنگ، ایک accent اور ایک یا دو نیوٹرل۔ کام کے واضح کردار والے پانچ نام دیے گئے رنگ، لمبی فہرست سے زیادہ اشتہارات کو یکساں رکھتے ہیں۔

کیا تصویر کے رنگ درست ہوتے ہیں؟

نہیں۔ یہ وہ ہیں جو کیمرے نے اس روشنی میں ریکارڈ کیے، جو پروڈکٹ کے قریب ہیں مگر پرنٹ یا ink spec کے برابر نہیں۔ اگر آپ کے پاس سرکاری قدریں ہیں تو وہی استعمال کریں۔