HEX မှ RGB သို့ ပြောင်းလဲခြင်း လမ်းညွှန်
ဤစာမျက်နှာသည် HEX အရောင်ကုဒ် (ဥပမာ #4f46e5 သို့မဟုတ် #abc) ကို စခရင်ပေါ်တွင် အရောင်ပြသရန် လိုအပ်သော RGB တန်ဖိုးများ (ဂဏန်း ၀ မှ ၂၅၅ အထိ သုံးလုံး) အဖြစ် ချက်ချင်းပြောင်းပေးသည်။ ဤတူးလ်သည် အခြားသော အရောင်ပြောင်းစက်များနှင့် မတူသည်မှာ hexadecimal (base‑16) ကိုယ်စားပြုမှုကို ဖန်သားပြင်က တိုက်ရိုက်သုံးသည့် decimal (base‑10) RGB ချန်နယ်များ အဖြစ်သို့ ပြောင်းလဲပေးသည်။ HEX ကုဒ်များသည် CSS တွင် ကျစ်လျစ်ပြီး တွင်ကျယ်စွာသုံးသော်လည်း ၎င်းတို့သည် RGB က ကိန်းဂဏန်းဖြင့်ဖော်ပြသည့် 8-bit ချန်နယ်သုံးခု၏ အတိုကောက်သာဖြစ်သည်။
HEX မှ RGB သို့ ပြောင်းလဲခြင်းသည် တိကျသော သင်္ချာဆိုင်ရာ လုပ်ငန်းစဉ် ဖြစ်သည်။ hex ဂဏန်းတစ်စုံစီကို 16 ၏ ထပ်ကိန်းများဖြင့် မြှောက်တွက်သောကြောင့် ရလဒ်သည် အတိအကျဖြစ်ပြီး ပြောင်းပြန်လှန်နိုင်သည် (အဝိုင်းလိုက်ခြင်း သို့မဟုတ် gamut clipping မရှိ)။
HEX အရောင်ကုဒ်ကို မည်သို့ ဖတ်ရှုနည်း
HEX ကုဒ်သည် # သင်္ကေတဖြင့် စတင်လေ့ရှိသော ဂဏန်း ၆ လုံး (သို့မဟုတ် အတိုကောက် ၃ လုံး) ပါဝင်သည်။
- ပုံစံ:
#RRGGBB - R (အနီရောင်): ပထမဆုံး ဂဏန်းနှစ်လုံး
- G (အစိမ်းရောင်): အလယ်ဂဏန်းနှစ်လုံး
- B (အပြာရောင်): နောက်ဆုံးဂဏန်းနှစ်လုံး
ဥပမာအားဖြင့် #4f46e5 ကိုကြည့်ပါ။ ဤတွင် R=4f, G=46, B=e5 ဖြစ်သည်။ ဤ hexadecimal အတွဲများကို decimal တန်ဖိုးများအဖြစ် ပြောင်းလဲရန် အောက်ပါအတိုင်း တွက်ချက်သည်။
- R: 4f = (4 × 16) + (15 × 1) = 64 + 15 = 79
- G: 46 = (4 × 16) + (6 × 1) = 64 + 6 = 70
- B: e5 = (14 × 16) + (5 × 1) = 224 + 5 = 229
ထို့ကြောင့် #4f46e5 သည် RGB(79, 70, 229) နှင့် ညီမျှသည်။
ဂဏန်း ၃ လုံးပါ အတိုကောက် HEX ကုဒ်များ
ဂဏန်း ၆ လုံးအပြင် ဂဏန်း ၃ လုံးပါ အတိုကောက် (ဥပမာ #abc) ကိုလည်းလက်ခံသည်။ ဤပုံစံတွင် ဂဏန်းတစ်လုံးစီသည် ချန်နယ်တစ်ခုစီကို ကိုယ်စားပြုပြီး ၎င်းတို့ကို နှစ်ဆတိုးခြင်းဖြင့် ဂဏန်း ၆ လုံးအဖြစ် အလိုအလျောက်ချဲ့သည်။
#abc→#aabbcc#F39→#FF3399
ဥပမာ:
#abc(သို့မဟုတ်#aabbcc) သည် RGB(170, 187, 204) နှင့် ညီမျှသည်။#F39(သို့မဟုတ်#FF3399) သည် RGB(255, 51, 153) နှင့် ညီမျှသည်။
ထည့်သွင်းမှုနှင့် ရလဒ်များ
ထည့်သွင်းမှု (Input): မှန်ကန်သော HEX အရောင်ကုဒ်တစ်ခု။ ဥပမာ #4f46e5, abc, #1E90FF, သို့မဟုတ် #abc။ # သင်္ကေတမပါဘဲလည်း ထည့်သွင်းနိုင်သည်။ သင်သည် တန်ဖိုးကို တိုက်ရိုက်ရိုက်နိုင်သည် သို့မဟုတ် ပါဝင်သော အရောင်ရွေးချယ်ကိရိယာ (color picker) ကို အသုံးပြုနိုင်သည်။
ရလဒ် (Output): RGB ညီမျှမှု၊ 0 မှ 255 ကြားရှိ ဂဏန်းသုံးလုံးအဖြစ် ပြသသည်။ ဥပမာ #4f46e5 အတွက် 79, 70, 229။ တူးလ်သည် တစ်ချိန်တည်းတွင် အခြားအရောင်အကွက်များ (HSL, HSV, CMYK, LAB) ကိုလည်း အပ်ဒိတ်လုပ်ပေးသည်။
အရေးကြီးသော စည်းမျဉ်းများနှင့် ခြွင်းချက်များ
- မည်သည့်အကွက်ကိုမဆို တည်းဖြတ်ခြင်းသည် အခြားအရောင်အကွက်အားလုံးကို ချက်ချင်းအပ်ဒိတ်လုပ်သည်။
- မမှန်ကန်သော HEX တန်ဖိုးတစ်ခုကို ထည့်သွင်းပါက တူးလ်သည် အောက်ပါအမှားအမှတ်ကို ပြသသည်-
"Enter a hex color like #4f46e5 or #abc." - ဤစာမျက်နှာသည် alpha ချန်နယ်ပါသော ဂဏန်း ၈ လုံးပါ HEX ကုဒ်များ (ဥပမာ
#4f46e580) ကို မကိုင်တွယ်ပါ။ ဤတူးလ်သည် ဂဏန်း ၆ လုံး သို့မဟုတ် ၃ လုံးပါ HEX ကိုသာ လက်ခံသည်။ - RGB ရလဒ်တန်ဖိုးများသည် အတိအကျဖြစ်သော ကိန်းပြည့်များဖြစ်သည်။ base-16 မှ base-10 သို့ ပြောင်းလဲခြင်းသည် သေချာမှုရှိသောကြောင့် အဝိုင်းလိုက်ခြင်း မပြုလုပ်ပါ။
- အရောင်ပြောင်းလဲခြင်းအားလုံးကို သင်၏ browser တွင် တိုက်ရိုက်လုပ်ဆောင်သည်။ သင်ထည့်သွင်းသမျှကို မည်သည့်နေရာသို့မျှ အပ်လုဒ်တင်ခြင်း သို့မဟုတ် သိမ်းဆည်းခြင်း မပြုလုပ်ပါ။
HEX နှင့် RGB အကြား ဆက်စပ်မှု
HEX ကုဒ်သည် RGB တန်ဖိုးများ၏ အတိအကျ တူညီသော ကိုယ်စားပြုမှုတစ်ခုဖြစ်သည်။ ဤတွင် အသုံးများသော အရောင်အချို့၏ နှိုင်းယှဉ်ဇယားကို ဖော်ပြထားသည်။
| အရောင် | HEX | RGB |
|---|---|---|
| အနက်ရောင် | #000000 |
(0, 0, 0) |
| အဖြူရောင် | #FFFFFF |
(255, 255, 255) |
| အနီရောင် | #FF0000 |
(255, 0, 0) |
| အစိမ်းရောင် | #00FF00 |
(0, 255, 0) |
| အပြာရောင် | #0000FF |
(0, 0, 255) |
| မီးခိုးရောင် ၅၀% | #808080 |
(128, 128, 128) |
CSS တွင် color: #ff6600 နှင့် color: rgb(255, 102, 0) နှစ်ခုလုံးကို browser က တူညီစွာအဓိပ္ပာယ်ကောက်သည်။ developer များသည် ၎င်းတို့၏ လိုအပ်ချက်ပေါ်မူတည်၍ မည်သည့်ပုံစံကိုမဆို ရွေးချယ်နိုင်သည်။
ဤတူးလ်ကို မည်သူများ လိုအပ်သနည်း
- Front-end developer များ: CSS HEX ကုဒ်များကို JavaScript, canvas, သို့မဟုတ် ကိန်းဂဏန်းချန်နယ်များလိုအပ်သော inline styles များအတွက် RGB တန်ဖိုးများအဖြစ် ပြောင်းလဲရန် လိုအပ်သူများ။
- ဒီဇိုင်နာများ: branding guidelines မှ HEX အရောင်သတ်မှတ်ချက်များကို RGB slider များ သို့မဟုတ် ကိန်းဂဏန်းတန်ဖိုးများကို နှစ်သက်သော ဒီဇိုင်းတူးလ်များတွင် ထည့်သွင်းရန် လိုအပ်သူများ။
- ဂရပ်ဖစ်အနုပညာရှင်များနှင့် ဂိမ်းထုတ်လုပ်သူများ: အရောင်ကို သင်္ချာနည်းအရ ခြယ်လှယ်လိုသော သို့မဟုတ် 0-255 တန်ဖိုးများ၏ တိကျမှုလိုအပ်သူများ။
- ကျောင်းသားများနှင့် သင်ယူသူများ: Hexadecimal အရောင်ကုဒ်များ မည်သို့အလုပ်လုပ်သည်ကို နားလည်လိုသူများ။
အမေးများသော မေးခွန်းများ (FAQ)
မေး: RGB တန်ဖိုးများသည် အဘယ်ကြောင့် 0 မှ 255 အထိသာရှိသနည်း။ ဤသည်မှာ 8-bit ကိုယ်စားပြုမှုကြောင့်ဖြစ်သည်။ ချန်နယ်တစ်ခုစီအတွက် ဖြစ်နိုင်ခြေရှိသော တန်ဖိုး 256 ခု (2^8) ရှိသည်။ 0 သည် ပြင်းထန်မှုအနည်းဆုံးဖြစ်ပြီး 255 သည် အများဆုံးဖြစ်သည်။
မေး: HEX ကုဒ်တွင် # သင်္ကေတ မပါပါက မည်သို့ဖြစ်မည်နည်း။
တူးလ်သည် # သင်္ကေတမပါသော HEX ကုဒ်များကို လက်ခံသည်။ ဥပမာ 4f46e5 ကို #4f46e5 ကဲ့သို့ပင် အလုပ်လုပ်သည်။
မေး: ဂဏန်း ၃ လုံးပါ HEX ကုဒ် (#abc) ကို မည်သို့တွက်ချက်သနည်း။
ဂဏန်းတစ်လုံးစီကို နှစ်ဆတိုးပြီး ဂဏန်း ၆ လုံးအဖြစ် ချဲ့သည်။ ဥပမာ #abc သည် #aabbcc ဖြစ်လာသည်။ ထို့နောက် ပုံမှန်ဂဏန်း ၆ လုံးပါ HEX ကုဒ်ကဲ့သို့ပင် တွက်ချက်သည်။
မေး: ငါထည့်လိုက်တဲ့ HEX ကုဒ်က အလုပ်မလုပ်ဘူးဆိုရင် ဘယ်လိုလုပ်ရမလဲ။
သင်ထည့်သွင်းသော HEX ကုဒ်သည် မှန်ကန်သော ပုံစံဖြစ်ကြောင်း သေချာပါစေ။ ၎င်းသည် # မပါဘဲ သို့မဟုတ် ပါ၍ ဂဏန်း ၃ လုံး သို့မဟုတ် ၆ လုံးဖြစ်ရမည်။ မှားယွင်းသော ပုံစံရှိပါက "Enter a hex color like #4f46e5 or #abc." ဟူသော အမှားအမှတ် ပေါ်လာမည်။
မေး: ဒီတူးလ်ကို အော့ဖ်လိုင်းမှာ သုံးလို့ရလား။ ဟုတ်ကဲ့၊ အရောင်ပြောင်းလဲခြင်းအားလုံးကို သင့် browser တွင် client-side မှ လုပ်ဆောင်သောကြောင့် အင်တာနက်ချိတ်ဆက်မှုမလိုအပ်ပါ။