RGB اسڪرين کي ٻڌائي ٿو ڪيتري روشني خارج ڪرڻي آهي؛ HSL توکي ٻڌائي ٿو رنگ حقيقت ۾ ڪهڙو ڏسڻ ۾ اچي ٿو. ٽن چينلن کي hue، saturation ۽ lightness ۾ تبديل ڪرڻ سان رنگ کي هٿ سان ايڊجسٽ ڪرڻ سولو ٿي وڃي ٿو.
RGB کان HSL تبديلي ڪيئن ڪم ڪري ٿي
- R، G ۽ B کي 255 سان ورهايو ته جيئن هر قيمت 0 ۽ 1 جي وچ ۾ هجي.
- ٽن مان وڌ کان وڌ ۽ گهٽ کان گهٽ وٺو — انهن جو اوسط lightness L آهي.
- جيڪڏهن وڌ ۽ گهٽ برابر هجن ته رنگ گرين (grey) آهي: hue ۽ saturation ٻئي 0 هوندا.
- نه ته S کي وڌ ۽ گهٽ جي وچ واري فرق مان نڪرو، ۽ H کي جنهن چينل ۾ وڌ قدر هجي ان مان پڙهو.
مثال سان ڪم ٿيل
اصولن ۾ درست. ڇاڪاڻ ته H، S ۽ L عام طور تي گول ڪيل پوري عددن طور ڏيکاريا وڃن ٿا، پوئتي تبديل ڪرڻ دوران هڪ يا ٻه چينل قدمن جو فرق ٿي سگهي ٿو.
RGB ۽ HSL جي وضاحت
RGB ڇا آهي؟
RGB هڪ رنگ کي ٽي لائيٽ چينلن طور بيان ڪري ٿو — red، green ۽ blue — هر هڪ 0 کان 255 تائين. اهو ان طريقي کي عڪس ڪري ٿو جنهن سان اسڪرين ڪم ڪن ٿيون: سڀ ٽي 255 تي اڇو ڏين ٿا، سڀ صفر تي ڪارو. جڏهن به توکي رنگ سان حساب ڪرڻو هجي ته 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%) |