HSL رنگ کي اهڙي طريقي سان بيان ڪري ٿو جيئن ماڻهو ڳالهايندا آهن: ڪهڙو hue، ڪيترو رنگين، ڪيترو روشن. HEX ڪوڊ کي HSL ۾ تبديل ڪرڻ تيزيءَ سان رنگ کي اهڙي شڪل ۾ آڻي ٿو جنهن کي تون واقعي ايڊجسٽ ڪري سگهين ٿو — هلڪو ڪري، مدھم ڪري، يا ان مان هڪ مڪمل اسڪيل ٺاهي.
HEX کان HSL تبديلي ڪيئن ڪم ڪري ٿي
- HEX ڪوڊ کي RGB ۾ تبديل ڪر ۽ هر چينل کي 255 سان ورهايو، ته جيئن سڀ ٽي قيمتون 0 ۽ 1 جي وچ ۾ هجن.
- انهن ٽن مان سڀ کان وڏو ۽ سڀ کان ننڍو ڳوله؛ انهن جو اوسط lightness L آهي.
- انهن جي وچ جو فرق saturation S کي هلائيندو: روشن رنگن لاءِ ان کي (2 − max − min) سان ورهايو، يا اونداهن لاءِ (max + min) سان.
- جن چينلن ۾ وڌ کان وڌ قيمت آهي اهو hue H جو فيصلو ڪري ٿو — ڳاڙھو 0° تي، سائو 120° تي، نيرو 240° تي — ۽ ٻيا ٻه چينل ان سيگمينٽ اندر hue جي جڳھه طئي ڪن ٿا.
مثال سان ڪم ٿيل
حساب بالڪل صحيح آهن، پر 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%) |