የHSL ወደ HEX መቀየሪያ

የHSL ቀለም ሞዴል መረዳት

HSL ማለት Hue (ቀለም ደረጃ)፣ Saturation (ቀለም ጥልቀት) እና Lightness (ብርሃንነት) ናቸው። ይህ የቀለም ሞዴል ሰዎች በተፈጥሮ ቀለሞችን በሚረዱበት መንገድ የተሰራ ነው። ለምሳሌ ሰማያዊ ቀለም ይዞ ብርሃኑን ብቻ ማስተካከል ይቻላል፤ ይህም የቀለሙን መሰረታዊ ማንነት ሳይለውጥ ነው።

በዚህ ገፅ ላይ ሶስት ግብአቶችን ያስገባሉ፦

• Hue (H)፦ ከ 0 እስከ 360 ድረስ ያለ ዲግሪ ቁጥር። 0 ወይም 360 ቀይ ነው፣ 120 አረንጓዴ፣ 240 ሰማያዊ።
• Saturation (S)፦ ከ 0% እስከ 100% ድረስ ያለ መቶኛ። 0% ግራጫ (ቀለም የለም)፣ 100% ሙሉ ቀለም።
• Lightness (L)፦ ከ 0% (ጥቁር) እስከ 100% (ነጭ) ድረስ። 50% መደበኛው ብርሃን ነው።

ለምሳሌ 243, 75%, 59% የሚለው ግቤት በገፁ ላይ እንደ #4f46e5 ወደ HEX ይቀየራል። በHSL ውስጥ Hue የሚለካው በዲግሪ ሲሆን ሳቹሬሽን እና ላይትነስ ደግሞ በመቶኛ ነው። እነዚህ እሴቶች ትክክለኛ ከሆኑ ብቻ ነው መለወጡ የሚሰራው።

ሄክሳዴሲማል (HEX) ኮድ ምንድነው?

HEX ኮድ የRGB ቀለሞችን በሄክሳዴሲማል (መሰረት 16) ቁጥሮች የሚወክል ዘዴ ነው። እያንዳንዱ ቀይ፣ አረንጓዴ እና ሰማያዊ ቻናል ከ 00 እስከ FF ድረስ ይደርሳል። ስድስት አሃዝ ያለው ቅርፅ እንደ #1E90FF የተለመደ ነው። ሶስት አሃዝ ያለው አጭር ቅርፅም አለ (ለምሳሌ #abc)፤ ይህ የሚሰራው እያንዳንዱ ቻናል በአንድ ሄክሳዴሲማል አሃዝ ሊወከል ሲችል ብቻ ነው (ማለትም እንደ #aabbcc ያለ ቅጥ)።

HEX ኮድ አልፋ ቻናል (ግልፅነት) አይይም በስድስት አሃዝ ቅርፁ። ስምንት አሃዝ ያለው ቅርፅ እንደ #1E90FF80 ያለው ግልፅነትን ያካትታል። ነገር ግን የእኛ ገፅ የሚያሳየው ስድስት ወይም ሶስት አሃዝ ብቻ ነው።

HEX ኮድ በሲኤስኤስ (CSS) እና በዲዛይን መሳሪያዎች ውስጥ በሰፊው ጥቅም ላይ ይውላል። ለምሳሌ color: #1E90FF; የሚለው መስመር ዶጀር ብሉ (Dodger Blue) ያሳያል። ስለዚህ ከHSL ወደ HEX መቀየር ዲዛይነሮች በHSL የሰሩትን ቀለሞች በቀጥታ ወደ ኮድ እንዲያስገቡ ያስችላቸዋል።

ከHSL ወደ HEX መቀየር እንዴት ይሰራል?

መለወጡ ሁለት ደረጃዎችን ያካትታል፦ በመጀመሪያ HSL ወደ RGB ይቀየራል፣ ከዚያም RGB ወደ HEX። ይህ ሂደት በ sRGB ጋሙት (gamut) ውስጥ ሙሉ በሙሉ ተመሳሳይ እና ኪሳራ የለውም። ማለትም በማንኛውም ሌላ የቀለም ሞዴል እንደ LAB ወይም CMYK ሲቀየር ቀለሞች ከሚለወጡበት ወሰን ውጭ ሊሆኑ ይችላሉ፤ ነገር ግን HSL እና HEX ሁለቱም የተመሰረቱት በተመሳሳይ sRGB ቦታ ላይ ነው።

