RGB က မျက်နှာပြင်ကို မီးဘယ်လောက်ထုတ်မယ်ဆိုတာ ပြောပေးတယ်; HSL ကတော့ ရောင်ဘယ်လိုမြင်ရမယ်ဆိုတာ ပိုရှင်းပြတယ်။ သုံးချန်နယ်ကို hue, saturation, lightness သို့ ပြောင်းလိုက်ရင် လက်ဖြင့် ပြင်ဆင်ရတာ ပိုလွယ်ကူတယ်။
RGB မှ HSL ပြောင်းခြင်း လုပ်ပုံလုပ်နည်း
- R, G, B ကို 255 နဲ့ ဝေပြီး တန်ဖိုးတိုင်းကို 0 မှ 1 အတွင်း ဖြစ်အောင်လုပ်ပါ။
- သုံးခုထဲက အများဆုံးနဲ့ အနည်းဆုံးကို ယူပါ — သူတို့ရဲ့ ပျမ်းမျှမှုက lightness L ဖြစ်သည်။
- အများဆုံးနဲ့ အနည်းဆုံး တူညီနေရင် အဲဒီရောင်က မဲရောင်ပါ — hue နဲ့ saturation နှစ်ခုလုံး 0 ဖြစ်သွားပါမယ်။
- မဟုတ်ရင် spread (ကွာဟမှု) မှ S ကို တွက်ပြီး အများဆုံးကိုင်ထားတဲ့ ချန်နယ်ကနေ H ကို ဖတ်ယူပါ။
အလုပ်ဖြစ်သည့် နမူနာ
နိယာမအရ တိတိကျကျ ဖြစ်တယ်။ H, S, L ကို ပုံမှန်အားဖြင့် တိုင်းတာပြသတဲ့အခါ integer ပြတ်(round) လုပ်စေတတ်လို့ ပြန်ပြောင်းလိုက်ရင် ချန်နယ်တစ်ခု သို့မဟုတ် နှစ်ခု ကွာခြားသွားနိုင်ပါတယ်။
RGB နဲ့ HSL ကို ရှင်းပြချက်
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 ဆိုတာ ဘာလဲ?
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 မှ HSL ကို ရှင်းလင်း ဇယား
အများဆုံး အသုံးပြုတဲ့ CSS အရောင်များကို RGB မှ HSL သို့ ပြောင်းထားသည်။
| အရောင် | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |