HSL မှ HEX သို့ပြောင်းလဲခြင်း – အလုပ်လုပ်ပုံနှင့် အသုံးဝင်ပုံ
ဤစာမျက်နှာသည် အသုံးပြုသူမှထည့်သွင်းသော HSL အရောင်ကို အလိုအလျောက် HEX ကုဒ်အဖြစ်ပြောင်းပေးသည်။ သင်သည် Hue (၀–၃၆၀ ဒီဂရီ)၊ Saturation (ရာခိုင်နှုန်း) နှင့် Lightness (ရာခိုင်နှုန်း) ကို ရိုက်ထည့်သည်နှင့် တစ်ပြိုင်နက် HEX ကုဒ် (ဥပမာ #1E90FF) ပေါ်လာသည်။ အားလုံးသော အပြောင်းအလဲများကို ဘရောက်ဆာထဲတွင်သာ လုပ်ဆောင်ပြီး သင်၏ဒေတာကို မည်သည့်ဆာဗာသို့မျှ မပို့ပါ။
ဤစာမျက်နှာ၏ ထူးခြားချက်
HSL သည် လူသားတို့၏ အရောင်အပေါ် နားလည်မှုအတွက် ဒီဇိုင်းထုတ်ထားသော ပုံစံဖြစ်သည်။ Lightness ကိုပြောင်းလဲပါက Hue မပြောင်းဘဲ အရောင်အဆင်းကို ထိန်းသိမ်းထားနိုင်သည်။ ထို့ကြောင့် palette နှင့် theme ဖန်တီးရာတွင် အသုံးများသည်။ HEX သည် RGB ၏ ခြောက်လုံး (သို့မဟုတ် သုံးလုံးအတိုကောက်) ဖော်ပြမှုဖြစ်ပြီး alpha မပါဝင်ပါ (ရှစ်လုံးပုံစံမှလွဲ၍)။ HSL မှ HEX သို့ပြောင်းလဲမှုသည် sRGB အကွာအဝေးအတွင်း lossless ဖြစ်သည်။ LAB သို့မဟုတ် CMYK ကဲ့သို့သော ပြောင်းလဲမှုများနှင့်မတူဘဲ gamut ပြင်ပအရောင်များကို ညှိရန်မလိုအပ်ပါ။ ဤစာမျက်နှာသည် ထိုရိုးရှင်းသော HSL-to-HEX ပြောင်းလဲမှုကိုသာ အာရုံစိုက်ထားသည်။
HSL နှင့် HEX ၏ သဘောတရား
HSL မော်ဒယ်တွင် Hue (အရောင်စက်ဝိုင်း)၊ Saturation (အရောင်ပြင်းအား) နှင့် Lightness (အလင်းပြင်းအား) ဆိုသည့် အစိတ်အပိုင်းသုံးခုပါဝင်သည်။ HEX (hexadecimal) သည် RGB သုံးရောင်စုံ၏ တန်ဖိုးများကို ၀–၂၅၅ မှ ၀၀–FF သို့ပြောင်းကာ ခြောက်လုံးကုဒ်အဖြစ်ဖော်ပြသည်။ ဥပမာ #4f46e5 တွင် red=4f (79)၊ green=46 (70)၊ blue=e5 (229) ဖြစ်သည်။ တစ်ခါတစ်ရံ သုံးလုံးအတိုကောက်ပုံစံ (ဥပမာ #abc) ကိုလည်း ပြသနိုင်သည် — RGB channel တစ်ခုစီကို digit တစ်လုံးတည်းဖြင့် ဖော်ပြနိုင်မှသာ အလုပ်ဖြစ်သည်။
ထည့်သွင်းမှုများနှင့် ရလဒ်များ
အသုံးပြုသူသည် Hue (0–360)၊ Saturation (0–100%) နှင့် Lightness (0–100%) ကို ထည့်ရသည်။ ဥပမာ 243, 75%, 59% သည် #4f46e5 သို့ပြောင်းသည်။ HEX ရလဒ်အပြင် RGB၊ HSV၊ CMYK နှင့် LAB တန်ဖိုးများလည်း တစ်ပြိုင်နက်ပေါ်လာသည်။ မည်သည့်အကွက်ကိုမဆို တည်းဖြတ်ပါက ကျန်အကွက်အားလုံးကို အလိုအလျောက်ပြောင်းပေးသည်။
စည်းမျဉ်းများနှင့် ဘေးဘောင်အခြေအနေများ
HSL တန်ဖိုးများသည် ခွင့်ပြုထားသောအကွာအဝေးပြင်ပသို့ရောက်ပါက (သို့) ပုံစံမကျပါက အောက်ပါအမှားစာတိုပေါ်လာသည် - "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."။ Saturation နှင့် Lightness အတွက် % သင်္ကေတမပါပါက အလုပ်မလုပ်ပါ။ ပြောင်းလဲမှုသည် sRGB အကွာအဝေးအတွင်းသာ လုပ်ဆောင်သောကြောင့် out-of-gamut ပြင်ဆင်မှုမလိုအပ်ပါ။ CMYK ရလဒ်သည် မျက်နှာပြင်ပေါ်ရှိ ခန့်မှန်းတန်ဖိုးသာဖြစ်ပြီး ပရော်ဖက်ရှင်နယ်ပုံနှိပ်တန်ဖိုးနှင့် ကွာနိုင်သည်။
ဤကိရိယာကို မည်သူများအသုံးပြုသင့်သနည်း
- ဒီဇိုင်နာများ – HSL ဖြင့် palette တည်ဆောက်ပြီး HEX ကုဒ်အဖြစ် code သို့မဟုတ် ဒီဇိုင်းကိရိယာများတွင် အသုံးပြုရန် လိုအပ်သူများ။
- ရှေ့ဆုံး developer များ – Figma, Sketch စသော ဒီဇိုင်းဖိုင်များမှ HSL တန်ဖိုးများကို CSS HEX သို့ပြောင်းရန် လိုအပ်သူများ။
- မည်သူမဆို – Lightness ကိုပြောင်းလဲပြီး WCAG contrast စည်းမျဉ်းများနှင့်ကိုက်ညီစေရန် HSL ကိုချိန်ညှိကာ HEX သို့ပြောင်းလဲလိုသူများ။
အမေးများသောမေးခွန်းများ
မေး – HSL မှ HEX သို့ပြောင်းလဲရာတွင် အရောင်ဆုံးရှုံးမှုရှိပါသလား။
မရှိပါ။ sRGB အကွာအဝေးအတွင်း lossless ပြောင်းလဲမှုဖြစ်သည်။
မေး – သုံးလုံးအတိုကောက် HEX (ဥပမာ #abc) ကို ဘယ်အချိန်မှာပြသလဲ။
RGB channel တစ်ခုစီကို hexadecimal digit တစ်လုံးတည်းဖြင့် ကိုယ်စားပြုနိုင်မှသာ (ဥပမာ #aabbcc) သုံးလုံးပုံစံ ပေါ်လာသည်။
မေး – Hue ၃၆၀ ဒီဂရီထက်ကျော်ပါက ဘာဖြစ်မလဲ။
အမှားစာတို ပြသပြီး HEX တန်ဖိုးမထုတ်ပေးပါ။
မေး – CMYK တန်ဖိုးကို ပုံနှိပ်အတွက်ယုံကြည်နိုင်ပါသလား။
မယုံကြည်ပါနှင့်။ ၎င်းသည် ခန့်မှန်းခြေတန်ဖိုးသာဖြစ်ပြီး ပရော်ဖက်ရှင်နယ်ပုံနှိပ်စက်များနှင့်ကွာနိုင်သည်။
မေး – ဤကိရိယာသည် အင်တာနက်ချိတ်ဆက်မှုလိုအပ်ပါသလား။
မလိုအပ်ပါ။ အားလုံးသော တွက်ချက်မှုများကို သင့်ဘရောက်ဆာထဲတွင် လုပ်ဆောင်ပြီး ဒေတာကို မည်သည့်နေရာသို့မျှ မပို့ပါ။