RGB سے HSL کنورٹر

یہ صفحہ کیا کرتا ہے؟

اس صفحے پر آپ ایک RGB رنگ — تین نمبر جو 0 سے 255 کے درمیان ہوتے ہیں اور اسکرین پر سرخ، سبز اور نیلی روشنی کے اختلاط کو ظاہر کرتے ہیں — درج کرتے ہیں۔ فوراً ہی آپ کو اس کا مساوی HSL رنگ نظر آتا ہے: ہیو (hue) ڈگریوں میں 0–360، سیچوریشن (saturation) اور لائٹنس (lightness) فیصد کے طور پر۔ اس کے علاوہ یہ ٹول وہی رنگ HEX، HSV، CMYK اور LAB فارمیٹس میں بھی دکھاتا ہے تاکہ آپ اپنے پروجیکٹ کے لیے مطلوبہ ویلیو کاپی کر سکیں۔

ان پٹ کے طور پر RGB کو تین عدد 0–255 کے درمیان کوما یا اسپیس سے الگ کر کے لکھیں، مثلاً 79, 70, 229۔ اگر آپ HSL فیلڈ میں براہِ راست کوئی قدر داخل کریں گے تو ٹول اسے واپس RGB میں بدل دے گا۔ تمام فیلڈز آپس میں جڑے ہوئے ہیں — کسی ایک میں تبدیلی کرتے ہی باقی فوری اپڈیٹ ہو جاتے ہیں۔ یہ سارا عمل آپ کے براؤزر میں ہوتا ہے؛ آپ کا ڈیٹا کہیں اپ لوڈ نہیں ہوتا۔

غلط ان پٹ پر صفحہ مخصوص پیغام دکھاتا ہے:

• اگر RGB غلط ہو: "Enter RGB as three numbers 0–255, like 79, 70, 229."
• اگر HSL غلط ہو: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."

RGB اور HSL میں بنیادی فرق

RGB (Red-Green-Blue) ایک اضافی (additive) رنگ ماڈل ہے جو اسکرینوں کے طبیعی کام پر مبنی ہے۔ ہر پکسل اپنی روشنی کو تین چینلوں میں الگ الگ 0 سے 255 کی شدت پر کنٹرول کرتا ہے۔ جب تینوں چینل 255 ہوں تو سفید روشنی بنتی ہے؛ جب تینوں صفر ہوں تو مکمل سیاہی۔ یہ ماڈل ہارڈویئر کے لیے بہترین ہے مگر انسانی ادراک کے لیے بدیہی نہیں: ایک قدرے گہرا سرخ حاصل کرنے کے لیے R کو 200 سے گھٹا کر 150 کرنا پڑتا ہے، لیکن اس سے ہلکا پن بھی بدل جاتا ہے اور اصل ہیو بھی تھوڑا منتقل ہو سکتا ہے۔

HSL (Hue-Saturation-Lightness) انسانی ادراک کے قریب تر ماڈل ہے۔ ہیو ایک دائرے پر 0–360 ڈگری کو ظاہر کرتا ہے — 0 سرخ، 120 سبز، 240 نیلا۔ سیچوریشن فیصد میں رنگ کی پاکیزگی بتاتی ہے (0% = خاکستری، 100% = خالص رنگ)۔ لائٹنس فیصد میں روشنی کی مقدار (0% = سیاہ، 100% = سفید)۔ اس ماڈل میں لائٹنس کو الگ ایڈجسٹ کرنے سے ہیو متاثر نہیں ہوتا، جبکہ RGB میں ایسا ممکن نہیں۔

یہی وجہ ہے کہ صفحہ خاص طور پر RGB سے HSL میں تبدیلی پر زور دیتا ہے: یہ ڈسپلے کے مقامی ماڈل (RGB) کو انسانی استدلال کے لیے بنائے گئے ماڈل (HSL) میں بدلتا ہے۔

اس صفحے کی منفرد خصوصیات

عام کنورٹرز صرف ایک فارمیٹ سے دوسرے فارمیٹ میں تبدیلی کرتے ہیں اور وہیں رک جاتے ہیں۔ اس صفحے کی خاص بات یہ ہے کہ یہ RGB سے HSL میں تبدیلی کو اس طرح پیش کرتا ہے جس سے آپ کو سمجھ آئے کہ HSL کیوں اہم ہے۔

1. آزاد لائٹنس ایڈجسٹمنٹ: جب آپ HSL میں ہیو کو 243° مقرر کرتے ہیں، تو لائٹنس کو 10% سے 90% تک تبدیل کرنے پر بھی ہیو وہی رہتا ہے۔ RGB میں ایسا کرنے کے لیے آپ کو تینوں نمبر پیچیدہ طریقے سے بدلنے پڑیں گے۔

