ImageColorPicker.com

HSL မှ HEX သို့ ပြောင်းတဲ

HSL အရောင်ကို HEX သို့ ခဏပြောင်းပေးမယ် — အခမဲ့နဲ့ ချက်ချင်း

#3398DB

မည်သည့် အရောင်တန်ဖိုးကိုမဆို ကူးထည့်ပါ။ ဖော်မတ်ကို ကျနော်တို့က သင့်အတွက် ခွဲခြားသိရှိပေးပါတယ်။

H
S
L
HEX ရလဒ်

ဒီအရောင်အားလုံးသော ဖော်မတ်များဖြင့်

CMYK ပရိုဖိုင်: Coated FOGRA39 (ဥရောပအတွက် Photoshop ၏ မူရင်း)

HSL နဲ့ ရောင်ရွေးရတာ ခံစားရဖို့ စိတ်ချမ်းသာပေမယ့် stylesheets, design handoffs, brand document တွေကတော့ အများအားဖြင့် HEX နဲ့ သက်ဆိုင်နေတယ်။ ဒီ converter က အကန့်အသတ်ကို ဖျက်ပြီး မည်သည့် hue, saturation, lightness စုံတွဲမဆို လေးလံတဲ့ ငါးလုံးကိန်း HEX ကို ပေးမှာပါ။

HSL မှ HEX ပြောင်းခြင်း လုပ်ပုံလုပ်နည်း

  1. saturation နဲ့ lightness ကို ယူပြီး စာရင်းထားအဖြစ် ပြောင်းပါ — 60% က 0.6 ဖြစ်ပါတယ်။
  2. chroma C = (1 − |2L − 1|) × S ကို တွက်ပါ။ ဒါက အရောင်သည် မီးခိုးရောင် (grey) နှင့် ဘယ်လောက် ဝေးနေသည်ကို ပြပါတယ်။
  3. hue ကို အသုံးပြုပြီး chroma ကို red, green, blue ချန်နယ်များပေါ်တွင် တည်နေရာချပေးပါ၊ ပြီးနောက် တစ်ခုပြီးတိုင်းကို L − C/2 နဲ့ ညှိလှိမ့်ပါ။
  4. ချန်နယ်တိုင်းကို 255 နဲ့ မြှောက်ပြီး စုံလုံး(round) လုပ်ကာ အပိုင်းနှစ်လုံးဖြင့် hexadecimal အဖြစ်ရေးပါ။

အလုပ်ဖြစ်သည့် နမူနာ

HSL hsl(204, 70%, 53%)=HEX #3398DB

တစုံတစ်ခုကို round လုပ်တာကနောက်ဆုံး အဆင့်မှာပဲ ဖြစ်တယ်၊ ချန်နယ်တိုင်းကို 0–255 တည့်တည့်တဲ့ တန်ဖိုးတစ်ခုသို့ ပိတောက်လိုက်ချိန်။ ရလဒ်က သင့် HSL input အနီးဆုံး HEX ကို ပေးမယ်၊ ပုံမှန်အားဖြင့် design tool တွေပြတာနဲ့ လုံးဝတူတယ်။

HSL နဲ့ HEX ကို ရှင်းပြချက်

HSL ဆိုတာ ဘာလဲ?

HSL က အရောင်ကို hue (colour wheel ပေါ်မှာ 0–360°), saturation (ဘယ်လောက်ရောင်ရှိသလဲ၊ 0–100%) နှင့် lightness (ဘယ်လောက်တောက်ပသလဲ၊ 0–100%) သုံးပုဒ်ခွဲထားပါတယ်။ လူတွေ အရောင်ကို ဖေါ်ပြတဲ့ နည်းလမ်းနဲ့ ကိုက်ညီတာမို့ HSL က လက်နှင့် ကိုဒ်နဲ့ tint, shade, တူညီတဲ့ palettes တည်ဆောက်ဖို့ အရမ်းလွယ်ကူပါတယ်။

စာတမ်းဖွဲ့စည်းပုံ:
hsl(H, S%, L%)
အကွာအဝေး:
0–360°, 0–100%, 0–100%
အကောင်းဆုံး အသုံးပြုရန်:
palettes, tints and shades, theming

HEX ဆိုတာ ဘာလဲ?

HEX ကုဒ်သည် # ရှေ့ရှိ ဂဏန်းခြောက်လုံးပါ hexadecimal နံပါတ်ဖြစ်ပြီး အရောင်၏ red၊ green နှင့် blue ချန်နယ်များကို သိမ်းဆည်းထားပါတယ်။ ဂဏန်းတစ်စုံစီက ချန်နယ်တစ်ခုစီကို ဖော်ပြပြီး 00 (မရှိ) မှ FF (အပြည့်) အထိ ဖြစ်ပါတယ်။ ဒါက RGB နဲ့ တူညီတဲ့ 16.7 million အရောင်တွေကို ပိုတိုတဲ့ notation ဖြင့် ဖော်ပြနိုင်ပါတယ်။ HEX သည် CSS၊ design tools နှင့် brand guidelines တွင် ပုံမှန် အသုံးပြုပါတယ်။