የማስላት ሂደቱን በተመለከተ በቅደም ተከተል፦

1. ላይትነስን እና ሳቹሬሽንን ከመቶኛ ወደ ተንሳፋፊ ቁጥር (0–1) መለወጥ።
2. ጊዜያዊውን ቀይ፣ አረንጓዴ እና ሰማያዊ እሴቶች ማስላት።
3. እነዚህን እሴቶች ወደ 0–255 መጠን ማስተካከል።
4. እያንዳንዱን የRGB እሴት ወደ ሁለት ሄክሳዴሲማል አሃዞች መለወጥ።

የሂሳብ ስራው በስተጀርባ አውቶማቲክ ነው፣ ስለዚህ ተጠቃሚው አያስበውም። ገፁ እንደተነደፈው ሁሉ ማንኛውንም አንድ መስክ ሲያስተካክሉ ሌሎቹ ሁሉ በቅጽበት ይለወጣሉ።

የገፁ ልዩ ባህሪያት

ይህ ገፅ የተለየ የሚያደርገው በHSL ላይ ያተኮረ መሆኑ ነው። ሌሎች የቀለም መለወጫ ገፆች ብዙ ሞዴሎችን ይሸፍናሉ፣ ነገር ግን ይህ ገፅ ከHSL ወደ HEX ብቻ ነው። ምክንያቱም HSL ለሰው ልጅ አስተሳሰብ የተሻለ ነው፤ ለምሳሌ የቀለም ፓሌት (palette) ሲሰሩ ላይትነስን ማስተካከል ሌሎች ቀለሞችን ሳያበላሹ ተመሳሳይ ቤተሰብ ውስጥ እንዲቆዩ ያደርጋል።

የስህተት መልእክት፦ የHSL እሴቶች ከተፈቀደው ወሰን ውጭ ከሆኑ (ለምሳሌ ላይትነስ 110%፣ ወይም ሳቹሬሽን ያለ % ምልክት) ገፁ የሚከተለውን መልእክት ያሳያል፦

“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”

ይህ መልእክት በእንግሊዝኛ ነው፣ ነገር ግን ተጠቃሚው ግቤቶቹን እንዴት ማስተካከል እንዳለበት በግልፅ ያስረዳል።

CMYK እንደ ግምት፦ ገፁ ከHSL በተጨማሪ ሌሎች የቀለም ሞዴሎችን (RGB፣ HSV፣ CMYK፣ LAB) ያሳያል። CMYK ግን በስክሪን ላይ የሚታይ ግምት ብቻ ነው፤ ከባለሙያ ህትመት እሴቶች ሊለይ ይችላል። ስለዚህ ለህትመት ዝግጅት ከሆነ ሌላ መሳሪያ መጠቀም ያስፈልጋል።

በራስ ላይ ሂደት፦ ሁሉም ስሌቶች በእርስዎ አሳሽ ውስጥ ብቻ ይከናወናሉ፤ ምንም ወደ አገልጋይ አይላክም። ይህ ለግላዊነትም ሆነ ለፍጥነት ጠቃሚ ነው።

ተግባራዊ አጠቃቀሞች

ዲዛይነሮች ከFigma ወይም Sketch የHSL እሴቶችን ወስደው ወደ ሲኤስኤስ ለማስገባት HEX ያስፈልጋቸዋል። ገፁ የተዘጋጀው ልክ ለዚህ ነው። ሌላ ጠቃሚ አተገባበር ደሞ የቀለም ተደራሽነት (color accessibility) ነው። ለWCAG (Web Content Accessibility Guidelines) ተቃርኖ ሬሾ (contrast ratio) ሲሰሉ ላይትነስን በHSL በማስተካከል ነው። ለምሳሌ አንድ ሰማያዊ ቀለም ከነጭ ጀርባ ጋር በቂ ንፅፅር ከሌለው ላይትነሱን ወደ ታች ማምጣት ይቻላል፤ ከዚያም የተስተካከለውን ቀለም ወደ HEX በመቀየር ለሲኤስኤስ ማዘጋጀት ይቻላል።