2. فوری اور جامع تبدیلی: صرف RGB درج کریں، اور آپ کو ایک ہی وقت میں پانچ مختلف فارمیٹس (HEX, HSV, CMYK, LAB) مل جاتے ہیں۔ یہ ڈیزائنرز اور ڈیولپرز کے لیے وقت بچاتا ہے جو مختلف پلیٹ فارمز پر رنگ استعمال کرتے ہیں۔

3. کلائنٹ سائیڈ پروسیسنگ: جیسا کہ بتایا گیا، تمام تبدیلیاں آپ کے براؤزر میں ہوتی ہیں۔ کوئی سروے نہیں بھیجا جاتا۔ اس کا مطلب ہے تیز کارکردگی اور ڈیٹا پرائیویسی۔

4. غلط ان پٹ پر واضح رہنمائی: اگر آپ 79 70 229 کی بجائے 79 70.5 229 لکھیں گے تو یہ تین عدد نہیں رہے گا (کیونکہ دوسرا عدد 70.5 ہے، جو 0–255 کے درمیان ایک عدد تو ہے مگر صحیح طور پر انٹیجر نہیں) — لیکن صفحہ واضح ہدایات دیتا ہے۔

5. CMYK اور LAB کے لیے حدبندی: اگر آپ کوئی ایسی CMYK یا LAB ویلیو درج کرتے ہیں جو قابلِ ڈسپلے RGB رینج سے باہر ہو، تو ٹول اسے قریب ترین دکھائی دینے والے رنگ میں ڈھال دیتا ہے۔ واپس تبدیلی پر ہلکا سا فرق آ سکتا ہے۔

ریاضیاتی تبدیلی کا طریقہ

RGB سے HSL میں تبدیلی کا کچھ اس طرح ہے — یہ وہی ریاضی ہے جو براؤزر میں پسِ پردہ چلتی ہے:

1. نارملائزیشن: R, G, B کی قدروں کو 0–1 کی رینج میں لانے کے لیے 255 سے تقسیم کریں۔ مثلاً 79, 70, 229 کے لیے: R=79/255≈0.310, G=70/255≈0.275, B=229/255≈0.898۔

2. زیادہ سے زیادہ اور کم سے کم معلوم کریں: max = 0.898 (B), min = 0.275 (G)۔ ان کا فرق delta = 0.623۔

3. لائٹنس (L): (max + min) / 2 = (0.898 + 0.275) / 2 = 0.5865 → 58.65%۔

4. سیچوریشن (S):

   • اگر delta = 0 ہو تو S = 0۔
   • ورنہ اگر L ≤ 0.5 ہو تو S = delta / (max + min)۔
   • اگر L > 0.5 ہو تو S = delta / (2 - max - min)۔
     ہمارے معاملے میں L=0.5865 > 0.5، لہٰذا S = 0.623 / (2 - 0.898 - 0.275) = 0.623 / 0.827 ≈ 0.753 → 75.3% (صفحہ پر 75% ظاہر ہوتا ہے)۔

5. ہیو (H):

   • اگر delta = 0 ہو تو H = 0۔
   • ورنہ یہ معلوم کریں کہ کون سا چینل max ہے۔
   • اگر max = R ہو تو H = (G - B) / delta + (G < B? 6: 0)
   • اگر max = G ہو تو H = (B - R) / delta + 2
   • اگر max = B ہو تو H = (R - G) / delta + 4
     یہاں max = B ہے، لہٰذا H = (0.310 - 0.275) / 0.623 + 4 = 0.035 / 0.623 + 4 ≈ 0.056 + 4 = 4.056۔ پھر اسے 360 ڈگری میں بدلیں: 4.056 × 60 = 243.36° → صفحہ پر 243° ظاہر ہوتا ہے۔

اسی طرح HSL سے RGB میں واپس تبدیل کرنے کے لیے مخصوص فارمولے استعمال ہوتے ہیں۔ اگر آپ HSL میں 243°, 75%, 59% درج کریں گے تو آپ کو RGB: 79, 70, 229 واپس ملے گا۔

عملی استعمال

UI/UX ڈیزائنرز کے لیے HSL خاص طور پر مفید ہے جب انہیں قابلِ رسائی (accessible) رنگ پیلیٹ بنانے ہوتے ہیں۔ WCAG کنٹراسٹ ریشو کے لیے لائٹنس کو کم یا زیادہ کرنا پڑتا ہے، اور HSL میں آپ ایک ہی ہیو رکھ کر صرف لائٹنس تبدیل کر سکتے ہیں — جس سے برانڈ کی رنگت برقرار رہتی ہے۔

فرنٹ اینڈ ڈیولپرز ڈیزائن ٹولز سے اکثر RGB ویلیوز لیتے ہیں، لیکن CSS میں hsl() یا hsla() فنکشنز زیادہ سہل ہیں۔ مثلاً آپ CSS میں color: hsl(243, 75%, 59%) لکھ سکتے ہیں اور جاوا اسکرپٹ سے لائٹنس کو 10% بڑھا کر hsl(243, 75%, 69%) بنا سکتے ہیں۔

