HSL က လူတွေပြောတဲ့ ပုံစံနဲ့ ရောင်ကို ဖော်ပြတယ် — ဘယ် hue, ဘယ်လောက် saturated, ဘယ်လောက် တောက်ပြောင်။ HEX ကုဒ်ကို HSL သို့ ပြောင်းခြင်းဟာ ကိုင်တွယ်ချင်တဲ့ ရောင်ကို လျင်မြန်စွာ ပြင်ဆင်ဖို့ (လင်းစေ, လျော့ချ, သို့မဟုတ် အတိုင်းအတာတစ်ဆင့်တိုးချဲ့) အလွယ်တကူသွားတဲ့ နည်းလမ်းပါ။
HEX မှ HSL ပြောင်းခြင်း လုပ်ပုံလုပ်နည်း
- HEX ကို RGB သို့ ပြန်ပြောင်းကာ ချန်နယ်တိုင်းကို 255 နဲ့ ဝေပါ၊ ဒီလိုလျှင် သုံးချန်နယ်အကုန်လုံး 0 မှ 1 အတွင်း ရှိမယ်။
- သုံးလုံးထဲက အကြီးဆုံးနဲ့ အငယ်ဆုံးကို ရှာပါ။ သူတို့ရဲ့ ပျမ်းမျှမှုက lightness L ဖြစ်တယ်။
- သူတို့ကြားက ကွာဟမှုဖြင့် saturation S ကို တွက်ပါတယ် — မီးပွိုင့်များ (light colors) အတွက် (2 − max − min) နဲ့ ခွဲပြီး၊ အမှောင်ပိုင်း (dark colors) တွေအတွက် (max + min) နဲ့ ခွဲပါ။
- အများဆုံးကိုင်ထားတဲ့ ချန်နယ်က hue H ကိုဆုံးဖြတ်ပါတယ် — အနီ 0°, အစိမ်း 120°, အပြာ 240° — အခြားနှစ်ချန်နယ်က ထို အပိုင်းအတွင်း hue ရှိရာနေရာကို သတ်မှတ်ပေးပါတယ်။
အလုပ်ဖြစ်သည့် နမူနာ
ဂဏာန်းဆိုင်ရာ ကိန်းဂဏန်းများ သတ်မှန်းချက် သေချာပေမယ့် HSL ကို မူလအတိုင်း ပြသရာမှာ ဒီဂရီနှင့် ရာခိုင်နှုန်းတွေကို ပြတ်သားစွာ ဝေစု(round) ပြီး ပြသလေ့ရှိတယ်။ ထို့ကြောင့် ပြန်လည်ပြောင်းလဲခြင်းက RGB ထဲသို့ တစ်ခု သို့မဟုတ် နှစ်ခု ချန်နယ်ခြားနားမှု ဖြစ်စေနိုင်ပြီး အလုံးစုံအားဖြင့် မမြင်သာသော်လည်း အကြိမ်အနှုန်းများစွာ round-trip လုပ်ရင် သိထားသင့်ပါတယ်။
HEX နဲ့ HSL ကို ရှင်းပြချက်
HEX ဆိုတာ ဘာလဲ?
HEX ကုဒ်ဟာ ဂဏန်း ၆ လုံးတဲ့ hexadecimal အမျိုးအစားဖြစ်ပြီး အရောင်ရဲ့ red, green, blue ချန်နယ်တွေကို 앞က # တစ်လုံးနဲ့ သိုလှောင်ထားတာပါ။ တစ်စုံစုံကို digit နှစ်လုံးက တစ်ချန်နယ်ကို ဖော်ပြပြီး 00 (မရှိ) ကနေ FF (အပြည့်) အထိ ဖြစ်ပါတယ်။ ဒါက RGB နဲ့ တူညီတဲ့ 16.7 million အရောင်တွေကို ပိုတိုရှည်ခံnotation နဲ့ ဖော်ပြနိုင်ပါတယ်။ HEX သည် CSS, design tools နဲ့ brand guidelines တွင် ပုံမှန် အသုံးပြုပါတယ်။
- စာတမ်းဖွဲ့စည်းပုံ:
- #RRGGBB
- အကွာအဝေး:
- တစ်ချန်နယ်လျှင် 00–FF
- အကောင်းဆုံး အသုံးပြုရန်:
- CSS, design handoff, brand guidelines
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
HEX မှ HSL ကို ရှင်းလင်း ဇယား
အများဆုံး အသုံးပြုတဲ့ CSS အရောင်များကို HEX မှ HSL သို့ ပြောင်းထားသည်။
| အရောင် | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |