HSL د رنګ انتخاب یوه دوستانه لار ده، RGB هغه څه دي چې سکرینونه، canvas API‑ونه او د عکس کوډ واقعي مصرفوي. دا کنورټر هر هیو، سیچوریشن او لایټنس درېګونی په دقیق 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 ضرب کړه.
یو عملي مثال
نتیجه تر وروستۍ ګردولو پورې دقیقه ده. کسر هیو یا سیچوریشن ملاتړ شوي او په ساده ډول تر ټولو نږدې RGB درېګوني ته رسیږي.
HSL او RGB تشریح
HSL څه شی دی؟
HSL رنګ په تینګې (حوړ) کې ویشي (0–360° د رنګ په څرخ کې)، سېچوریشن (څومره رنګینه، 0–100%) او رڼا (څومره روښانه، 0–100%). ځکه هره برخه د خلکو د رنګ بیانولو سره سمون لري، HSL د ټینټونو، شیډونو او منظم پالېټونو جوړولو لپاره تر ټولو اسانه فورمټ دی — په لاس یا په کود کې.
- نحو:
- hsl(H, S%, L%)
- حد:
- 0–360°, 0–100%, 0–100%
- د غوره کارونې لپاره:
- پالېټونه، ټینټونه او شیډونه، موضوع بندي
RGB څه شی دی؟
RGB یو رنګ د رڼا په درې چینلونو کې تشریح کوي — سور، شین او شیني — هر یو له 0 څخه تر 255 پورې. دا د سکرینونو د کار کولو څرګندویي کوي: ټول درې په 255 کې سپین ورکوي، ټول په 0 کې تور. کله چې تا اړتیا وي له رنګ سره محاسبه وکړې، RGB سم انتخاب دی، او rgba() شفافیت هم وړ اضافه کوي.
- نحو:
- rgb(R, G, B)
- حد:
- 0–255 per channel
- د غوره کارونې لپاره:
- کود، canvas، د 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) |