تھیم بنانے والے ایک برانڈ کلر (مثلاً 243°) کے ہلکے اور گہرے ورژن تیار کر سکتے ہیں — ہر ورژن میں صرف لائٹنس تبدیل ہوتی ہے، بنیادی ہیو وہی رہتا ہے۔

ڈیٹا ویژولائزیشن ڈیزائنرز کے لیے HSL کا لائٹنس چینل ادراکی ترتیب (perceptual order) فراہم کرتا ہے — آپ بتدریج گہرے سے ہلکے رنگوں کی سیریز بنا سکتے ہیں جو ایک ہی ہیو پر قائم ہوں۔

حدود اور احتیاطی تدابیر

• CMYK آؤٹ پٹ صرف تخمینہ ہے: اسے پیشہ ورانہ پرنٹنگ کے لیے بغیر تصدیق کے استعمال نہ کریں۔ کیونکہ یہ سکرین پر مبنی تبدیلی ہے، پرنٹر کی اصل CMYK رینج مختلف ہو سکتی ہے۔

• LAB یا CMYK سے باہر کے رنگ: اگر آپ کوئی ایسی LAB ویلیو درج کرتے ہیں جو sRGB گامٹ سے باہر ہو، تو ٹول اسے قریب ترین ڈسپلے ایبل رنگ میں تبدیل کر دے گا۔ واپس تبدیلی پر اصل رنگ بالکل درست نہیں آئے گا۔

• HSL مکمل ادراکی طور پر یکساں نہیں ہے: مثال کے طور پر پیلے (hue≈60°) اور نیلے (hue≈240°) رنگ کی لائٹنس ایک ہی فیصد پر ہونے کے باوجود انسانی آنکھ کو پیلے زیادہ روشن لگ سکتے ہیں۔ اس مسئلے کے لیے زیادہ جدید ماڈل جیسے LAB یا LCH استعمال ہوتے ہیں۔

• ویب معیارات: جدید CSS میں hsl() کا استعمال مکمل طور پر معاون ہے، لیکن پرانے براؤزرز کے لیے HEX فال بیک ضروری ہو سکتا ہے۔

عمومی سوالات

سوال: اگر میں RGB میں کوئی نمبر درج کروں جو 0–255 کی حد سے باہر ہو تو کیا ہوگا؟ جواب: صفحہ ایک غلطی کا پیغام دکھائے گا: "Enter RGB as three numbers 0–255, like 79, 70, 229." آپ کو اپنی ویلیوز دوبارہ چیک کرنی ہوں گی۔

سوال: کیا میں HSL سے براہِ راست CMYK میں تبدیل کر سکتا ہوں؟ جواب: نہیں، یہ صفحہ صرف RGB کو ان پٹ لیتا ہے اور پھر دیگر فارمیٹس نکالتا ہے۔ اگر آپ HSL درج کریں گے تو یہ پہلے RGB میں بدلے گا، پھر وہاں سے CMYK تخمینہ لگائے گا۔

سوال: کیا یہ ٹول میرے کمپیوٹر پر فائلز یا ڈیٹا محفوظ کرتا ہے؟ جواب: نہیں، تمام تبدیلیاں آپ کے براؤزر میں ہوتی ہیں اور کچھ بھی سرور کو نہیں بھیجا جاتا۔

سوال: میں نے 243, 75%, 59% درج کیا لیکن آؤٹ پٹ 79, 70, 229 کے بجائے 79, 72, 228 کیوں آیا؟ جواب: اگر آپ نے براہِ راست HSL درج کیا تو ریاضی کی تبدیلی معمولی گولائی کے فرق کی وجہ سے تھوڑی مختلف ہو سکتی ہے۔ براؤزر کی جاوا اسکرپٹ میں استعمال ہونے والے حسابات درست ہیں مگر بعض اوقات ایک ڈیجیٹ کا فرق ممکن ہے۔

سوال: کیا CMYK ویلیو پرنٹ کے لیے درست ہے؟ جواب: نہیں، یہ صرف ایک سکرین پر مبنی تخمینہ ہے۔ پیشہ ورانہ پرنٹ کے لیے رنگ پروفائل (جیسے FOGRA یا SWOP) کے مطابق تبدیلی کرنی چاہیے۔

سوال: RGB سے HSL میں تبدیلی کا سب سے عام غلطی کیا ہے؟ جواب: لوگ اکثر یہ فراموش کر دیتے ہیں کہ HSL میں ہیو ایک دائرہ ہے — 0° اور 360° دونوں سرخ ہیں، لیکن 180° اور 360° میں فرق ہے۔ نیز کچھ ذرائع 0–240 کی رینج میں ہیو بتاتے ہیں، جبکہ اس صفحے پر 0–360 ڈگری استعمال ہوتی ہے۔