အခမဲ့ အရောင် ရွေးချယ်မှုနှင့် Palette ဂျင်နရေတာ

မည်သို့ အလုပ်လုပ်သည်

ကိုယ်တိုင်ရေးထားသော conversion ဂဏန်းသင်္ချာကို သုံး၍ သင့် browser ထဲတွင် အားလုံးကို တိုက်ရိုက် လုပ်ဆောင်ပါသည် — color library၊ server round-trip မပါဝင်ပါ။ Browser ၏ native color input သို့မဟုတ် EyeDropper API ကို သုံး၍ အရောင်တစ်ခု ရွေးချယ်ပါက ကိရိယာသည် ၎င်းကို format ခြောက်မျိုးအဖြစ် ချက်ချင်း ပြောင်းလဲပြီး WCAG contrast ratio များကိုလည်း တွက်ချက်ကာ harmony palette များကို ဖန်တီးပေးသည်။

1. 1
   Native API မှတစ်ဆင့် အရောင် input

   Browser ၏ built-in <input type="color"> widget မှတစ်ဆင့် (သို့) Chromium-based browser များတွင် EyeDropper API မှတစ်ဆင့် သင့်ဖန်သားပြင်ရှိ pixel မည်သည်ကိုမဆို sample ယူ၍ အရောင်ကို ရွေးချယ်နိုင်သည်။ လမ်းကြောင်းနှစ်မျိုးစလုံးသည် hex string တစ်ခု ပြန်ပေးသည်၊ ၎င်းသည် single source of truth ဖြစ်လာသည်။
2. 2
   ကိုယ်တိုင်ရေးထားသော format ပြောင်းလဲမှုများ

   ကိရိယာသည် hex တန်ဖိုးကို RGB၊ HSL၊ HSV၊ CMYK နှင့် OKLCH သို့ ၎င်း၏ ကိုယ်ပိုင် ဂဏန်းသင်္ချာ function များ (ပြင်ပ library မပါဘဲ) ကို သုံး၍ ပြောင်းလဲသည်။ OKLCH ပြောင်းလဲမှုသည် sRGB channel များကို linearize လုပ်ပြီး OKLab cube-root matrix ကို အသုံးချကာ chroma နှင့် hue angle ကို ဆင်းသက်သည် — ခေတ်မီ CSS Color Level 4 output နှင့် ကိုက်ညီသည်။
3. 3
   WCAG contrast ratio တွက်ချက်မှု

   Relative luminance ကို linearize လုပ်ထားသော RGB channel များမှ WCAG 2.x ဖော်မြူလာကို သုံး၍ တွက်ချက်သည်။ ကိရိယာသည် ထို့နောက် ဖြူစင်နှင့် အမည်းရောင်နှင့် contrast ratio ကို တွက်ချက်ပြီး WCAG threshold (3:1, 4.5:1, 7:1) အလိုက် AA-large၊ AA၊ AAA သို့မဟုတ် Fail ဟု label တပ်သည်။
4. 4
   Harmony palette ဖန်တီးခြင်းနှင့် local သိမ်းဆည်းခြင်း

   Complementary၊ triadic၊ analogous နှင့် monochromatic swatch များကို HSL hue နှင့် lightness တန်ဖိုးများကို ဂဏန်းသင်္ချာအရ လှည့်ခြင်း သို့မဟုတ် အဆင့်ဆင့်ပြောင်းခြင်းဖြင့် ဆင်းသက်ထားသည်။ သိမ်းထားသော palette များကို သင့် browser ရှိ localStorage သို့ ရေးထားသည် — သင့်စက်ကို ဘယ်တော့မှ ဘာမှ မထွက်ပါ။

ဆက်နွှယ်သော ကိရိယာများ