HSL က အရောင်ရွေးရာမှာ မေတ္တာရှိတဲ့နည်းဖြစ်ပြီး၊ RGB ကတော့ screen၊ canvas API နှင့် image code တွေအတွက် အမှန်တကယ်အသုံးပြုတဲ့ဖော်မက်ဖြစ်ပါတယ်။ ဒီကွန်ဗာတာက hue, saturation, lightness ထုံးစံကို တိကျတဲ့ 0–255 ချန်နယ်တွေသို့ ပြောင်းပေးပါတယ်။
HSL မှ RGB ပြောင်းခြင်း လုပ်ပုံလုပ်နည်း
- S နဲ့ L ကို fraction များအဖြစ် ပြောင်းပြီး chroma C = (1 − |2L − 1|) × S ကိုတွက်ပါ။
- Hue ကို 60 နဲ့ bahagi လုပ်ကာ color wheel ပေါ်က segment ကိုရှာပြီး intermediate value X = C × (1 − |(H/60 mod 2) − 1|) ကိုတွက်ပါ။
- အဲဒီ segment အပေါ်မူတည်၍ R, G, B slots တွေကို C, X, 0 အလိုက် သတ်မှတ်ပါ။
- lightness offset L − C/2 ကို သုံးချ-channel မွာ ဖျော်ထည့်ပြီး 255 နှင့်မြှင့်လိုက်ပါ။
အလုပ်ဖြစ်သည့် နမူနာ
အကြိမ်ကြိမ်က Round ချခြင်းအထိ တိကျသောရလဒ်ဖြစ်ပါတယ်။ fractional hue သို့မဟုတ် saturation ကိုလက်ခံနိုင်ပြီး အနီးဆုံး RGB triple သို့ ဆင်းမည်ဖြစ်သည်။
HSL နဲ့ RGB ကို ရှင်းပြချက်
HSL ဆိုတာ ဘာလဲ?
HSL က အရောင်ကို hue (colour wheel ပေါ်မှာ 0–360°), saturation (ဘယ်လောက်ရောင်ရှိသလဲ၊ 0–100%) နှင့် lightness (ဘယ်လောက်တောက်ပသလဲ၊ 0–100%) သုံးပုဒ်ခွဲထားပါတယ်။ လူတွေ အရောင်ကို ဖေါ်ပြတဲ့ နည်းလမ်းနဲ့ ကိုက်ညီတာမို့ HSL က လက်နှင့် ကိုဒ်နဲ့ tint, shade, တူညီတဲ့ palettes တည်ဆောက်ဖို့ အရမ်းလွယ်ကူပါတယ်။
- စာတမ်းဖွဲ့စည်းပုံ:
- hsl(H, S%, L%)
- အကွာအဝေး:
- 0–360°, 0–100%, 0–100%
- အကောင်းဆုံး အသုံးပြုရန်:
- palettes, tints and shades, theming
RGB ဆိုတာ ဘာလဲ?
RGB သည် အရောင်ကို အရောင်မိတ်ဖွဲ့သည့် အလင်းချန်နယ် သုံးခုဖြင့် ဖော်ပြသည် — red, green, blue — တစ်ချ-channel အားလုံးမှာ 0 မှ 255 ထိ။ မျက်နှာပြင်တွေ လက်တွေ့ လုပ်ပုံစံကို ထပ်မြင်သောအတိုင်း၊ အားလုံး 255 ရှိရင် အဖြူ၊ အားလုံး 0 ရှိရင် အနက် ဖြစ်သည်။ RGB ကို အရောင်နဲ့ တွက်ချက်မှု လုပ်ချင်တဲ့အခါ အသုံးပြုပါ၊ rgba() ကနေ transparency ကို ထပ်ထည့်နိုင်ပါတယ်။
- စာတမ်းဖွဲ့စည်းပုံ:
- rgb(R, G, B)
- အကွာအဝေး:
- တစ်ချန်နယ်လျှင် 0–255
- အကောင်းဆုံး အသုံးပြုရန်:
- code, canvas, transparency with 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) |