HSL နဲ့ ရောင်ရွေးရတာ ခံစားရဖို့ စိတ်ချမ်းသာပေမယ့် stylesheets, design handoffs, brand document တွေကတော့ အများအားဖြင့် HEX နဲ့ သက်ဆိုင်နေတယ်။ ဒီ converter က အကန့်အသတ်ကို ဖျက်ပြီး မည်သည့် hue, saturation, lightness စုံတွဲမဆို လေးလံတဲ့ ငါးလုံးကိန်း HEX ကို ပေးမှာပါ။
HSL မှ HEX ပြောင်းခြင်း လုပ်ပုံလုပ်နည်း
- saturation နဲ့ lightness ကို ယူပြီး စာရင်းထားအဖြစ် ပြောင်းပါ — 60% က 0.6 ဖြစ်ပါတယ်။
- chroma C = (1 − |2L − 1|) × S ကို တွက်ပါ — ဒါက ရောင်ဟာ မဲရောင်(grey) မှ ရ 얼마나 cáchရှိတယ်ဆိုတာကို ပြ တဲ့ ဖြစ်စဉ်ပါ။
- hue ကို အသုံးပြုပြီး chroma ကို red, green, blue ချန်နယ်များပေါ်တွင် တည်နေရာချပေးပါ၊ ပြီးနောက် တစ်ခုပြီးတိုင်းကို L − C/2 နဲ့ ညှိလှိမ့်ပါ။
- ချန်နယ်တိုင်းကို 255 နဲ့ မြှောက်ပြီး စုံလုံး(round) လုပ်ကာ အပိုင်းနှစ်လုံးဖြင့် hexadecimal အဖြစ်ရေးပါ။
အလုပ်ဖြစ်သည့် နမူနာ
တစုံတစ်ခုကို round လုပ်တာကနောက်ဆုံး အဆင့်မှာပဲ ဖြစ်တယ်၊ ချန်နယ်တိုင်းကို 0–255 တည့်တည့်တဲ့ တန်ဖိုးတစ်ခုသို့ ပိတောက်လိုက်ချိန်။ ရလဒ်က သင့် HSL input အနီးဆုံး HEX ကို ပေးမယ်၊ ပုံမှန်အားဖြင့် design tool တွေပြတာနဲ့ လုံးဝတူတယ်။
HSL နဲ့ HEX ကို ရှင်းပြချက်
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 ဆိုတာ ဘာလဲ?
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 မှ HEX ကို ရှင်းလင်း ဇယား
အများဆုံး အသုံးပြုတဲ့ CSS အရောင်များကို HSL မှ HEX သို့ ပြောင်းထားသည်။
| အရောင် | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |