HSL میں رنگ چننا آرام دہ ہے، مگر stylesheets، design handoffs اور برانڈ ڈاکومنٹس اب بھی HEX پر چلتے ہیں۔ یہ کنورٹر یہ خلا پُر کر کے کسی بھی hue، saturation اور lightness ترکیب کا چھ ہندسی کوڈ دے دیتا ہے۔
HSL سے HEX تبدیلی کیسے کام کرتی ہے
- saturation اور lightness کو اعشاری حصوں میں بدل دو: 60% بن جاتا ہے 0.6۔
- chroma کا حساب کرو: C = (1 − |2L − 1|) × S — یہ بتاتا ہے کہ رنگ کتنے گریے سے دور ہے۔
- hue استعمال کرو تاکہ اس chroma کو سرخ، سبز اور نیلے چینلز پر رکھو، پھر تینوں کو L − C/2 سے شفٹ کرو۔
- ہر چینل کو 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 |