صفحہ کیا کرتا ہے
یہ صفحہ ایک ہیکس رنگ کوڈ لیتا ہے — یا تو چھ عددی مکمل فارم جیسا کہ #1E90FF یا تین عددی شارٹ ہینڈ جیسا کہ #abc — اور فوری طور پر اس کا ایچ ایس ایل (HSL) مساوی لوٹاتا ہے۔ ایچ ایس ایل میں ہیو (Hue) ڈگریوں میں، سیچوریشن (Saturation) اور لائٹنس (Lightness) فیصد میں دی جاتی ہے۔ ایچ ایس ایل کی نمائندگی انسانی استدلال کے لیے بنائی گئی ہے، جس سے لائٹنس یا سیچوریشن کو آسانی سے ایڈجسٹ کیا جا سکتا ہے جبکہ ہیو وہی رہتا ہے۔ اس کے ساتھ ساتھ صفحہ رنگ کو تمام دیگر معاون فارمیٹس (HEX, RGB, HSV, CMYK, LAB) میں بھی دکھاتا ہے، تاکہ آپ جسے چاہیں کاپی کر سکیں۔
تمام تبدیلیاں آپ کے براؤزر کے اندر ہوتی ہیں — آپ جو کچھ بھی ٹائپ کرتے ہیں، وہ اپ لوڈ یا محفوظ نہیں ہوتا۔
HEX اور HSL میں بنیادی فرق
HEX ایک خام RGB نوٹیشن ہے – چھ ہیکساڈیسیمل ہندسے (یا تین عددی شارٹ ہینڈ) براہ راست سرخ، سبز اور نیلے اقدار کو انکوڈ کرتے ہیں۔ یہ کمپیکٹ ہے اور CSS اور ڈیزائن ٹولز میں بڑے پیمانے پر استعمال ہوتا ہے، لیکن انسانی سمجھ کے لیے بدیہی نہیں ہے۔ مثال کے طور پر #4f46e5 کو دیکھ کر یہ اندازہ لگانا مشکل ہے کہ اس کا رنگ کتنا ہلکا یا گہرا ہے۔
HSL انسانی استدلال کے لیے بنایا گیا ہے – ہیو کو رنگ چکر پر ڈگریوں میں ناپا جاتا ہے (0 سے 360)، جبکہ سیچوریشن اور لائٹنس فیصد ہیں۔ صرف لائٹنس تبدیل کرنے سے ہیو بدستور برقرار رہتا ہے، یہی وجہ ہے کہ HSL رنگ پیلٹس اور تھیم سسٹم بنانے کے لیے اولین انتخاب ہے۔
الفا چینل موجود نہیں – معیاری HEX (چھ عددی یا تین عددی) میں شفافیت کی کوئی معلومات نہیں ہوتی، اور HSL میں بھی الفا کمپوننٹ شامل نہیں ہے۔ تبدیلی ہمیشہ مکمل طور پر مبہم (opaque) رنگوں سے نمٹتی ہے۔
یہی وہ چیز ہے جو اس صفحے کو دوسرے کنورٹرز سے ممتاز کرتی ہے: یہ صرف ایک فارمیٹ سے دوسرے میں تبدیلی نہیں کرتا، بلکہ اس بات پر زور دیتا ہے کہ HSL کیوں زیادہ کارآمد ہے جب آپ رنگوں میں ہیرا پھیری کرنا چاہتے ہیں۔
ان پٹ اور آؤٹ پٹ کی تفصیل
ان پٹ – ایک ہیکس رنگ کوڈ، یا تو چھ عددی (مثلاً #4f46e5) یا تین عددی شارٹ ہینڈ (مثلاً #abc)۔ صفحہ # کے ساتھ یا بغیر دونوں صورتوں کو قبول کرتا ہے۔
آؤٹ پٹ – ایچ ایس ایل مساوی (ہیو 0–360، سیچوریشن 0–100%، لائٹنس 0–100%) کے علاوہ رنگ کی نمائندگی HEX, RGB, HSV, CMYK اور LAB میں بھی دکھائی جاتی ہے۔ تمام فیلڈز ایک ساتھ اپ ڈیٹ ہوتے ہیں جیسے ہی آپ ان پٹ میں تبدیلی کرتے ہیں۔
مثال کے طور پر، اگر آپ #4f46e5 داخل کرتے ہیں تو آؤٹ پٹ ہوگا:
- HSL:
235°, 76%, 58% - RGB:
79, 70, 229 - HSV:
235°, 69%, 90% - CMYK:
66%, 69%, 0%, 10% - LAB:
36, 42, -78
تین عددی شارٹ ہینڈ جیسے #abc خود بخود چھ عددی #aabbcc میں پھیل جاتا ہے، اور پھر اسی طریقہ سے تبدیلی ہوتی ہے۔
اصول اور کنارے کیفیات
صفحہ صرف درست چھ عددی یا تین عددی ہیکس کوڈ قبول کرتا ہے۔ غلط ویلیو داخل کرنے پر یہ ایرر دکھاتا ہے: "Enter a hex color like #4f46e5 or #abc."
اگر آپ کسی دوسرے کلر اسپیس (مثلاً LAB یا CMYK) میں جا کر کوئی ایسی ویلیو داخل کرتے ہیں جو نظر آنے والے RGB گامٹ سے باہر ہو، تو رنگ کو قریب ترین دکھائی دینے والے رنگ میں ایڈجسٹ کیا جاتا ہے۔ اس رنگ کو واپس ہیکس میں تبدیل کرنے پر معمولی تبدیلی آ سکتی ہے۔
CMYK ویلیوز اسکرین پر تخمینہ ہیں اور پیشہ ورانہ پرنٹ کے لیے بغیر کیلیبریشن استعمال نہیں کرنی چاہئیں۔
تمام حسابات آپ کے براؤزر میں ہوتے ہیں — کچھ بھی سرور پر نہیں بھیجا جاتا۔
یہ صفحہ کس کے لیے ہے؟
- فرنٹ‑اینڈ ڈویلپرز جو CSS لکھتے ہیں اور ڈیزائن موک اپ سے ہیکس رنگ کو HSL میں تبدیل کر کے آسانی سے ہوور سٹیٹس یا تھیم ویرینٹس کے لیے لائٹنس ایڈجسٹ کر سکتے ہیں۔
- UI/UX ڈیزائنرز جو ہیو، سیچوریشن اور لائٹنس کے لحاظ سے سوچتے ہیں اور کسی برانڈ کلر کو ہیکس میں دیے جانے پر اسے HSL میں میچ کرنا چاہتے ہیں۔
- رنگ پیلیٹ بنانے والے – HSL کے ساتھ کمپلیمنٹری، اینالاگس یا مونوکرومیٹک اسکیمیں صرف ہیو یا سیچوریشن کو ٹویک کر کے بنانا آسان ہے۔
- ویب ایکسیسبیلٹی آڈیٹرز جو کنٹراسٹ ریشوز کی تصدیق کرتے ہیں اور HSL کو خام RGB یا HEX سے زیادہ بدیہی پاتے ہیں۔
تکنیکی تفصیل: HEX اور HSL کے درمیان تبدیلی کیسے کام کرتی ہے
HEX بنیادی طور پر RGB کا ہیکساڈیسیمل نمائندگی ہے۔ چھ عددی کوڈ میں پہلے دو حروف سرخ، اگلے دو سبز اور آخری دو نیلے رنگ کی شدت کو 0–255 کی حد میں ظاہر کرتے ہیں۔ تین عددی شارٹ ہینڈ میں ہر حرف کو دہرا کر چھ عددی بنایا جاتا ہے۔
HSL حاصل کرنے کے لیے پہلے RGB اقدار کو 0–1 کی حد میں normalise کیا جاتا ہے۔ پھر ان سے زیادہ سے زیادہ (max) اور کم سے کم (min) شدت معلوم کی جاتی ہے۔ lightness کا حساب (max + min) / 2 ہے۔ saturation صفر ہوتی ہے اگر max = min (یعنی رنگ بے رنگ ہے)۔ ورنہ lightness کے لحاظ سے saturation فارمولے سے نکالی جاتی ہے: delta = max - min; sat = delta / (1 - |2*L - 1|)۔ hue کا حساب max رنگ کے مطابق کیا جاتا ہے: اگر max سرخ ہے تو hue = (green - blue) / delta mod 6؛ اگر max سبز ہے تو hue = (blue - red) / delta + 2؛ اگر max نیلا ہے تو hue = (red - green) / delta + 4۔ پھر 60 سے ضرب دے کر ڈگریوں میں تبدیل کیا جاتا ہے۔
یہی ریاضی اس صفحے پر استعمال ہوتی ہے، اور تمام حسابات JavaScript میں کلائنٹ سائڈ پر انجام پاتے ہیں۔
رنگ گامٹ اور HSL کے عملی استعمال
اگرچہ HSL ایک خوبصورت ماڈل ہے، لیکن یاد رہے کہ تمام HSL اقدار sRGB مانیٹر پر قابل نمائش نہیں ہوتیں۔ مثال کے طور پر، ایک انتہائی سیچوریٹڈ اور چمکدار رنگ جیسے hue = 300°, sat = 100%, light = 50% آپ کے مانیٹر پر دکھایا جا سکتا ہے، لیکن اسی hue پر sat = 100%, light = 100% سفید ہو جائے گا۔ گامٹ کی حدود کی وجہ سے، اگر آپ کسی اور کلر اسپیس جیسے CMYK میں کوئی انتہائی سنترپت نیلا داخل کرتے ہیں، تو شاید وہ sRGB میں دکھایا نہ جا سکے اور اسے ایڈجسٹ کرنا پڑے۔
اس صفحے کا فائدہ یہ ہے کہ آپ ایک ہی جگہ پر تمام فارمیٹس دیکھ سکتے ہیں اور فوراً اندازہ لگا سکتے ہیں کہ کوئی رنگ قابل نمائش ہے یا نہیں۔
اکثر پوچھے گئے سوالات (FAQ)
سوال: کیا میں ہیکس کوڈ بغیر # کے استعمال کر سکتا ہوں؟
جی ہاں، صفحہ # کے ساتھ اور بغیر دونوں صورتوں کو قبول کرتا ہے۔ تاہم چھ عددی یا تین عددی ہونا ضروری ہے۔
سوال: تین عددی ہیکس جیسے #f00 کا HSL کیا ہوگا؟
یہ خود بخود #ff0000 میں پھیل جاتا ہے۔ اس کا HSL ہوگا: hue = 0°, sat = 100%, light = 50% (خالص سرخ)۔
سوال: کیا HSL میں الفا چینل (شفافیت) شامل ہے؟
نہیں، معیاری HSL میں الفا نہیں ہوتا۔ اگر آپ کو شفافیت کی ضرورت ہے تو آپ کو HSLA (HSL + Alpha) استعمال کرنا ہوگا، جو اس ٹول میں فراہم نہیں ہے۔
سوال: صفحہ پر CMYK ویلیوز پرنٹ کے لیے درست ہیں؟
یہ صرف اسکرین پر تخمینہ ہیں اور حقیقی پرنٹ کے لیے کیلیبریٹڈ ڈیوائس پروفائلز کی ضرورت ہوتی ہے۔ پیشہ ورانہ استعمال سے پہلے انہیں تصدیق کریں۔
سوال: اگر میں LAB یا CMYK میں کوئی رنگ داخل کروں جو sRGB گامٹ سے باہر ہو تو کیا ہوگا؟
رنگ کو قریب ترین نمائش پذیر رنگ میں ایڈجسٹ کیا جاتا ہے۔ اس کی وجہ سے ہیکس ویلیو آپ کے داخل کردہ رنگ کے عین مطابق نہیں ہوگی۔
سوال: کیا یہ ٹول میرے ڈیٹا کو کہیں محفوظ کرتا ہے؟
نہیں، تمام تبدیلیاں آپ کے براؤزر میں ہوتی ہیں۔ کچھ بھی سرور پر نہیں بھیجا جاتا۔