RGB မှ HSL သို့ ပြောင်းလဲပေးသည့် ကိရိယာ

RGB မှ HSL သို့ ပြောင်းလဲခြင်း

RGB သည် မျက်နှာပြင်ပေါ်တွင် အရောင်ပြသရန် ဒီဇိုင်းထုတ်ထားသည့် ကုဒ်တစ်ခုဖြစ်ပြီး၊ အနီ၊ အစိမ်း၊ အပြာ အလင်းရောင်သုံးမျိုး၏ ပြင်းအား (0 မှ 255) ကို ပေါင်းစပ်ဖော်ပြသည်။ သို့သော် လူသားများအတွက် အရောင်ကို နားလည်ရန်မှာ ဤပုံစံသည် သဘာဝကျမှုမရှိပေ။ ဤစာမျက်နှာသည် အဆိုပါ ပြဿနာကို ဖြေရှင်းပေးသည်။ ၎င်းသည် RGB ကို HSL (Hue, Saturation, Lightness) သို့ ပြောင်းပေးပြီး၊ အသုံးပြုသူများအား အရောင်၏ သဘောသဘာဝကို ပိုမိုလွယ်ကူစွာ နားလည်နိုင်စေရန် ကူညီသည်။ HSL တွင်၊ Hue သည် အရောင်၏ အမျိုးအစား (အနီ၊ အပြာ စသည်) ကို 0° မှ 360° အထိ စက်ဝိုင်းပုံ ဖော်ပြပြီး၊ Saturation သည် အရောင်၏ သန့်ရှင်းမှု (၀% မှ 100%) ကို ကိုယ်စားပြုကာ၊ Lightness သည် အရောင်၏ တောက်ပမှု (၀% မှ 100%) ကို ဖော်ပြသည်။

ထည့်သွင်းခြင်းနှင့် ရလဒ်များ

RGB ကို ထည့်သွင်းနိုင်ပြီး HSL၊ HEX၊ HSV၊ CMYK နှင့် LAB ဟူသော အသုံးများသည့် ဖော်မတ်ငါးမျိုးသို့ ချက်ချင်း ပြောင်းပေးသည်။ ဥပမာအားဖြင့် RGB (79, 70, 229) ကို ထည့်သွင်းပါက HSL (243°, 75%, 59%) နှင့် အခြားသော ဖော်မတ်များ ထွက်လာမည်။ ဤပြောင်းလဲမှုများအားလုံးသည် သင့်ဘရောက်ဆာတွင် ဖြစ်ပေါ်ပြီး၊ မည်သည့် အချက်အလက်မျှ ဆာဗာသို့ မပို့ဆောင်ပါ။ ထို့အပြင် HSL ကို တိုက်ရိုက် ထည့်သွင်းပါက RGB သို့ ပြန်လည် ပြောင်းပေးနိုင်သည်။ CMYK နှင့် LAB ကဲ့သို့သော ဖော်မတ်များမှ ပြောင်းလာသော အရောင်များသည် RGB နယ်ပယ်အတွင်းမရှိပါက၊ အနီးစပ်ဆုံး အရောင်သို့ အလိုအလျောက် ညှိပေးသော်လည်း၊ ပြန်လည် ပြောင်းလျှင် အနည်းငယ် ကွဲလွဲမှု ရှိနိုင်သည်။

HSL ကို အသုံးပြုရခြင်း၏ အကြောင်းရင်းများ