စာတမ်းဖွဲ့စည်းပုံ:
#RRGGBB
အကွာအဝေး:
တစ်ချန်နယ်လျှင် 00–FF
အကောင်းဆုံး အသုံးပြုရန်:
CSS, design handoff, brand guidelines

HSL မှ HEX ကို ရှင်းလင်း ဇယား

အများဆုံး အသုံးပြုတဲ့ CSS အရောင်များကို HSL မှ HEX သို့ ပြောင်းထားသည်။

အရောင်HSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

အခြား အရောင်ပြောင်းကိရိယာများ

HEX မှ RGB သို့RGB မှ HEX သို့HEX မှ HSL သို့HEX မှ CMYK သို့CMYK မှ HEX သို့RGB မှ HSL သို့HSL မှ RGB သို့RGB မှ CMYK သို့CMYK မှ RGB သို့HSL မှ CMYK သို့CMYK မှ HSL သို့

ဒီအရောင်နဲ့ ဆက်လက် အလုပ်လုပ်မယ်

ဆက်မေးမြန်းများဖြေကြားချက်

saturation နဲ့ lightness ကို ယူပြီး စာရင်းထားအဖြစ် ပြောင်းပါ — 60% က 0.6 ဖြစ်ပါတယ်။ chroma C = (1 − |2L − 1|) × S ကို တွက်ပါ။ ဒါက အရောင်သည် မီးခိုးရောင် (grey) နှင့် ဘယ်လောက် ဝေးနေသည်ကို ပြပါတယ်။ hue ကို အသုံးပြုပြီး chroma ကို red, green, blue ချန်နယ်များပေါ်တွင် တည်နေရာချပေးပါ၊ ပြီးနောက် တစ်ခုပြီးတိုင်းကို L − C/2 နဲ့ ညှိလှိမ့်ပါ။ ချန်နယ်တိုင်းကို 255 နဲ့ မြှောက်ပြီး စုံလုံး(round) လုပ်ကာ အပိုင်းနှစ်လုံးဖြင့် hexadecimal အဖြစ်ရေးပါ။

တစုံတစ်ခုကို round လုပ်တာကနောက်ဆုံး အဆင့်မှာပဲ ဖြစ်တယ်၊ ချန်နယ်တိုင်းကို 0–255 တည့်တည့်တဲ့ တန်ဖိုးတစ်ခုသို့ ပိတောက်လိုက်ချိန်။ ရလဒ်က သင့် HSL input အနီးဆုံး HEX ကို ပေးမယ်၊ ပုံမှန်အားဖြင့် design tool တွေပြတာနဲ့ လုံးဝတူတယ်။

HEX ကုဒ်သည် # ရှေ့ရှိ ဂဏန်းခြောက်လုံးပါ hexadecimal နံပါတ်ဖြစ်ပြီး အရောင်၏ red၊ green နှင့် blue ချန်နယ်များကို သိမ်းဆည်းထားပါတယ်။ ဂဏန်းတစ်စုံစီက ချန်နယ်တစ်ခုစီကို ဖော်ပြပြီး 00 (မရှိ) မှ FF (အပြည့်) အထိ ဖြစ်ပါတယ်။ ဒါက RGB နဲ့ တူညီတဲ့ 16.7 million အရောင်တွေကို ပိုတိုတဲ့ notation ဖြင့် ဖော်ပြနိုင်ပါတယ်။ HEX သည် CSS၊ design tools နှင့် brand guidelines တွင် ပုံမှန် အသုံးပြုပါတယ်။

ရပါတယ်။ input အနားရှိ swap ခလုတ်က သင့်ကို HEX မှ HSL ကွန်ဗာတာကို ယာယီပြောင်းပေးမယ်၊ အလုပ်လုပ်ပုံက တူညီပဲ ဖြစ်ပါတယ်။ နှစ်ဖက်လုံးက အတူတူ ဖော်မြူလာကို အသုံးပြုပြီး ကိုယ့်ဘက်ပြန်လှန်အပ်သောပုံစံဖြစ်ပါတယ်။

palette ကို HSL မှာ တည်ဆောက်ပြီးနောက် HEX သို့ export တင်ပါ။ palette ရဲ့ နောက်ခံလောဂစ်ကို ထိန်းသိမ်းနိုင်ပြီး — hue တူတူ၊ lightness အဆင့်လိုက် — developer တွေအတွက် မျှော်လင့်ထားသည့် ပုံစံဖြစ်နေပါမယ်။