Utiliome

تصویر سے کلر پیلیٹ نکالیں

کسی بھی فوٹو یا السٹریشن سے متوازن 5 تا 12 رنگوں کا پیلیٹ نکالیں، انٹرایکٹو آئی ڈراپر سے عین پکسلز سیمپل کریں، اور CSS ویریبلز، Tailwind ٹوکنز یا PNG سواچ کارڈز ایکسپورٹ کریں۔

کوئی اپ لوڈ نہیںکوئی سائن اپ نہیںبیچ پروسیسنگ
5–12 Harmonious SwatchesClick-to-Pick EyedropperHEX / RGB / HSL / CSS / TailwindPNG Palette Card Export
ڈاؤن لوڈ
آف لائن انجن تیار ہے100% نجی ان براؤزر ورک اسپیس • صفر کلاؤڈ اپ لوڈ
ٹولز جن کی آپ کو بھی ضرورت ہو سکتی ہے

متعلقہ ٹولز

ڈومیننٹ کلر ایکسٹریکٹر

مقامی K-Means کلسٹرنگ کا استعمال کرتے ہوئے کسی بھی تصویر میں غالب رنگ اور عین مطابق پکسل کوریج فیصد (%) تلاش کریں۔ UI تھیمز، WCAG کنٹراسٹ، اور HEX/RGB کا پیش

کلر پیلیٹ جنریٹر

اپنے اگلے UI پروجیکٹ کے لیے خوبصورت کلر پیلیٹس اور گریڈیئنٹس تیار کریں، موافقت کریں اور برآمد کریں۔

ایکسیسبل کلر چیکر

WCAG 2.1 کنٹراسٹ کی تعمیل کو چیک کریں، رنگین اندھے پن کی تقلید کریں، اور قابل رسائی رنگوں کے جوڑے دریافت کریں۔

میٹیریل پیلیٹ جنریٹر

کسی بھی رنگ یا اپ لوڈ کردہ تصویر سے میٹریل ڈیزائن 3 اور میٹریل ڈیزائن 2 رنگ پیلیٹ، ٹونل شیڈز، اور UI پیش نظارہ بنائیں۔

CSS گریڈینٹ جنریٹر

بصری طور پر خوبصورت CSS گریڈینٹ بنائیں اور اپنی مرضی کے مطابق بنائیں اور کوڈ کو فوری طور پر کاپی کریں۔

SVG کو PNG میں تبدیل کریں

اپنے براؤزر میں فوری طور پر اپنی SVG ویکٹر امیجز کو اعلیٰ معیار کے PNG فارمیٹ میں تبدیل کریں۔

100% پرائیویٹ • صفر سرور فائل اپ لوڈ

Utiliome کا امیج کلر پیلیٹ ایکسٹریکٹر اور آئی ڈراپر کیوں استعمال کریں؟

سخت پرائیویسی، فوری عمل اور صفر رگڑ کے لیے بنایا گیا۔ کوئی سبسکرپشن، پے وال یا اکاؤنٹ نہیں۔

ادراک فاصلہ اور ہم آہنگی فلٹرنگ

ادراک RGB فاصلہ فلٹرنگ سے 5، 6، 8 یا 12 الگ رنگ سواچز نکالتا ہے تاکہ پیلیٹ ہائی لائٹس، مڈٹونز اور شیڈوز کو بغیر قریبی نقل سواچز کے کیپچر کرے۔

انٹرایکٹو کلک آن امیج آئی ڈراپر

اپ لوڈ شدہ فوٹو پر کہیں بھی کلک کر کے اس عین پکسل کی HEX/RGB/HSL ویلیو سیمپل کریں، اسے پیلیٹ کے سامنے پن کریں، اور کلپ بورڈ پر کاپی کریں۔

موڈ پری سیٹس (Vibrant، Pastel، Warm، Cool)

نکالے گئے امیج رنگوں کو HSL سیچوریشن، لائٹنس اور ہیو اینگل سے فلٹر کر کے اسی سورس فوٹو سے Vibrant، Soft Pastel، Warm یا Cool ڈیزائن اسکیمز بنائیں۔

1 کلک CSS، Tailwind، JSON اور PNG سواچ کارڈ

