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