RGB တွင် အနီ၊ အစိမ်း သို့မဟုတ် အပြာ ပြင်းအားတစ်ခုခုကို ပြောင်းလိုက်သည်နှင့် အရောင်၏ အမျိုးအစားပါ ပြောင်းသွားတတ်သည်။ HSL ၏ ထူးခြားချက်မှာ Lightness ကို သီးသန့်ပြောင်းနိုင်ပြီး၊ Hue ကို မပြောင်းလဲစေဘဲ အရောင်၏ တောက်ပမှုကို ထိန်းချုပ်နိုင်ခြင်းဖြစ်သည်။ ၎င်းသည် UI/UX ဒီဇိုင်နာများ၊ ရှေ့ဆုံးပရိုဂရမ်မာများနှင့် အရောင်အသွေး အစီအစဉ်များ ဖန်တီးသူများအတွက် အလွန်အသုံးဝင်သည်။ ဥပမာအားဖြင့်၊ သင်သည် ကုမ္ပဏီအရောင်တစ်ခုမှ အလင်းရောင် နှင့် အမှောင်ရောင် မူကွဲများကို ဖန်တီးလိုပါက HSL ကိုသုံး၍ Lightness ကိုသာ ပြောင်းလဲလိုက်ရုံဖြင့် မူလအရောင်၏ ဝိသေသလက္ခဏာကို ထိန်းသိမ်းထားနိုင်သည်။ ထို့အပြင် WCAG (Web Content Accessibility Guidelines) အရ စာသားနှင့် နောက်ခံအကြားတွင် လုံလောက်သော ဆန့်ကျင်ဘက် အချိုးအစားရရှိရန် Lightness ကို ညှိနိုင်ပြီး၊ အရောင်၏ မူလအမျိုးအစားကိုမူ မပြောင်းလဲစေပါ။

RGB မှ HSL သို့ ပြောင်းလဲခြင်း သင်္ချာနည်း

ဤသို့ ပြောင်းလဲရန်အတွက် RGB တန်ဖိုးများကို 255 ဖြင့် စားပြီး 0 မှ 1 အထိ ပုံမှန်ဖြစ်အောင် ပြုလုပ်ရသည်။ ထို့နောက် အမြင့်ဆုံး (max) နှင့် အနိမ့်ဆုံး (min) တန်ဖိုးကို ရှာပြီး၊ Lightness ကို (max + min) / 2 ဖြင့် တွက်သည်။ Saturation ကို (max - min) / (1 - |2L - 1|) ဖြင့် တွက်ပြီး၊ Hue ကို အောက်ပါအတိုင်း တွက်သည်။

Hue တွက်ရန် အခြေအနေ သုံးမျိုးရှိသည်။ max သည် အနီ (R) ဖြစ်ပါက 60 × ((G - B) / (max - min))၊ max သည် အစိမ်း (G) ဖြစ်ပါက 60 × (2 + (B - R) / (max - min))၊ နှင့် max သည် အပြာ (B) ဖြစ်ပါက 60 × (4 + (R - G) / (max - min)) ဟု တွက်သည်။ ရလဒ်သည် အနုတ်လက္ခဏာဖြစ်ပါက 360 ကို ပေါင်းထည့်ရသည်။ ဤနည်းလမ်းသည် စံသတ်မှတ်ထားသော sRGB နေရာတွင် အလုပ်လုပ်သည်။

ကန့်သတ်ချက်များနှင့် သတိပြုရန်အချက်များ

HSL သည် အရောင်ကို နားလည်ရန် လွယ်ကူစေသော်လည်း၊ ၎င်းသည် လူ့မျက်လုံး၏ ခံစားမှုကို တိကျစွာ ပုံဖော်နိုင်သော မော်ဒယ် (perceptually uniform model) မဟုတ်ပေ။ ဥပမာအားဖြင့် အနှစ်ရောင် နှင့် အပြာရောင်သည် တူညီသော Lightness ရှိသော်လည်း လူက အနှစ်ရောင်ကို ပိုမိုတောက်ပသည်ဟု ခံစားရနိုင်သည်။ ထို့ကြောင့် အရောင်အသွေး အဆင့်ဆင့် (color scales) ဖန်တီးရန် LAB (CIELAB) ကဲ့သို့သော အခြားမော်ဒယ်များကို အသုံးပြုခြင်းက ပိုမိုသင့်လျော်သည်။ CMYK ရလဒ်သည် မျက်နှာပြင်တွက်ချက်မှု (screen estimate) သာဖြစ်သောကြောင့် ပရော်ဖက်ရှင်နယ် ပုံနှိပ်လုပ်ငန်းအတွက် အသုံးမပြုမီ စစ်ဆေးသင့်သည်။

