hex-color-from-image ဆိုတာဘာလဲ၊ ဘာကြောင့် HEX ကိုအဓိကထုတ်ပေးတာလဲ
ဤစာမျက်နှာက သင်ရွေးချယ်လိုက်တဲ့ ရုပ်ပုံတစ်ပုံထဲမှ pixel တစ်ခုချင်းစီရဲ့ အရောင်ကို HEX ကုဒ် (ဥပမာ #1E90FF) အဖြစ် ဦးစွာပြသပေးတယ်။ တခြား sibling စာမျက်နှာတွေက RGB (functional notation) ဒါမှမဟုတ် HSL ကို အဓိကထားပေမယ့် ဒီစာမျက်နှာကတော့ ဝဘ်ဒီဇိုင်းမှာ အသုံးအများဆုံး ခြောက်လုံး (ဒါမှမဟုတ် သုံးလုံးအတိုကောက်) ဖြစ်တဲ့ hexadecimal ကို ဦးစားပေးတယ်။ HEX က alpha channel ကို သယ်ဆောင်မလာဘူး – ပွင့်လင်းမြင်သာမှုကို သီးခြား ရာခိုင်နှုန်းအဖြစ် “Alpha ‹n›% – this pixel is partly transparent.” ဆိုတဲ့ စာသားနဲ့ ပြသမယ်။ ဒါကြောင့် CSS ထဲက color၊ background-color တို့လို property တွေမှာ ထည့်သုံးဖို့ တန်ဖိုးတစ်ခုကို လိုအပ်တဲ့အခါ ဒီစာမျက်နှာက အကောင်းဆုံး ရွေးချယ်မှုဖြစ်တယ် – ထပ်ဆောင်း parenthesis ဒါမှမဟုတ် syntax မလိုဘူး။
မောက်စ်နဲ့ ကီးဘုတ်နဲ့ pixel ကိုရွေးချယ်နည်း
ရုပ်ပုံတစ်ပုံကို တင်လိုက်တာနဲ့ ပုံရဲ့ဗဟိုဆုံမှတ် (center pixel) ရဲ့ အရောင်တန်ဖိုးတွေကို ချက်ချင်းမြင်ရမယ်။ ပြီးရင် ပုံပေါ်မှာ မောက်စ်ကိုရွှေ့ရင် pixel-by-pixel အရောင်ကို ဖတ်ပြတယ်။ တိတိကျကျ ရွေးချယ်ဖို့ magnified view က ကူညီပေးတယ်။ ကလစ်တစ်ချက်နှိပ်ရင် အဲဒီအရောင်ကို သင့် picks စာရင်းထဲ သိမ်းဆည်းပေးတယ် (အများဆုံး ၁၂ ခုအထိ)။ ကီးဘုတ်နဲ့လည်း သုံးလို့ရတယ် – မြှားခလုတ်တွေနဲ့ crosshair ကိုရွှေ့နိုင်တယ်။ Shift ကိုဖိပြီး မြှားခလုတ်သုံးရင် 10 pixel ခြားပြီး ခုန်သွားမယ်။ Enter ဒါမှမဟုတ် Space နဲ့ အရောင်ကို သိမ်းနိုင်တယ်။
ရုပ်ပုံဖိုင်တွေနဲ့ နယ်ပယ်အကန့်အသတ်များ
ဒီတူးလ်က ဒီဖိုင်ဖော်မတ်တွေကိုပဲ လက်ခံတယ် – PNG, JPG, WebP, GIF, AVIF, HEIC။ MIME အမျိုးအစားအရ image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif တွေပဲ။ မပံ့ပိုးတဲ့ဖိုင်ကို ပစ်ချရင် “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” ဆိုတဲ့ စာမြင်ရမယ်။ ဖိုင်က ပျက်စီးနေရင် “That image could not be opened. It may be corrupted or in an unsupported format.” လို့ ပြတယ်။ ရုပ်ပုံရဲ့ အရှည်ဆုံးဘက်က pixel 4096 ထက်ကျော်နေရင် အလိုအလျောက် ချုံ့ပြီး တွက်ချက်တယ်။
အရောင်တန်ဖိုးတွေနဲ့ alpha (ပွင့်လင်းမြင်သာမှု) ကို ဘယ်လိုဖတ်မလဲ
သင်ရွေးချယ်လိုက်တဲ့ pixel ရဲ့ အောက်ပါတန်ဖိုးတွေကို တစ်ပြိုင်နက်ပြသမယ် –
- HEX –
#နဲ့ စတဲ့ ခြောက်လုံးတန် hexadecimal ကုဒ် - RGB – အနီ၊ အစိမ်း၊ အပြာ တန်ဖိုးတွေ (တစ်ခုချင်းစီ 0–255)
- HSL – Hue (0–360°), Saturation (0–100%), Lightness (0–100%)
- Alpha – pixel က တစ်စိတ်တစ်ပိုင်း ပွင့်လင်းနေရင် “Alpha ‹n›% — this pixel is partly transparent.” ဆိုတဲ့ စာသားကို အောက်မှာ ထည့်ပြမယ်
သတိထားရမှာက – ဤတူးလ်က ရုပ်ပုံထဲမှာရှိတဲ့ တကယ့် pixel တန်ဖိုးကိုပဲ ဖတ်တယ်။ JPEG ဒါမှမဟုတ် screenshot ဆိုရင် compression နဲ့ anti-aliasing တွေကြောင့် pixel တန်ဖိုးတွေ ပြောင်းလဲနိုင်တယ်။ ပွင့်လင်းနေတဲ့ pixel ရဲ့တန်ဖိုးကို သီးခြားဖတ်တာဖြစ်ပြီး နောက်ခံအရောင်နဲ့ ရောစပ်မပေးဘူး။
သိမ်းဆည်းထားတဲ့ အရောင်တွေကို ဘယ်လိုပြန်သုံးမလဲ
ကလစ်နှိပ်လိုက်တဲ့အခါ အရောင်က picks စာရင်းထဲ ရောက်သွားမယ်။ ပြီးရင် “Saved ‹hex› to your picks.” ဆိုတဲ့ စာသား ပေါ်လာမယ်။ သိမ်းထားတဲ့ အရောင်တွေကို swatch တစ်ခုချင်းစီအဖြစ် ပြမယ်။ အဲဒီ swatch ကိုနှိပ်ရင် ပြန်လည်ဖတ်ပြီး တန်ဖိုးတွေကို ပြန်မြင်ရမယ်။ RGB တန်ဖိုးတူပေမယ့် alpha ကွဲရင် သီးခြား entry အဖြစ် သိမ်းမယ်။ အများဆုံး 12 ခုအထိပဲ သိမ်းလို့ရတယ် – ပြည့်သွားရင် အဟောင်းတွေကို ဖျက်ပစ်မယ်။
အရောင်တန်ဖိုးတွေကို clipboard ပေါ်ကူးယူနည်း
HEX, RGB, ဒါမှမဟုတ် HSL တန်ဖိုးတွေထဲက ဘယ်ဟာကိုမဆို နှိပ်ရင် clipboard ပေါ်ကို ကူးယူပေးတယ်။ ဒါပေမယ့် browser က clipboard access ကို ပိတ်ထားရင် “Could not copy — your browser blocked clipboard access.” ဆိုတဲ့ စာသား ပေါ်မယ်။ “Start over” ခလုတ်ကို နှိပ်ရင် ရုပ်ပုံကိုရှင်းပြီး သိမ်းထားတဲ့ အရောင်အားလုံးကို ဖျက်ပြီး အစအဆုံး ပြန်စမယ်။
FAQ
မေး – ဘာကြောင့် HEX ကို အဓိကထုတ်ပေးတာလဲ။
ဖြေ – HEX က CSS မှာ အသုံးအများဆုံးဖြစ်ပြီး color: #1E90FF လို တိုက်ရိုက်ရေးလို့ရတယ်။ RGB လို rgb(30, 144, 255) ရေးဖို့ မလိုဘူး။
မေး – ပွင့်လင်းတဲ့ pixel ကို HEX နဲ့ဖော်ပြလို့ရလား။
ဖြေ – မရဘူး။ ခြောက်လုံးတန် HEX မှာ alpha channel မပါဘူး။ ဒါကြောင့် alpha ကို ရာခိုင်နှုန်းနဲ့ သီးခြားပြတယ်။
မေး – ရုပ်ပုံအကြီးကြီးကို တင်လို့ရလား။
ဖြေ – 4096 pixel အထက်ကို အလိုအလျောက် ချုံ့ပေးတယ်။ ဒါပေမယ့် ချုံ့ပြီးသား pixel တန်ဖိုးတွေက compression သက်ရောက်နိုင်တယ်။
မေး – သိမ်းထားတဲ့ အရောင်တွေကို ဘယ်လိုဖျက်မလဲ။
ဖြေ – “Start over” ခလုတ်က အကုန်ရှင်းမယ်။ ဒါမှမဟုတ် သိမ်းထားတဲ့ swatch ကိုနှိပ်ပြီး အရောင်ကို ပြန်လည်သုံးနိုင်တယ်။
မေး – JPEG နဲ့ screenshot က pixel တွေ ဘာကြောင့် ကွဲပြားနေရတာလဲ။
ဖြေ – JPEG compression နဲ့ anti-aliasing က အနီးဆုံး pixel တွေရဲ့တန်ဖိုးကို ပြောင်းလဲစေတယ်။ ဒါကြောင့် သင်ရွေးတဲ့ pixel အတိအကျက အရေးကြီးတယ်။
မေး – ကီးဘုတ်နဲ့ သုံးလို့ရလား။
ဖြေ – ရတယ်။ မြှားခလုတ်တွေနဲ့ crosshair ကိုရွှေ့၊ Shift+မြှားနဲ့ 10 pixel ခုန်၊ Enter/Space နဲ့ သိမ်းနိုင်တယ်။