HSL ۾ رنگ چونڊڻ آرامده آهي، پر stylesheet، ڊيزائن هينڊ آف ۽ برانڊ دستاويز اڃان HEX تي هلن ٿا. هي ڪنورٽر اهو فرق بند ڪري ٿو ۽ ڪنهن به hue، saturation ۽ lightness جي ميل لاءِ تو کي ڇهن-عددي ڪوڊ ڏئي ٿو.
HSL کان HEX تبديلي ڪيئن ڪم ڪري ٿي
- saturation ۽ lightness کي ڀاڱن ۾ تبديل ڪر: 60% بڻجي ٿو 0.6.
- chroma C = (1 − |2L − 1|) × S حساب ڪر — اهو ڏيکاري ٿو رنگ ڪيترو گرين کان پري آهي.
- hue کي استعمال ڪري اهو chroma ريڊ، گرين ۽ بليو چينلن تي رکو، پوءِ سڀني ٽي کي L − C/2 سان shift ڪر.
- هر چينل کي 255 سان ضرب ڪر، گول ڪر، ۽ ان کي ٻن هيڪساڊيسيمل عددن طور لکو.
مثال سان ڪم ٿيل
گول ڪرڻ صرف آخري قدم ۾ ٿئي ٿو، جڏهن هر چينل کي 0–255 جي مڪمل عدد تي ڇڪيو وڃي ٿو. نتيجو توھان جي HSL ان پُٽ جي سڀ کان ويجھو HEX ڪوڊ آهي ۽ عام طور تي ڊيزائن ٽول جيڪو ڏيکاري ٿو ان سان هڪجهڙو هوندو.
HSL ۽ HEX جي وضاحت
HSL ڇا آهي؟
HSL هڪ رنگ کي hue (0–360° رنگي ويل تي)، saturation (ڪيترو رنگين، 0–100%) ۽ lightness (ڪيترو روشن، 0–100%) ۾ ورهائي ٿو. ڇاڪاڻ ته هر حصو ان طريقي سان ميل رکي ٿو جنهن سان ماڻهو رنگ بيان ڪن ٿا، HSL ٽِنٽس، شيڊز ۽ مستقل پيلٽ ٺاهڻ لاءِ سڀ کان آسان فارميٽ آهي — هٿ سان يا ڪوڊ ۾.
- سنٽيڪس:
- hsl(H, S%, L%)
- حد:
- 0–360°, 0–100%, 0–100%
- بهترين لاءِ:
- پيلٽس، ٽِنٽس ۽ شيڊز، ٿيمنگ
HEX ڇا آهي؟
HEX ڪوڊ هڪ ڇهه عددي هيڪساڊيسيمل نمبر آهي جيڪو رنگ جي ريڊ، گرين ۽ بليو چينل کي اڳواٽ # سان محفوظ ڪري ٿو. هر ٻه اکر هڪ چينل ڪن ٿا، 00 (ڪو نه) کان FF (مڪمل) تائين، جيڪو RGB جي 16.7 ملين رنگن سان هڪجهڙو آهي پر وڌيڪ مختصر نوٽيشن ۾. HEX CSS، ڊيزائن ٽولز ۽ برانڊ گائيڊلائنز ۾ ڊيفالٽ آهي.
- سنٽيڪس:
- #RRGGBB
- حد:
- هر چينل لاءِ 00–FF
- بهترين لاءِ:
- CSS، ڊيزائن هينڊ آف، برانڊ گائيڊلائنز
HSL کان HEX حوالا جدول
سڀ کان عام CSS رنگ، HSL کان HEX ۾ تبديل ٿيل.
| رنگ | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |