اس صفحے کا مقصد
یہ صفحہ ایک ایسے رنگ کو، جو HSL (Hue–Saturation–Lightness) میں ظاہر کیا گیا ہو، فوری طور پر RGB (Red–Green–Blue) میں تبدیل کرتا ہے۔ HSL میں Hue کو ڈگریوں میں (0–360)، Saturation اور Lightness کو فیصد میں دیا جاتا ہے۔ مثال کے طور پر 243, 75%, 59%۔ یہ ٹول آپ کو بتاتا ہے کہ وہی رنگ RGB میں کیا ہوگا — تین عدد 0 سے 255 تک، جیسے 79, 70, 229۔
اس تبدیلی کی ضرورت اس لیے پڑتی ہے کہ HSL ایک ایسا کلر ماڈل ہے جو انسانی سوچ کے مطابق بنا ہے: آپ روشنی (Lightness) تبدیل کریں تو Hue وہی رہتا ہے، جبکہ RGB وہ عددی نظام ہے جسے اسکرین پر روشنی خارج کرنے کے لیے استعمال کیا جاتا ہے۔ ہر پکسل کو تین عدد بتانے پڑتے ہیں: کتنی سرخ، کتنی سبز، کتنی نیلی روشنی۔
اس صفحے کو دوسرے کنورٹرز سے کیا فرق ہے؟
- HSL انسانی استدلال کے لیے ڈیزائن کیا گیا ہے؛ جب آپ صرف Lightness بڑھاتے ہیں تو رنگ کا Hue تبدیل نہیں ہوتا، جو کہ palette بنانے اور theme generation کے لیے HSL کو مثالی بناتا ہے۔ RGB میں ایسا نہیں ہے — وہاں صرف تین عدد کو گھٹا بڑھا کر رنگ بدلتے ہیں، جس سے Hue میں غیر متوقع تبدیلی آ سکتی ہے۔
- تبدیلی بے نقصان (lossless) ہے۔ ہر جائز HSL ویلیو ایک ہی RGB triplet میں بدلتی ہے، اور وہ triplet ڈسپلے کی حد میں ہوتا ہے (0–255)۔ اس کا مطلب ہے کہ اگر آپ RGB کو واپس HSL میں کریں گے تو وہی اصلی عدد ملیں گے۔
- کوئی out‑of‑gamut clipping نہیں ہوتی۔ LAB یا CMYK سے RGB میں تبدیل کرتے وقت اکثر رنگ اسکرین کی حد سے باہر نکل جاتے ہیں اور پھر انہیں زبردستی حد میں لانا پڑتا ہے، جس سے رنگ shift ہو جاتا ہے۔ HSL سے RGB میں ایسا نہیں ہوتا کیونکہ HSL پہلے ہی sRGB gamut کے اندر ہے۔
- ساری تبدیلی آپ کے براؤزر میں ہوتی ہے، کچھ بھی سرور پر اپ لوڈ نہیں ہوتا۔
Inputs اور Outputs
ان پٹ
- HSL: Hue (0–360)، Saturation (فیصد)، Lightness (فیصد)۔ مثلاً
243, 75%, 59%۔
آؤٹ پٹ — سب فوری اپ ڈیٹ ہوتے ہیں:
| کلر ماڈل | مثال |
|---|---|
| HEX | #4F46E5 |
| RGB | 79, 70, 229 |
| HSL | 243, 75%, 59% |
| HSV | 242, 69%, 90% |
| CMYK | 66%, 63%, 0%, 0% |
| LAB | 38, 42, -74 |
ایک بار جب آپ HSL ویلیو داخل کریں یا اسے ایڈٹ کریں تو باقی تمام فیلڈز خود بخود بدل جاتے ہیں۔
اصول اور حدود (Edge Cases)
- غلط ان پٹ: اگر آپ HSL کی شکل غلط دیں، مثلاً
243, 75, 59(بغیر فیصد کے) یاabc، تو ٹول دکھاتا ہے:
"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
یعنی ٹول صرف وہی فارمیٹ قبول کرتا ہے — پہلا عدد 0–360، پھر ایک کاما، پھر فیصد، پھر کاما، پھر فیصد۔ اس کے علاوہ کچھ نہیں۔ - CMYK کا تخمینہ: دکھایا گیا CMYK صرف اسکرین پر دکھانے کے لیے ایک اندازہ ہے۔ حقیقی پرنٹ میں کاغذ، سیاہی، اور پرنٹر پروفائل کی وجہ سے CMYK کی قدریں مختلف ہو سکتی ہیں۔ اس لیے اس ٹول سے نکلے ہوئے CMYK کو پیشہ ورانہ پرنٹ میں براہ راست استعمال نہ کریں — کسی پروفائل شدہ ورک فلو کی ضرورت ہوگی۔
- تبدیلی کا طریقہ: یہ ٹول معیاری sRGB سے متعلق ریاضی استعمال کرتا ہے (IEC 61966-2-1)۔ Hue کو پہلے کونے (corner) کے حساب سے RGB میں بدلا جاتا ہے، پھر Saturation اور Lightness کو ایڈجسٹ کیا جاتا ہے۔ یہ وہی طریقہ ہے جو W3C کے CSS Color Module Level 4 میں طے کیا گیا ہے۔
اسے کسے استعمال کرنا چاہیے؟
- ڈیزائنرز جو رنگوں کے palettes یا تھیمز بنا رہے ہوں اور انہیں کوڈ کے لیے RGB ویلیوز چاہیے ہوں۔ HSL میں کام کرنا آسان ہے — آپ ایک ہی Hue کو لے کر مختلف lightness میں shades بنا سکتے ہیں۔ پھر ان shades کو CSS یا کسی دوسرے کوڈ میں ڈالنے کے لیے RGB میں تبدیل کرنا ضروری ہو جاتا ہے۔
- فرنٹ‑اینڈ ڈویلپرز جو ڈیزائن ٹول (جیسے Figma یا Adobe XD) سے رنگ لے رہے ہوں، اور وہ ٹول اکثر HSL میں رنگ دکھاتا ہے جبکہ اینڈ پروڈکٹ کو RGB یا HEX چاہیے۔
- وہ لوگ جو رنگ کے بارے میں انسانی انداز میں سوچنا پسند کرتے ہیں (hue, saturation, lightness) اور انہیں اسکرین پر دکھانے کے لیے بالکل درست اعداد چاہیے۔
مختلف کلر ماڈلز کا پس منظر
HSL (Hue, Saturation, Lightness)
یہ ماڈل 1970 کی دہائی میں تیار کیا گیا تھا تاکہ رنگوں کو انسانوں کے لیے زیادہ بدیہی بنایا جا سکے۔ Hue رنگ کی قسم بتاتا ہے (سرخ، نیلا، پیلا وغیرہ)، Saturation اس کی شدت (0% = بے رنگ سرمئی)، Lightness اس کی روشنی (0% = کالا، 100% = سفید)۔ اسی وجہ سے تھیم جنریشن میں HSL بہت مقبول ہے — آپ صرف lightness گھٹا کر ایک ہی رنگ کے گہرے شیڈ بنا سکتے ہیں بغیر hue بدلے۔
RGB (Red, Green, Blue)
یہ اضافی (additive) کلر ماڈل ہے: تین بنیادی روشنیوں کے امتزاج سے تمام رنگ بنتے ہیں۔ ہر چینل 0 سے 255 تک ہوتا ہے (8‑bit)۔ اسکرینوں پر یہی استعمال ہوتا ہے۔ RGB کا نقصان یہ ہے کہ اس میں hue کو بدلے بغیر lightness تبدیل کرنا مشکل ہے — آپ کو تینوں نمبروں کو ایک پیچیدہ تناسب میں گھٹانا پڑتا ہے۔
HEX
یہ RGB کا ہی ہیکسا ڈیسیمل فارم ہے — تین بائٹس کو #RRGGBB لکھا جاتا ہے۔ وہی معلومات، صرف کمپیکٹ۔
HSV (Hue, Saturation, Value)
HSL سے ملتا جلتا، لیکن Lightness کی بجائے Value (روشنی کی حد) استعمال کرتا ہے۔ یہ خاص طور پر تصویری ایڈیٹنگ میں مفید ہے جہاں آپ رنگ کی چمک کو کنٹرول کرنا چاہتے ہیں۔
CMYK (Cyan, Magenta, Yellow, Key/Black)
یہ substrative (تطریقی) ماڈل ہے — پرنٹ میں استعمال ہوتا ہے۔ یہ سفید سے شروع کرتا ہے اور پھر سیاہی سے روشنی جذب کرتا ہے۔ اسی لیے اسکرین سے پرنٹ میں تبدیل کرتے وقت gamut کا مسئلہ ہوتا ہے: بہت سے چمکدار RGB رنگ CMYK میں نہیں بن سکتے۔
LAB (Lightness, a, b)
یہ ایک رنگ‑مقامی (color space) ہے جو انسانی آنکھ کے رنگ دیکھنے کی صلاحیت سے بنا ہے — یہ دوسرے ماڈلز سے بڑا ہے۔ اس لیے LAB سے RGB میں تبدیل کرتے وقت clipping ہو سکتی ہے۔
عام غلطیاں جو لوگ کرتے ہیں
- HSL میں Hue کو 360 سے بڑھا کر داخل کرنا — جیسے
400, 75%, 59%۔ تب ٹول غلطی دکھائے گا۔ Hue کو صرف 0–360 کے درمیان رکھیں۔ - Saturation اور Lightness کو 0 سے 1 کے اعشاریہ میں دینا — جیسے
243, 0.75, 0.59۔ یہ غلط ہے۔ HSL میں یہ فیصد ہوتے ہیں، یعنی75%اور59%لکھیں۔ - کاما کے بغیر تین عدد لکھنا — مثلاً
243 75% 59%۔ تب بھی ٹول نہیں سمجھے گا۔ کماز (کاما) ضروری ہے۔ - یہ سمجھنا کہ CMYK تخمینہ پرنٹ کے لیے درست ہے — جیسا کہ اوپر بتایا گیا، یہ صرف اسکرین پر دکھانے کے لیے ایک اندازہ ہے۔ پیشہ ورانہ پرنٹ کے لیے آپ کو ICC پروفائلز کے ساتھ کام کرنا پڑے گا۔
اکثر پوچھے گئے سوالات (FAQ)
سوال: کیا HSL سے RGB میں تبدیلی کے دوران کوئی معلومات ضائع ہو سکتی ہے؟
جواب: نہیں، یہ تبدیلی بے نقصان ہے۔ HSL کا دائرہ sRGB کے عین مطابق ہے، اس لیے ہر ممکن HSL ویلیو ایک منفرد RGB triplet میں بدلتی ہے اور واپس آنے پر وہی عدد ملتے ہیں۔
سوال: کیا یہ ٹول CMYK کو پرنٹ میں استعمال کرنے کے لیے درست بتاتا ہے؟
جواب: نہیں۔ دکھایا گیا CMYK صرف ایک تخمینہ ہے۔ پرنٹ کے لیے آپ کو حقیقی پرنٹر پروفائل کے ساتھ رنگوں کیلیبریٹ کرنی ہوگی۔
سوال: اگر میں Hue کو 360 سے زیادہ لکھ دوں تو کیا ہوگا؟
جواب: ٹول ایک غلطی کا پیغام دکھائے گا: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%." Hue صرف 0 سے 360 تک درست ہے۔
سوال: کیا یہ صفحہ مجھے HSL سے HSV میں بھی تبدیل کر سکتا ہے؟
جواب: جی ہاں، جیسے ہی آپ HSL داخل کریں گے، تمام آؤٹ پٹ فیلڈز بشمول HSV اپ ڈیٹ ہو جائیں گے۔
سوال: کیا میرا ڈیٹا کسی سرور پر جاتا ہے؟
جواب: نہیں، تمام حساب کتاب آپ کے براؤزر میں ہوتا ہے۔ کوئی بھی چیز اپ لوڈ نہیں ہوتی۔
سوال: کیا میں اس تبدیلی کو CSS میں براہ راست استعمال کر سکتا ہوں؟
جواب: جی ہاں، آپ نکلا ہوا RGB یا HEX ویلیو اپنی CSS میں ڈال سکتے ہیں۔ مثال کے طور پر rgb(79, 70, 229) یا #4F46E5۔
نتیجہ
یہ ٹول HSL سے RGB میں تبدیلی کے لیے ایک سادہ، درست، اور بے نقصان طریقہ فراہم کرتا ہے۔ جو چیز اسے منفرد بناتی ہے وہ یہ ہے کہ یہ انسانی سوچ کے رنگ ماڈل (HSL) کو اسکرین کے عددی نظام (RGB) میں بغیر کسی gamut clipping کے بدلتا ہے۔ اگر آپ ڈیزائنر ہیں جو palette بنا رہے ہیں، یا ڈویلپر ہیں جو رنگوں کو کوڈ میں ڈال رہے ہیں، تو یہ صفحہ آپ کا براہ راست جواب ہے۔ صرف یاد رکھیں کہ CMYK کا تخمینہ پرنٹ کے لیے استعمال نہ کریں، اور HSL ہمیشہ صحیح فارمیٹ میں داخل کریں — hue, کاما, saturation فیصد, کاما, lightness فیصد۔