ဒီဇိုင်းနှင့် ဖွံ့ဖြိုးရေးတွင် လက်တွေ့အသုံးချမှု

CSS တွင် hsl() နှင့် hsla() ဟူသော လုပ်ဆောင်ချက်များဖြင့် HSL တန်ဖိုးများကို တိုက်ရိုက် အသုံးပြုနိုင်သည်။ JavaScript ဖြင့် DOM ရှိ အရောင်များကို ပြောင်းလဲရာတွင်လည်း HSL သည် အလွန်အဆင်ပြေသည်။ အကြောင်းမှာ၊ သင်သည် Lightness ကိုသာ ပြောင်းလဲပြီး Hue နှင့် Saturation ကို မထိဘဲထားနိုင်သောကြောင့်ဖြစ်သည်။ အရှုပ်ထွေးဆုံး အမှားတစ်ခုမှာ RGB တွင် တူညီသော အရောင်ကို ကိုယ်စားပြုရန် HSL တန်ဖိုးများကို လွဲမှားစွာ ရွေးချယ်ခြင်းဖြစ်ပြီး၊ ၎င်းကို ဤကိရိယာဖြင့် ရှောင်ရှားနိုင်သည်။

FAQ

မေး- RGB တန်ဖိုးကို ဘယ်လိုပုံစံနဲ့ ထည့်သွင်းရမလဲ။ ဖြေ- RGB ကို နံပါတ်သုံးလုံး (0-255) အဖြစ် ကော်မာ သို့မဟုတ် နေရာလွတ်ဖြင့် ခြားပြီး ထည့်သွင်းပါ။ ဥပမာ- 79, 70, 229 သို့မဟုတ် 79 70 229။

မေး- မှားယွင်းတဲ့ RGB ထည့်သွင်းရင် ဘာဖြစ်မလဲ။ ဖြေ- “Enter RGB as three numbers 0–255, like 79, 70, 229.” ဟူသော မက်ဆေ့ခ်ျ ပြပါမည်။

မေး- HSL ကို တိုက်ရိုက် ထည့်သွင်းလို့ရလား။ ဖြေ- ရပါတယ်။ Hue (0-360) နဲ့ Saturation နှင့် Lightness (%) ကို ဥပမာ 243, 75%, 59% ကဲ့သို့ ထည့်သွင်းနိုင်ပြီး RGB သို့ ပြောင်းပေးပါမည်။

မေး- CMYK ရလဒ်ကို ပုံနှိပ်ဖို့ သုံးလို့ရလား။ ဖြေ- မဖြစ်နိုင်ပါ။ ၎င်းသည် မျက်နှာပြင်ပေါ်တွင် တွက်ချက်ထားသော ခန့်မှန်းချက်သာဖြစ်ပြီး ပရော်ဖက်ရှင်နယ် ပုံနှိပ်မှုအတွက် တိကျမှုကို အာမမခံနိုင်ပါ။

မေး- LAB သို့မဟုတ် CMYK မှ ပြောင်းလာသော အရောင်ကို RGB သို့ ပြန်ပြောင်းရင် ဘာဖြစ်မလဲ။ ဖြေ- အကယ်၍ မူလတန်ဖိုးသည် RGB နယ်ပယ်အတွင်းမရှိပါက၊ အနီးဆုံး အရောင်သို့ အလိုအလျောက် ညှိပေးပြီး ပြန်ပြောင်းလျှင် အနည်းငယ် ကွဲလွဲမှုရှိနိုင်ပါသည်။