ሌላ ሁኔታም የቲም (theme) ማመንጨት ነው። የአንድ ዌብሳይት ዋና ቀለም በHSL ከተገለፀ በርካታ ተለዋጮችን (ብርሃን፣ ጨለማ፣ ደብዛዛ) በፍጥነት መፍጠር ይቻላል። እነዚህን ተለዋጮች ወደ HEX በመለወጥ ወደ CSS ተለዋዋጮች (variables) ማስገባት ይቻላል።

የተለመዱ ስህተቶች እና ጠቃሚ ምክሮች

1. የ% ምልክት መርሳት፦ ብዙ ተጠቃሚዎች ሳቹሬሽን እና ላይትነስን ያለ መቶኛ ምልክት ያስገባሉ። ለምሳሌ 243, 75, 59 የሚለው ስህተት ነው። ገፁ በግልፅ 75% ብለው እንዲጽፉ ይጠይቃል።
2. Hue ከወሰን ውጭ፦ Hue ከ 360 በላይ ወይም ከ 0 በታች ከሆነ የማይሰራ ነው። ዲግሪ 360 ከ 0 ጋር ተመሳሳይ (ሁለቱም ቀይ) ነው፤ ነገር ግን 361 አይፈቀድም።
3. የHEX ትንሽ እና ትልቅ ፊደላት፦ HEX ኮዶች ኬዝ ሴንሲቲቭ አይደሉም። #4F46E5 እና #4f46e5 አንድ አይነት ናቸው። ገፁ ብዙውን ጊዜ ትንሽ ፊደላትን ያሳያል።
4. CMYK እንደ ትክክለኛ ህትመት መወሰድ፦ እንደጠቀስነው CMYK ግምት ብቻ ነው። ለህትመት የተሻለ ውጤት ከሆነ ሌላ ልዩ መሳሪያ ያስፈልጋል።

ተደጋጋሚ ጥያቄዎች (FAQ)

ጥ፦ የHSL እሴቶችን ያለ መቶኛ ምልክት ማስገባት እችላለሁ?
መልስ፦ አይ, አይችሉም። ሳቹሬሽን እና ላይትነስ የግድ ከ % ምልክት ጋር መሆን አለባቸው። ያለ ምልክት ከሆነ ስህተት ይታያል።

ጥ፦ የተሳሳተ እሴት ካስገባሁ ምን ይሆናል?
መልስ፦ ገፁ “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” የሚል ማሳወቂያ ያሳያል። ምንም የቀለም ውጤት አይታይም።

ጥ፦ HEX ኮድ ከRGB ጋር ተመሳሳይ ነው?
መልስ፦ አዎ፣ HEX የRGB ቀለሞችን በሄክሳዴሲማል ቅርፅ የሚወክል ነው። ለምሳሌ #FF0000 ቀይ (RGB: 255,0,0) ነው።

ጥ፦ ለምን ሶስት አሃዝ HEX አንዳንድ ጊዜ ይታያል?
መልስ፦ እያንዳንዱ የቀለም ቻናል በአንድ አሃዝ መገለፅ ሲችል (ለምሳሌ #aabbcc ወደ #abc) ነው። ይህ የሚሰራው እያንዳንዱ ቻናል እኩል አሃዞች ያሉት ሲሆን ነው።

ጥ፦ CMYK እሴቶቼ ከህትመት ጋር ይዛመዳሉ?
መልስ፦ አይዛመዱም። ገፁ CMYK እንደ ግምት ብቻ ያሳያል፤ ይህ በተለይ በስክሪን ላይ ለማየት ነው። ትክክለኛ የህትመት እሴቶች የሚያስፈልጉ ከሆነ ልዩ የህትመት መሳሪያ ይጠቀሙ።

ጥ፦ ያስገባሁት መረጃ ወደ አገልጋይ ይላካል?
መልስ፦ አይላክም። ሁሉም ሂደት በእርስዎ አሳሽ ውስጥ ብቻ ነው። ምንም ወደ ውጭ አይላክም።

ይህ ገፅ ከHSL ወደ HEX ለመቀየር ቀላል እና ትክክለኛ መንገድ ያቀርባል። ዲዛይነሮችም ሆኑ ገንቢዎች በፍጥነት ወደሚፈልጉት ቅርፅ መድረስ ይችላሉ።