ایک کلک میں :root CSS کسٹم پراپرٹیز، Tailwind colors آبجیکٹس یا JSON اریز کاپی کریں، یا اپنی فوٹو اور HEX کوڈز والا ہائی ریزولوشن 1200×800 PNG پیلیٹ کارڈ ڈاؤن لوڈ کریں۔

Utiliome بمقابلہ روایتی کلاؤڈ متبادل

ہمارے لوکل فرسٹ WebAssembly انجن کا لیگیسی کلاؤڈ ٹولز سے موازنہ کریں۔

فیچر Utiliome (مقامی براؤزر) لیگیسی کلاؤڈ کنورٹرز
انٹرایکٹو پکسل آئی ڈراپر عین پکسل رنگ سیمپل اور پن کرنے کے لیے امیج کینوس پر کہیں بھی کلک کریں مینوئل پکسل چناؤ کے بغیر فکسڈ آٹو جنریٹڈ سواچز
ہم آہنگی اور موڈ فلٹرنگ 5 تا 12 سواچز + Balanced، Vibrant، Pastel، Warm اور Cool HSL فلٹرز 5 جامد سواچز جو اکثر مٹیلا بیک گراؤنڈ گرے دہراتے ہیں
ڈیولپر اور ڈیزائنر ایکسپورٹس HEX، RGB، HSL + CSS :root ویریبلز، Tailwind کنفیگ، JSON اور PNG کارڈ دستی ایک ایک HEX کاپی یا پے والڈ ایکسپورٹس
پرائیویسی اور رفتار 100٪ کلائنٹ سائیڈ HTML5 Canvas نکالنا (صفر سرور اپ لوڈ) موڈ بورڈز اور پرائیویٹ کلائنٹ اثاثے کلاؤڈ سرورز پر اپ لوڈ
یہ کیسے کام کرتا ہے

تصویر سے کلر پیلیٹ 3 آسان قدموں میں کیسے نکالیں

سافٹ ویئر انسٹال کرنے کی ضرورت نہیں۔ سب کچھ براہِ راست ویب براؤزر میں چلتا ہے۔

1

ایک یا کئی فوٹوز یا السٹریشنز چھوڑیں

کوئی بھی JPG، PNG، WebP، SVG یا AVIF تصویر ڈراپ زون میں کھینچ کر چھوڑیں۔ Utiliome پکسلز آپ کے براؤزر کی RAM میں مقامی ڈی کوڈ کرتا ہے۔

2

سواچ تعداد، موڈ چنیں اور کسٹم پکسلز پک کریں

5، 6، 8 یا 12 سواچز منتخب کریں، پیلیٹ موڈ (Balanced، Vibrant، Pastel، Warm یا Cool) سے فلٹر کریں، یا مخصوص ایکسنٹ پکسلز پن کرنے کے لیے تصویر پر براہ راست کلک کریں۔

3

HEX / CSS / Tailwind کاپی کریں یا PNG کارڈ ڈاؤن لوڈ کریں

HEX، RGB یا HSL کوڈ کاپی کرنے کے لیے کوئی سواچ کلک کریں، سائیڈ بار میں :root CSS ویریبلز یا Tailwind ٹوکنز ایکسپورٹ کریں، یا شیئر ایبل PNG پیلیٹ کارڈ ڈاؤن لوڈ کریں۔

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

فوری جواب: سادہ پکسل گنتی اکثر آسمان نیلا یا شیڈو گرے کے 6 قریباً ایک جیسے شیڈز واپس کرتی ہے۔ Utiliome 3D RGB ہسٹوگرام بننگ کو Euclidean ادراک فاصلہ فلٹرنگ (ΔRGB >= 34) اور HSL موڈ پابندیوں سے جوڑتا ہے تاکہ پیلیٹ کا ہر سواچ بصری طور پر الگ ہو۔

جب فوٹوگراف میں 12 ملین پکسلز ہوں تو ان میں سے 70٪ سے زیادہ اکثر ایک ہی بیک گراؤنڈ گریڈینٹ کے ہوتے ہیں (جیسے نیلا آسمان، گہرا اسٹوڈیو بیک ڈراپ، یا پودوں کا جھرمٹ)۔ سادہ فریکوئنسی سورٹ ایک رس پیلیٹ دیتا ہے جو اس 3٪ چمکدار فوکل ایکسنٹ کو چھوڑ دیتا ہے جو کمپوزیشن کو نمایاں بناتا ہے۔

