RGB سکرین کو بتاتا ہے کتنی روشنی خارج کرنی ہے؛ HSL بتاتا ہے اصل میں رنگ کیسی نظر آتی ہے۔ تینوں چینلز کو hue، saturation اور lightness میں بدلنے سے رنگ ہاتھ سے ایڈجسٹ کرنا آسان ہو جاتا ہے۔
RGB سے HSL تبدیلی کیسے کام کرتی ہے
- R، G اور B کو 255 سے تقسیم کرو تاکہ ہر قدر 0 اور 1 کے درمیان ہو۔
- تینوں میں سب سے بڑا اور سب سے چھوٹا لو، ان کا اوسط lightness L ہے۔
- اگر زیادہ ترین اور کم ترین برابر ہوں تو رنگ سرمئی ہے: hue اور saturation دونوں 0 ہیں۔
- ورنہ S کو زیادہ اور کم کے پھیلاؤ سے نکالو، اور H اس چینل سے پڑھو جو زیادہ ترین ہے۔
کام کرنے کی مثال
اصولی طور پر درست۔ چونکہ H، S اور L عموماً گول کرکے پورے اعداد دکھائے جاتے ہیں، واپس تبدیل کرنے سے کسی چینل میں ایک یا دو قدم کا فرق آ سکتا ہے۔
RGB اور HSL کی وضاحت
RGB کیا ہے؟
RGB رنگ کو تین لائٹ چینلز میں بتاتا ہے — red، green اور blue — ہر ایک 0 سے 255 تک۔ یہ اس طریقے کی عکاسی کرتا ہے جس طرح سکرینز حقیقت میں کام کرتی ہیں: تینوں 255 پر سفید بنتے ہیں، تینوں 0 پر کالا بنتا ہے۔ جب تمہیں رنگ کے ساتھ کیلکولیشن کرنی ہو تو RGB صحیح انتخاب ہے، اور rgba() شفافیت شامل کرتا ہے۔
- سینٹیکس:
- rgb(R, G, B)
- حد:
- ہر چینل کے لیے 0–255
- بہترین برای:
- کوڈ، کینوس، rgba() کے ساتھ شفافیت
HSL کیا ہے؟
HSL رنگ کو تین حصوں میں تقسیم کرتا ہے: hue (0–360° رنگ کے پہیے پر)، saturation (کتنا رنگین، 0–100%) اور lightness (کتنی روشنی، 0–100%)۔ چونکہ ہر حصہ اس انداز سے میل کھاتا ہے جس میں لوگ رنگ بیان کرتے ہیں، HSL ٹنٹس، شیڈز اور مستقل پیلیٹس بنانے کے لیے سب سے آسان فارمیٹ ہے — ہاتھ سے یا کوڈ میں۔
- سینٹیکس:
- hsl(H, S%, L%)
- حد:
- 0–360°, 0–100%, 0–100%
- بہترین برای:
- پیلیٹس، ٹنٹس اور شیڈز، تھیمنگ
RGB سے HSL حوالہ جدول
سب سے عام CSS رنگ، RGB سے HSL میں تبدیل کیے گئے۔
| رنگ | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |