CColorWell
ColorWell ကို ရယူပါ
Palette + Accessibility ကိရိယာအစု

လှပသော Palette များ။ အတည်ပြုပြီးသား Contrast။ တစ်ခုတည်းသော Workflow။

Brand Color ကို ထည့်သွင်းပါ။ Harmonized Palette, WCAG အဖြေအားလုံးနှင့် CSS, Tailwind, Figma အတွက် Export များကို ရရှိနိုင်သည်။ စာမျက်နှာမှ မထွက်ခွာဘဲ။

$5/mo မှ စတင်သော အစီအစဉ်များ — အချိန်မရွေး ဖျက်သိမ်းနိုင်သည်

တိုက်ရိုက် — ဤနေရာတွင် အလုပ်လုပ်သည်

Palette ထုတ်လုပ်ရန်

ဘရန်းဒ်အရောင်တစ်ခု ရွေးချယ်ပါ။ ColorWell က ကျန်ရှိသည်များကို တည်ဆောက်ပေးမည်။

တူညီသော အရောင်စဉ်

အရောင်အဆင်းများ (ပေါ့ → လေး)

ထုတ်ယူရန်

Design tokens များကို ဒေါင်းလုဒ်ဆွဲရန်

Pro

Palette အပြည့်အစုံနှင့် shade ramp များကို အသုံးပြုရလွယ်ကူသော ဖိုင်များအဖြစ် သိမ်းဆည်းပါ။

ဖိုင်များ ဒေါင်းလုဒ်ဆွဲရန် Pro သို့ Upgrade လုပ်ပါ

Contrast စစ်ဆေးရန်

Palette မှ အရောင်နှစ်ခုကို ရွေးချယ်ပါ။ ColorWell က WCAG အဖြေကို ပြသပေးပါမည်။

Aa
The quick brown fox jumps over the lazy dog.
2.77
အချိုး

အဖြေ: WCAG မပျက်မကွက်ဖြစ်ရန် မလိုက်နာပါ

Brand Palette တစ်ခုအတွက် လိုအပ်သမျှ

နေ့စဉ် Interface များ ထုတ်လုပ်နေသော ဒီဇိုင်းနာများနှင့် Front-end အဖွဲ့များအတွက် တည်ဆောက်ထားသည်။

ညီညွတ်သော အရောင်စုံများ

မည်သည့် Hex Color ကိုမဆို ရွေးချယ်ပါ။ ColorWell သည် Analogous, Complementary, Triadic နှင့် Monochromatic Scheme များကို တစ်ချက်တည်းဖြင့် ထုတ်ပေးသည်။

WCAG Contrast — ချက်ချင်း

သင့် Palette ရှိ Color Pair အားလုံးအတွက် Text, Large Text နှင့် UI Components များအပေါ် AA/AAA အဖြေများ ရရှိနိုင်သည်။

CSS, Tailwind, Figma ထုတ်ယူမှုများ

CSS Variables, Tailwind Config, Raw JSON Tokens သို့မဟုတ် Paste လုပ်ရန် အဆင်သင့်ဖြစ်နေသော Figma Styles များသို့ တစ်ချက်တည်းဖြင့် Export လုပ်နိုင်သည်။

အမှတ်တံဆိပ်နှင့် ကိုက်ညီသော ပုံစံများ

Hue မလွှဲဘဲ Lighten, Darken နှင့် Saturate လုပ်နိုင်သည်။ ColorWell သည် Perceptual Color Space (Oklch) အတွင်းတွင်သာ ရှိနေသည်။

အမည်ပေးထားသော Token များ

"indigo-500" သို့မဟုတ် "slate-700" ကဲ့သို့သော အလိုအလျောက် အမည်ပေးခြင်းများသည် သင့် Stylesheet ကို Hex Codes များထက် လူများအတွက် ဖတ်ရှုရလွယ်ကူစေသည်။

Palette များကို သိမ်းဆည်းပြီး Sync လုပ်ခြင်း

သင်တည်ဆောက်ထားသော Palette အားလုံးကို သင်ပိုင်ဆိုင်နိုင်သည် — အမည်ပေးပါ၊ Tag ထည့်ပါ၊ နောက်မှ ပြန်လာပါ။ Pro အတွက် Cloud Sync။

အဆင့်သုံးဆင့်

Brand Color တစ်ခုတည်းမှ စတင်ပါ။ အလုပ်လုပ်နိုင်သော Stylesheet ဖြင့် အဆုံးသတ်ပါ။

1

ရွေးချယ်ပါ

Hex Value ထည့်သွင်းပါ သို့မဟုတ် Color Picker ကို အသုံးပြုပါ။