Utiliome کا ہم آہنگ پیلیٹ انجن یہ تین مراحل میں حل کرتا ہے:

  1. سب سیمپلڈ 24 سٹیپ اسپیشل کوانٹائزیشن: نارملائزڈ کینوس گرڈ پر غیر شفاف پکسلز (alpha >= 128) سیمپل کرتا ہے اور ہر کلسٹر بن میں حقیقی RGB ویلیوز اوسط کرتا ہے تاکہ آؤٹ پٹ سواچز مصنوعی گرڈ مڈ پوائنٹس کے بجائے اصلی فوٹوگرافک ٹونز دکھائیں۔
  2. HSL موڈ اور کرومہ فلٹرنگ:امیدوار بنز کو Hue (0°–360°)، Saturation (0%–100%) اور Lightness (0%–100%) میں بدلتا ہے، تاکہ آپVibrant(S >= 35%)،Soft Pastel(L >= 60%, S <= 75%)،Warm(H <= 70° یا H >= 310°) یاCool (70° < H < 310°) ہم آہنگی الگ کر سکیں۔
  3. کم از کم Euclidean کلر فاصلہ (ΔE / ΔRGB گارڈریل): منتخب سواچز کے درمیان کم از کم 3D RGB ویکٹر فاصلہ نافذ کرتا ہے تاکہ ہائی لائٹس، مڈٹونز اور ایکسنٹس سب نمائندگی پائیں۔

امیج پیلیٹس پروڈکشن میں ایکسپورٹ: CSS کسٹم پراپرٹیز، Tailwind CSS اور ڈیزائن کارڈز

فوری جواب: آن کینوس آئی ڈراپر سے پیلیٹ نکالنے یا فائن ٹیون کرنے کے بعد آپ اسے فوری CSS :root ویریبلز، Tailwind theme.extend.colors آبجیکٹ، ساختی JSON اری، یا 1200×800 PNG پریزنٹیشن کارڈ کے طور پر ایکسپورٹ کر سکتے ہیں۔

بصری تحریک سے فرنٹ اینڈ کوڈ یا کلائنٹ موڈ بورڈز تک جانا چھ hex کوڈز ایک ایک کر کے کاپی پیسٹ کا تقاضا نہیں ہونا چاہیے:

ایکسپورٹ ہدف آؤٹ پٹ فارمیٹ بہترین ورک فلو استعمال
انفرادی سواچ کلک #HEX، rgb(r, g, b)، یا hsl(h, s%, l%) Figma، Photoshop، Canva یا Illustrator میں واحد رنگ چسپاں کرنا
CSS Variables (:root) --palette-1: #...; --palette-2: #...; Vanilla CSS، Astro، Svelte اور Web Components تھیمنگ
Tailwind CSS Config colors: { "brand-100": "#...", ... } براہ راست tailwind.config.mjs یا @theme بلاکس میں چھوڑنا
PNG پیلیٹ سواچ کارڈ 1200 × 800 px ہائی ریز PNG فوٹو + HEX لیبلز کے ساتھ Slack، Notion، پچ ڈیکس اور برانڈ گائیڈ لائنز میں موڈ بورڈز شیئر کرنا

Extract Color Palette بمقابلہ Dominant Color Extractor: کون سا ٹول استعمال کریں؟

فوری جواب: Extract Color Palette استعمال کریں جب آپ متنوع، جمالیاتی متوازن 5 تا 12 رنگ اسکیم موڈ فلٹرز، انٹرایکٹو پکسل آئی ڈراپر اور CSS/Tailwind ایکسپورٹس کے ساتھ چاہیں۔ Dominant Color Extractor استعمال کریں جب آپ کو شماریاتی K-Means پکسل ایریا کوریج فیصد (%) اور WCAG UI تھیم کنٹراسٹ تجزیہ چاہیے۔

Utiliome دو مخصوص امیج کلر تجزیہ ٹولز دیتا ہے جو مختلف تخلیقی اور انجینئرنگ کاموں کے لیے ہیں:

