HSL رنگ کو اسی انداز میں بیان کرتا ہے جس طرح لوگ بولتے ہیں: کون سی رنگت (hue)، کتنی شدت (saturation)، اور کتنی روشنائی (lightness)۔ HEX کو HSL میں بدلنا رنگ کو ایسے فارم میں لاتا ہے جسے تم حقیقت میں ایڈجسٹ کر سکتے ہو — ہلکا کرنا، مدھم کرنا، یا اس سے پوری سکیل بنانا۔
HEX سے HSL تبدیلی کیسے کام کرتی ہے
- HEX کو RGB میں تبدیل کرو اور ہر چینل کو 255 سے تقسیم کرو، تاکہ تینوں کی قیمت 0 اور 1 کے درمیان آ جائیں۔
- تینوں میں سب سے بڑا اور سب سے چھوٹا معلوم کرو۔ ان کا اوسط lightness L ہے۔
- ان کے درمیان پھیلاؤ saturation S کو چلاتا ہے: ہلکے رنگوں کے لیے اسے (2 − max − min) سے تقسیم کرو، یا گہرے رنگوں کے لیے (max + min) سے۔
- سب سے زیادہ رکھنے والا چینل hue H طے کرتا ہے — سرخ 0°, سبز 120°, نیلا 240° — اور باقی دو چینلز اس سگمنٹ کے اندر رنگت کی پوزیشن بتاتے ہیں۔
کام کرنے کی مثال
حساب بالکل درست ہے، مگر HSL اقدار عموماً ڈگریوں اور فیصدوں میں گول کی جاتی ہیں۔ اس لیے واپس تبدیل کرنے پر ایک یا دو RGB قدم کا فرق آ سکتا ہے — عملی طور پر نظر نہیں آتا، مگر اگر بار بار راؤنڈ ٹرپ کرو تو جاننا اچھا ہے۔
HEX اور HSL کی وضاحت
HEX کیا ہے؟
HEX کوڈ ایک چھ ہندسوں والا ہیکساڈیسیمل نمبر ہوتا ہے جو # کے بعد رنگ کے ریڈ، گرین اور بلیو چینلز کو محفوظ کرتا ہے۔ ہر جوڑا ایک چینل کو کور کرتا ہے، 00 (کوئی نہیں) سے FF (مکمل) تک، جو RGB کے وہی 16.7 ملین رنگوں کو کم جگہ میں ظاہر کرتا ہے۔ HEX CSS، ڈیزائن ٹولز اور برانڈ گائیڈ لائنز میں ڈیفالٹ ہے.
- سینٹیکس:
- #RRGGBB
- حد:
- ہر چینل کے لیے 00–FF
- بہترین برای:
- CSS، ڈیزائن ہینڈآف، برانڈ گائیڈ لائنز
HSL کیا ہے؟
HSL رنگ کو تین حصوں میں تقسیم کرتا ہے: hue (0–360° رنگ کے پہیے پر)، saturation (کتنا رنگین، 0–100%) اور lightness (کتنی روشنی، 0–100%)۔ چونکہ ہر حصہ اس انداز سے میل کھاتا ہے جس میں لوگ رنگ بیان کرتے ہیں، HSL ٹنٹس، شیڈز اور مستقل پیلیٹس بنانے کے لیے سب سے آسان فارمیٹ ہے — ہاتھ سے یا کوڈ میں۔
- سینٹیکس:
- hsl(H, S%, L%)
- حد:
- 0–360°, 0–100%, 0–100%
- بہترین برای:
- پیلیٹس، ٹنٹس اور شیڈز، تھیمنگ
HEX سے HSL حوالہ جدول
سب سے عام CSS رنگ، HEX سے HSL میں تبدیل کیے گئے۔
| رنگ | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |