یہ صفحہ کیا کرتا ہے اور یہ کیوں منفرد ہے؟
یہ ٹول آپ کو کسی بھی تصویر سے کسی ایک پکسل کا درست رنگ منتخب کرنے کی اجازت دیتا ہے۔ جب آپ اپنے آلے سے ایک تصویر اپ لوڈ کرتے ہیں تو آپ اس پر ماؤس گھما کر یا کلک کر کے کسی بھی پکسل کا رنگ دیکھ سکتے ہیں۔ نتیجہ فوری طور پر تین فارمیٹس میں ظاہر ہوتا ہے: HEX (چھ ہندسوں کا کوڈ، جیسے #1E90FF)، RGB (سرخ، سبز، نیلے اقدار) اور HSL (ہیو، سیچوریشن، لائٹنس)۔ اس کے ساتھ ایک میگنیفائیڈ ویو بھی ہوتا ہے جو آپ کو عین وہ پکسل منتخب کرنے میں مدد دیتا ہے جس کی آپ کو ضرورت ہے۔ آپ مختلف رنگوں کو اپنی پسند کی فہرست میں محفوظ کر سکتے ہیں۔
اس صفحے کو بہن صفحات (مثلاً RGB فنکشنل نوٹیشن یا HSL والے صفحات) سے ممتاز کرنے والی بات یہ ہے کہ یہاں بنیادی آؤٹ پٹ ہیکس کلر کوڈ ہے۔ ویب ڈویلپمنٹ میں color، background-color یا کسی بھی CSS پراپرٹی میں ڈائریکٹ استعمال کرنے کے لیے ہیکس سب سے زیادہ کمپیکٹ اور مقبول فارمیٹ ہے – اسے اضافی قوسین یا سنٹیکس کی ضرورت نہیں۔ اس صفحے پر ہیکس کوڈ چھ ہندسوں کی شکل میں دکھایا جاتا ہے (تین ہندسوں کا شارٹ ہینڈ بھی ممکن ہے) جس میں کوئی الفا چینل شامل نہیں ہوتا۔ شفافیت کو علیحدہ طور پر “Alpha ‹n›% – this pixel is partly transparent.” کے پیغام سے ظاہر کیا جاتا ہے۔
ہیکس کلر کوڈ: ویب ڈیزائن کا معیاری فارمیٹ
ہیکساڈیسیمل کلر کوڈ (HEX) # سے شروع ہوتا ہے اور اس کے بعد تین یا چھ ہندسے آتے ہیں۔ چھ ہندسوں والے ہیکس میں ہر دو ہندسے سرخ، سبز اور نیلے رنگوں کی شدت کو 00 سے FF تک ظاہر کرتے ہیں۔ مثلاً #1E90FF میں 1E سرخ (30)، 90 سبز (144) اور FF نیلا (255) ہے۔ یہی قدر RGB نوٹیشن میں rgb(30,144,255) بنتی ہے۔ ہیکس کا استعمال اس لیے عام ہے کہ یہ بہت کم جگہ لیتا ہے اور زیادہ تر ڈیزائن ٹولز اور براؤزرز اسے براہ راست قبول کرتے ہیں۔
اس ٹول کے ذریعے آپ کسی تصویر میں موجود کسی بھی پکسل کا عین وہی ہیکس کوڈ نکال سکتے ہیں جو تصویر میں محفوظ ہے۔ یاد رکھیں کہ اگر تصویر JPEG ہے یا اسے اسکرین شاٹ لیا گیا ہے تو کمپریشن اور اینٹی الیازنگ کی وجہ سے پکسل کی قدریں اصل رنگ سے ہلکی سی مختلف ہو سکتی ہیں۔ اس لیے جب آپ کسی فلیٹ ایریا میں رنگ لے رہے ہوتے ہیں تو قریب کے پکسلز میں تھوڑا فرق ہو سکتا ہے، اور میگنیفائر کی مدد سے آپ عین وہ پکسل چن سکتے ہیں جو درست معلوم ہو۔
ان پٹ اور آؤٹ پٹ کی تفصیلات
ان پٹ: یہ ٹول صرف درج ذیل تصویری فارمیٹس کو قبول کرتا ہے:
- PNG
- JPG
- WebP
- GIF
- AVIF
- HEIC
ان کے MIME ٹائپس بھی مخصوص ہیں: image/jpeg، image/png، image/webp، image/gif، image/avif، image/heic، image/heif۔ اگر آپ کوئی غیر معاون فارمیٹ ڈراپ کریں گے تو یہ پیغام ظاہر ہوگا: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” اگر تصویر کھلی نہیں سکتی تو: “That image could not be opened. It may be corrupted or in an unsupported format.”
آؤٹ پٹ: جب تصویر لوڈ ہو جائے تو درج ذیل معلومات فوری طور پر دکھائی دیتی ہیں:
- “Image ready — move over it to sample, click to save a color.”
- تصویر کے طول و عرض (چوڑائی × اونچائی)
- اس پکسل کے نقاط (x, y) جہاں ماؤس موجود ہے
- HEX: چھ ہندسوں کا ہیکس کلر کوڈ
- RGB: سرخ، سبز، نیلے کی عددی اقدار
- HSL: ہیو، سیچوریشن، لائٹنس کی فیصدی اقدار
- اگر پکسل نیم شفاف ہے تو الفا فیصد کے ساتھ پیغام
- کلک کرنے پر: “Saved ‹hex› to your picks.”
- محفوظ کردہ رنگوں کی فہرست (12 تک)
تصویر کے بیچ والے پکسل کے رنگ اور نقاط پہلے سے ظاہر ہوتے ہیں – آپ کو تصویر پر ماؤس لے جانے کی ضرورت نہیں۔ پھر جیسے جیسے ماؤس حرکت کرتا ہے، ہر پکسل کے مطابق ویلیوز اپ ڈیٹ ہوتی ہیں۔
شفافیت اور الفا چینل کا معاملہ
ہیکس فارمیٹ میں الفا چینل (شفافیت) شامل نہیں ہوتی۔ اس لیے اگر تصویر کے کسی پکسل میں شفافیت موجود ہے تو ٹول اسے علیحدہ طور پر ظاہر کرتا ہے: “Alpha ‹n›% — this pixel is partly transparent.” مثال کے طور پر اگر الفا 50% ہے تو اس کا مطلب ہے کہ پکسل کا صرف آدھا حصہ اصل رنگ کا ہے، باقی شفاف ہے۔ لیکن ہیکس کوڈ صرف اس پکسل کے RGB جز کو دکھائے گا، شفافیت کو نظر انداز کرتے ہوئے۔
یہ بات سمجھنا ضروری ہے کہ نیم شفاف پکسل کو اس کے اپنے طور پر پڑھا جاتا ہے – اس کے پیچھے موجود کسی بھی چیز (جیسے ویب پیج کا بیک گراؤنڈ) کو مدنظر نہیں رکھا جاتا۔ لہٰذا اگر آپ کسی شفاف PNG سے رنگ نکال رہے ہیں تو پکسل کی اصل RGB قدر ہی دکھائی جائے گی، چاہے وہ شفاف ہو۔ آپ اسے CSS میں استعمال کریں گے تو شفافیت کو opacity یا rgba() کے ذریعے شامل کرنا ہوگا۔
رنگوں کو محفوظ کرنا اور کی بورڈ نیویگیشن
جب آپ کسی پکسل پر کلک کرتے ہیں تو وہ رنگ آپ کی پسند کی فہرست (history) میں شامل ہو جاتا ہے، زیادہ سے زیادہ 12 رنگ۔ اگر ایک ہی RGB قدر لیکن مختلف الفا ویلیوز والے دو پکسلز ہوں تو وہ علیحدہ علیحدہ اندراجات کے طور پر محفوظ ہوں گے۔ محفوظ کردہ رنگوں پر کلک کرنے سے وہ رنگ دوبارہ لوڈ ہو جاتا ہے (یعنی اس کے HEX، RGB اور HSL ویلیوز دکھائی دیتی ہیں)۔
آپ ماؤس کے بغیر بھی رنگ منتخب کر سکتے ہیں۔ تصویر پر فوکس کرنے کے بعد تیر والے بٹنوں (arrow keys) سے کراس ہیئر کو حرکت دی جا سکتی ہے۔ Shift دبا کر تیر والے بٹن دبانے سے کراس ہیئر ہر بار 10 پکسلز چھلانگ لگاتا ہے۔ Enter یا Space دبانے سے موجودہ رنگ محفوظ ہو جاتا ہے۔ یہ فیچر خاص طور پر ان لوگوں کے لیے مفید ہے جو ماؤس استعمال نہیں کر سکتے یا جنہیں بہت زیادہ درستگی کی ضرورت ہے۔
محفوظ کردہ رنگوں میں سے کسی بھی رنگ کی قدر پر کلک کر کے (HEX، RGB یا HSL) اسے کلپ بورڈ پر کاپی کیا جا سکتا ہے۔ اگر براؤزر کلپ بورڈ تک رسائی کو بلاک کرے تو پیغام آئے گا: “Could not copy — your browser blocked clipboard access.”
حدود اور کنارے کے معاملات
یہ ٹول کلائنٹ سائیڈ پر کام کرتا ہے – تصویر آپ کے آلے سے باہر نہیں جاتی، جس سے پرائیویسی محفوظ رہتی ہے۔ تاہم کچھ تکنیکی حدود ہیں:
- تصویر کا سب سے لمبا رخ اگر 4096 پکسلز سے زیادہ ہو تو اسے خود بخود چھوٹا کر دیا جاتا ہے تاکہ براؤزر پر کارکردگی متاثر نہ ہو۔ اس کا مطلب ہے کہ بہت بڑی تصاویر میں آپ کو اصل پکسل کی درست قدر نہیں ملے گی بلکہ ایک ڈاون سیمپلڈ ورژن۔
- JPEG اور اسکرین شاٹس میں کمپریشن اور اینٹی الیازنگ کی وجہ سے رنگ قدرے بدل جاتے ہیں۔ اگر آپ کو کسی لوگو یا برانڈ کلر کا عین مطابق ہیکس چاہیے تو بہتر ہے کہ بغیر کمپریشن والی PNG تصویر استعمال کریں۔
- اگر تصویر کھل نہ سکے (مثلاً خراب فائل) تو مناسب ایرر میسج دکھایا جاتا ہے۔
- شفافیت کو ہیکس میں شامل نہیں کیا جاتا، لہٰذا
rgba()یاhsla()استعمال کرنے والوں کے لیے یہ صفحہ براہ راست موزوں نہیں جب تک کہ وہ شفافیت کو الگ سے ہینڈل نہ کریں۔
"شروع سے شروع کریں" (Start over) کا بٹن تمام ڈیٹا صاف کر دیتا ہے: تصویر ہٹ جاتی ہے، رنگوں کی فہرست خالی ہو جاتی ہے، اور ٹول اپنی ابتدائی حالت میں آ جاتا ہے۔
عمومی سوالات (FAQ)
سوال 1: کیا میں کسی ویب سائٹ سے براہ راست تصویر کھینچ سکتا ہوں؟
جواب: نہیں، یہ ٹول صرف آپ کے اپنے آلے سے اپ لوڈ کردہ تصاویر پر کام کرتا ہے۔ آپ کو پہلے تصویر کو ڈاؤن لوڈ کر کے ڈراپ کرنا ہوگی۔
سوال 2: جب میں کسی نیم شفاف پکسل پر کلک کرتا ہوں تو HEX کوڈ کیا دکھاتا ہے؟
جواب: HEX کوڈ صرف اس پکسل کے RGB جز کو ظاہر کرتا ہے، شفافیت کو نہیں۔ شفافیت کی فیصد علیحدہ پیغام میں دی جاتی ہے۔ اگر آپ کو شفافیت کے ساتھ رنگ چاہیے تو rgba() استعمال کریں۔
سوال 3: کیا میں محفوظ کردہ رنگوں کو دوبارہ استعمال کر سکتا ہوں؟
جواب: ہاں، محفوظ کردہ رنگوں پر کلک کر کے ان کی قدریں دوبارہ دیکھی جا سکتی ہیں اور کاپی کی جا سکتی ہیں۔ زیادہ سے زیادہ 12 رنگ محفوظ ہوتے ہیں۔
سوال 4: کیا تصویر کی اصل ریزولوشن متاثر ہوتی ہے؟
جواب: تصویر اپ لوڈ کرتے وقت اسے براؤزر میں ڈسپلے کرنے کے لیے دکھایا جاتا ہے، لیکن اصل پکسل ڈیٹا محفوظ رہتا ہے سوائے اس صورت کے جب تصویر کا کوئی رخ 4096 پکسلز سے زیادہ ہو تو اسے چھوٹا کیا جاتا ہے۔
سوال 5: کیا میں ماؤس کے بغیر بھی رنگ منتخب کر سکتا ہوں؟
جواب: ہاں، تیر والے بٹنوں سے کراس ہیئر حرکت کرتا ہے، Shift کے ساتھ 10 پکسلز چھلانگ لگاتا ہے، اور Enter/Space سے رنگ محفوظ ہوتا ہے۔ یہ مکمل کی بورڈ نیویگیشن فراہم کرتا ہے۔
سوال 6: کیا یہ ٹول آن لائن ڈیزائن ایپس جیسے Figma کے ساتھ کام کرتا ہے؟
جواب: براہ راست انضمام نہیں ہے، لیکن آپ کسی بھی رنگ کی قدر کو کلک کر کے کاپی کر سکتے ہیں اور پھر اسے Figma، Adobe XD، یا کسی بھی دوسرے سافٹ ویئر میں پیسٹ کر سکتے ہیں۔