خصوصیت / مقصد Extract Color Palette (یہ ٹول) Dominant Color Extractor
بنیادی الگورتھم ادراک فاصلہ تنوع + HSL موڈ فلٹرنگ (Balanced، Vibrant، Pastel، Warm، Cool) ان سپروائزڈK-Means کلسٹرنگ (k = 3..8) جو عین پکسل ایریا کوریج % ناپتی ہے
دستی پکسل آئی ڈراپر عین پکسل رنگ سیمپل اور پن کرنے کے لیے فوٹو پر کہیں بھی کلک خودکار شماریاتی کلسٹر سینٹرائیڈز
بنیادی آؤٹ پٹ 5 تا 12 ہم آہنگ سواچز + CSS :root / Tailwind کنفیگ + PNG سواچ کارڈ رینکڈ % کوریج بار چارٹ + Primary/Secondary/Accent UI کارڈ پیش منظر + WCAG کنٹراسٹ ریٹو
بہترین برائے گرافک ڈیزائنرز، السٹریٹرز، برانڈ موڈ بورڈز، اور CSS/Tailwind پیلیٹ تخلیق UI/UX ڈائنامک تھیمنگ، پروڈکٹ فوٹوگرافی بیک گراؤنڈ آڈٹس، اور رنگ تقسیم تجزیہ
اکثر سوالات

امیج کلر پیلیٹ ایکسٹریکٹر FAQ اور ڈیزائن ٹوکن گائیڈ

Utiliome کے مفت آن لائن تصویر سے کلر پیلیٹ نکالیں کے بارے میں وہ سب جو آپ کو جاننا چاہیے۔

میں اپنی تصویر کی چھوٹی تفصیل سے مخصوص رنگ کیسے چنوں؟

ایڈیٹر کینوس کے اندر تصویر کے اس حصے پر براہ راست کلک کریں! بلٹ اِن آئی ڈراپر کرسر کے نیچے عین 1×1 پکسل سیمپل کرتا ہے، اسے پیلیٹ کے پہلے سواچ کے طور پر پن کرتا ہے، اور اس کا کلر کوڈ کلپ بورڈ پر کاپی کرتا ہے۔

Balanced، Vibrant اور Pastel موڈ فلٹرز میں کیا فرق ہے؟

Balanced Full پورے لائٹنس اور سیچوریشن اسپیکٹرم سے سب سے نمائندہ الگ رنگ نکالتا ہے۔ Vibrant مدھم گرے اور قریب سیاہ/سفید فلٹر کرتا ہے (سیچوریشن >= 35٪ درکار)، جبکہ Soft Pastel اونچی لائٹنس والے نرم ٹونز کو ترجیح دیتا ہے۔

کیا میں نکالا پیلیٹ براہ راست Tailwind CSS یا CSS ویریبلز میں ایکسپورٹ کر سکتا ہوں؟

ہاں۔ دائیں سائیڈ بار میں '3. Code Format & Copy Export' کے تحت 'Copy CSS Variables (:root)' یا 'Copy Tailwind Config' کلک کریں تاکہ پیلیٹ کے تمام سواچز والا تیار کوڈ بلاک کاپی ہو۔

'Download PNG Palette Card' کیا بناتا ہے؟

یہ صاف 1200×800px پریزنٹیشن کارڈ رینڈر کرتا ہے جس میں آپ کی اپ لوڈ شدہ آرٹ ورک گہرے اسٹوڈیو کینوس پر ہے اور نیچے گول سواچز کی قطار عین HEX کوڈز کے لیبلز کے ساتھ—کلائنٹ ڈیکس، Notion دستاویزات یا سوشل پوسٹس میں چھوڑنے کے لیے تیار۔

Extract Color Palette بمقابلہ Dominant Color Extractor کب استعمال کروں؟

Extract Color Palette استعمال کریں جب آپ متاثر کن 5 تا 12 سواچ ڈیزائن اسکیم، موڈ فلٹرنگ اور انٹرایکٹو آئی ڈراپر چاہیں۔ Dominant Color Extractor استعمال کریں جب آپ K-Means سے ہر کلر کلسٹر کی عین شماریاتی فیصد (%) کوریج جاننا چاہیں۔

کیا رنگ نکالنے کے لیے میری اپ لوڈ شدہ فوٹوز سرور پر بھیجی جاتی ہیں؟

کبھی نہیں۔ تمام پکسل سیمپلنگ، ہسٹوگرام کوانٹائزیشن اور PNG کارڈ رینڈرنگ HTML5 Canvas 2D API سے 100٪ مقامی آپ کے براؤزر میں ہوتی ہے۔