کنٹراسٹ چیکر کے ساتھ کسی بھی تصویر سے کلر پیلیٹ حاصل کریں

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

مفت ٹول آپ کے براؤزر میں چلتا ہے۔ آپ کی تصویر کبھی اپ لوڈ نہیں ہوتی: اس صفحے کے دوسری طرف کوئی سرور نہیں ہے۔
ایک تصویر منتخب کریں، یا یہاں ڈالیں JPG، PNG یا WebP · 40 MB تک · کچھ کہیں نہیں بھیجا جاتا

ایک فوٹو منتخب کریں اور اس کے اہم رنگ یہاں ظاہر ہوں گے، ہر جوڑے کے درمیان کنٹراسٹ کے ساتھ۔

رنگ کیسے منتخب کیے جاتے ہیں

یہ ٹول آپ کی تصویر کی ایک چھوٹی کاپی بناتا ہے، جس کا سب سے لمبا رخ زیادہ سے زیادہ 160 پکسلز کا ہوتا ہے، اور ہر اُس پکسل کو گنتا ہے جو شفاف نہ ہو۔ پھر یہ k-means clustering کے ذریعے ملتے جلتے پکسلز کو گروپوں میں رکھتا ہے اور ہر گروپ کا اوسط رنگ بتاتا ہے، سب سے بڑا گروپ پہلے۔ ہر swatch پر فیصد یہ ظاہر کرتا ہے کہ وہ گروپ تصویر کے کتنے حصے پر محیط ہے۔

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

5 سے 8 رنگ طلب کریں۔ سادہ پس منظر پر کسی پروڈکٹ کی تصویر کے لیے عام طور پر 5 یا 6 کافی ہوتے ہیں۔ مصروف لائف اسٹائل تصویر 8 پر بہتر لگتی ہے۔ اگر تصویر میں آپ کی طلب سے کم الگ الگ رنگ ہوں، تو ٹول یہ بتا دیتا ہے اور جو رنگ ملے وہ دکھاتا ہے۔

کنٹراسٹ میٹرکس پڑھنا

ہر رنگ کو ہر دوسرے رنگ کے ساتھ جوڑا جاتا ہے، نیز سادہ سفید اور سیاہ کے ساتھ، اور ہر خانہ اُس کنٹراسٹ ریشو کو دکھاتا ہے جو row کے رنگ میں لکھے متن کا column کے رنگ کے پس منظر پر ہو۔ یہ ریشو WCAG تعریف پر عمل کرتا ہے: (L1 + 0.05) / (L2 + 0.05)، جہاں L1 اور L2 ہلکے اور گہرے رنگ کی نسبتی چمک ہیں۔ یہ 1:1 (ایک ہی رنگ دو بار) سے لے کر 21:1 (سفید پر سیاہ) تک چلتا ہے۔

لیبل وہ حدیں ہیں جو WCAG طے کرتی ہے:

AA large کے نشان والا خانہ کسی بڑی سرخی کے لیے ٹھیک ہے مگر کیپشن کے لیے بہت دھندلا ہے۔ W3C کی 1.4.3 کی وضاحت یہ بھی کہتی ہے کہ ریشو کو گول نہیں کیا جانا چاہیے، چنانچہ 4.499:1، 4.5:1 کو پورا نہیں کرتا۔ ٹول درست عدد پر فیصلہ کرتا ہے اور اسے دو اعشاریوں پر کاٹ کر دکھاتا ہے، کبھی اوپر گول نہیں کرتا۔

ایک حل شدہ مثال