2

ထုတ်လုပ်ရန်

ColorWell သည် Harmonized Palettes များကို တည်ဆောက်ပြီး Contrast Check အားလုံးကို ဆောင်ရွက်ပေးသည်။

3

ထုတ်ယူရန်

CSS, Tailwind သို့မဟုတ် Figma Tokens များကို သင့် Codebase သို့ တိုက်ရိုက် Copy လုပ်ပါ။

ရိုးရှင်းသော ဈေးနှုန်းများ

Plan တစ်ခုကို ရွေးချယ်ပြီး Hex Codes များနှင့် တိုက်ခိုက်မှုကို ရပ်တန့်ပါ။

စတင်သူ

တစ်ဦးတည်းအလုပ်လုပ်သော ဒီဇိုင်နာများအတွက်

$5/လ
  • လစဉ် သိမ်းဆည်းထားသော ပလက်ဖောင်း ၁၀၀ ခု
  • ကန့်သတ်ချက်မရှိသော ကွန်ထရပ်စ် စစ်ဆေးမှုများ
  • CSS / Tailwind / JSON ထုတ်ယူခြင်း
  • ဘရန်းဒ်နှင့် လိုက်ဖက်သော ပုံစံကွဲများ
လူကြိုက်အများဆုံး
Pro

ဘရန်းဒ်အဖွဲ့များအတွက်

$15/လ
  • လစဉ် သိမ်းဆည်းထားသော ပလက်ဖောင်း ၂၀၀၀ ခု
  • Figma token ထုတ်ယူခြင်း
  • ဘရန်းဒ်ကစ် (ပလက်ဖောင်းအများအပြားပါသော ပရောဂျက်များ)
  • Cloud-sync လုပ်ထားသော လိုက်ဘရယ်များ
  • ဦးစားပေး ထောက်ပံ့မှု

မကြာခဏမေးလေ့ရှိသော မေးခွန်းများ

ဘာမှ install လုပ်ရမလား?

မလိုအပ်ပါ။ ColorWell သည် browser တွင်သာ လည်ပတ်သည်။ သင် sync လုပ်မည်ဟု ဆုံးဖြတ်သည်အထိ သင့်အရောင်များသည် ကွန်ပျူတာထဲမှ ထွက်မသွားပါ။

မည်သည့် color space ကို အသုံးပြုသနည်း?

ColorWell သည် အောက်ခြေတွင် Oklch ကို အသုံးပြုသည်။ ပုံစံကွဲများသည် perceptual color space အတွင်းတွင်သာ ရှိနေသဖြင့် ဘရန်းဒ်အရောင်ကို ပေါ့ပါးစေသည့်အခါ hue မပြောင်းလဲပါ။

Export များသည် မည်သို့ လည်ပတ်သနည်း?

CSS variables, Tailwind config blocks, raw JSON သို့မဟုတ် Figma-ready styles များအတွက် တစ်ချက်နှိပ်ရုံဖြင့် clipboard သို့ ကူးယူနိုင်သည်။ ၎င်းတို့ကို သင့်ကုဒ် သို့မဟုတ် ဒီဇိုင်းတစ်ခုခုထဲသို့ တိုက်ရိုက် ပေါင်းထည့်နိုင်သည်။

အခမဲ့ စမ်းသပ်အသုံးပြုခွင့် ရရှိနိုင်ပါသလား?

မဟုတ်ပါ။ ဤသည်မှာ ပေးချေရသော tool ဖြစ်ပြီး လစဉ် $5 မှ စတင်သည်။ Starter သည် $5/mo ဖြစ်ပြီး Pro သည် $15/mo ဖြစ်သည်။ အချိန်မရွေး ဖျက်သိမ်းနိုင်သည်။

မည်သို့ ဖျက်သိမ်းမည်နည်း?

Account စာမျက်နှာမှ သို့မဟုတ် ကျွန်ုပ်တို့ထံ email ပို့ခြင်းဖြင့် ဖျက်သိမ်းနိုင်သည်။ ဖျက်သိမ်းခြင်းသည် နောက်ထပ် renewal ကို ရပ်တန့်စေသည်။ ကျန်ရှိသော အချိန်သည် ဆက်လက်အသုံးပြုနိုင်သည်။

Hex codes များကို လက်ဖြင့် ညှိနှိုင်းနေရသည်ကို ရပ်တန့်ပါ။

Palette ကို ထုတ်လုပ်ပြီး stylesheet ကို ပို့ဆောင်ပါ။ အားလုံးကို တစ်နေရာတည်းတွင်။

စီမံချက်များကို ကြည့်ရှုရန်