فرض کریں تصویر آپ کو #1a3c6e کا نیوی اور #fdf6e3 کا کریم دیتی ہے۔ نیوی کی نسبتی چمک تقریباً 0.046 بنتی ہے اور کریم کی تقریباً 0.923۔ ریشو (0.923 + 0.05) / (0.046 + 0.05) ہے، جو اِن گول کیے گئے اعداد کے ساتھ تقریباً 10.1:1 اور درست اعداد کے ساتھ 10.16:1 ہے۔ یہ ہر متن کے لیے AAA پاس کرتا ہے، چنانچہ کریم اینڈ کارڈ پر نیوی متن کسی بھی سائز میں محفوظ ہے۔ اسی کریم پر #e07a2e جیسا درمیانی نارنجی رکھیں تو ریشو گر کر 2.78:1 ہو جاتا ہے، جو بڑے متن کے لیے بھی ناکام ہے۔ نارنجی کو کسی بٹن کے لیے بچا رکھیں جس پر سیاہ متن ہو (6.99:1، جو AA ہے مگر AAA سے بس تھوڑا کم)، یا کسی ایسی شکل کے لیے جس پر کوئی الفاظ نہ ہوں۔

ایکسپورٹ کا استعمال

CSS ایکسپورٹ کسٹم پراپرٹیز کا ایک :root بلاک ہوتا ہے، --color-1 اُس رنگ کے لیے جو تصویر کے سب سے زیادہ حصے پر محیط ہو، اور یوں نیچے کی طرف۔ JSON میں ہر رنگ کا hex، RGB، HSL اور تصویر میں اس کا حصہ ہوتا ہے، جسے ڈیزائن ٹوکن فائل میں پیسٹ کرنا یا کسی اسکرپٹ کو دینا آسان ہے۔ جب آپ جان لیں کہ کون سا رنگ پس منظر ہے، کون سا متن اور کون سا تضاد، تو متغیرات کا نام بدل لیں۔

یہ ٹول کیا نہیں کرتا

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

اگر آپ یہ ہاتھ سے نہیں کرنا چاہتے

Hermoso آٹوپائلٹ پر مارکیٹنگ ہے: یہ آپ کی مارکیٹ میں پہلے سے کام کرنے والے اشتہارات کی تحقیق کرتا ہے، برانڈ کے مطابق امیج اور ویڈیو اشتہارات بناتا ہے، پوسٹس شیڈول کرتا ہے اور آپ کے اپنے اشتہاری اکاؤنٹس پر پیڈ مہمات چلاتا ہے۔ جب آپ اپنی ویب سائٹ سے اپنا برانڈ شامل کرتے ہیں، تو یہ آپ کی پروڈکٹس، لوگو اور پیلیٹ سیکھتا ہے، اور آپ hex کوڈز کے ساتھ کیپشن اور اینڈ کارڈ کے رنگ سیٹ کر سکتے ہیں۔ یہ ویب ایپ میں کام کرتا ہے، یا اپنے MCP سرور کے ذریعے Claude، ChatGPT اور Cursor کے اندر۔

مفت ٹولز: سوشل میڈیا سائز گائیڈ · Instagram گرڈ میکر · Open Graph جنریٹر

اکثر پوچھے جانے والے سوالات

میں فوٹو سے کلر پیلیٹ کیسے حاصل کروں؟

فوٹو کو ٹول میں ڈالیں اور منتخب کریں کہ آپ کتنے رنگ چاہتے ہیں، 5 سے 8 تک۔ یہ ملتے جلتے پکسلز کو گروپ کرتا ہے اور ہر گروپ کا اوسط رنگ 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 پر پورا نہیں اترتا۔ ٹول ٹھیک عدد کے مطابق فیصلہ کرتا ہے۔

مجھے ہر بار وہی پیلیٹ کیوں ملتا ہے؟

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

کیا میری تصویر اپ لوڈ ہوتی ہے؟

نہیں۔ اسے آپ کے براؤزر کے اپنے فائل ریڈر سے پڑھا جاتا ہے اور آپ کے آلے پر ایک کینوس میں شمار کیا جاتا ہے۔ کچھ بھی کہیں نہیں بھیجا جاتا یا محفوظ نہیں کیا جاتا۔

Hermoso ایڈز بناتا ہے، پوسٹس شیڈول کرتا ہے اور مہمات چلاتا ہے۔ مفت شروع کریں، 250+ کمائے جانے والے مفت کریڈٹس، کوئی کارڈ نہیں۔

مفت شروع کریں →   قیمتیں دیکھیں