የRGBን ወደ HSL የሚቀይር መሣሪያ – ዝርዝር መግለጫ
ይህ ገጽ ምን ያደርጋል?
በዚህ ገጽ ላይ ሶስት ቁጥሮችን ከ0 እስከ 255 በማስገባት የRGB ቀለምን ወደ HSL ቅርጸት በቅጽበት መለወጥ ይችላሉ። እነዚህ ሶስት ቁጥሮች በስክሪን ላይ የተለያዩ የብርሃን ጨረሮችን ድብልቅ ያመለክታሉ፦ ቀይ (Red)፣ አረንጓዴ (Green)፣ ሰማያዊ (Blue)። መሣሪያው የሚያወጣው ውጤት የHSL እሴቶችን ያካትታል፦ ሑ (hue) በዲግሪ (0–360)፣ ሳቹሬሽን (saturation) በፐርሰንት (0–100%)፣ እና ላይትነስ (lightness) በፐርሰንት። በተጨማሪም ሌሎች የተለመዱ ቅርጸቶችን – HEX፣ HSV፣ CMYK፣ LAB – በአንድ ጊዜ ያሳያል። የፈለጉትን ቅርጸት በቅንብር መምረጥና መቅዳት ይቻላል።
ይህ ገጽ ልዩ የሚያደርገው ምንድነው?
ከሌሎች የቀለም መቀየሪያዎች በተለየ ይህ ገጽ በስክሪን ላይ እንደሚታየው የRGB ሞዴልን ወደ ሰዎች አስተሳሰብ ከሚስማማ ሞዴል ይቀይረዋል። የRGB ሞዴል አላስፈላጊ ውስብስብነት አለው፦ የቀለሙን መሰረታዊ ማንነት ሳይቀይሩ የብርሃን መጠኑን ብቻ ማስተካከል አይቻልም። በHSL ደግሞ ላይትነስን ሲቀይሩ ሑ (hue) አይለወጥም። ይህ ለቀለም ማህበሮች (palettes)፣ ለጭብጦች (themes)፣ እና ለተደራሽ የንጽጽር ልዩነቶች (accessible contrast) አስፈላጊ ነው።
የግብዓት እና የውጤት ዝርዝር
ግብዓት
- RGB፦ ሶስት ቁጥሮች ከ0 እስከ 255፣ በነጠላ ሰረዝ ወይም ክፍተት ተለያይተው። ለምሳሌ
79, 70, 229ወይም79 70 229። - እንዲሁም የHSL እሴቶችን በቀጥታ ማስገባት ይችላሉ፦ ከ0–360 ሑ፣ ከ0–100% ሳቹሬሽን፣ ከ0–100% ላይትነስ። ለምሳሌ
243, 75%, 59%።
ውጤቶች
| ቅርጸት | ክልል | ምሳሌ |
|---|---|---|
| HSL | H:0–360, S:0–100%, L:0–100% | 243°, 75%, 59% |
| HEX | #RRGGBB | #4F46E5 |
| HSV | H:0–360, S:0–100%, V:0–100% | 243°, 70%, 90% |
| CMYK | C:0–100%, M:0–100%, Y:0–100%, K:0–100% | 65%, 69%, 0%, 10% |
| LAB | L:0–100, a:–128–127, b:–128–127 | 33, 51, –85 |
ማንኛውንም መስክ ማስተካከል ሌሎቹን ሁሉ በቅጽበት ያዘምናል። ሁሉም ለውጦች በተጠቃሚው አሳሽ ውስጥ ይከናወናሉ፤ ምንም መረጃ ወደ ሰርቨር አይላክም።
ሕጎች እና ገደቦች
- የRGB ግብዓቱ በትክክል ሶስት ኢንቲጀሮች በ0–255 መካከል መሆን አለበት። የተሳሳተ ግብዓት ከሆነ የሚከተለውን መልእክት ያሳያል፦
“Enter RGB as three numbers 0–255, like 79, 70, 229.” - የHSL ግብዓቱ የሑ ክልል 0–360፣ ሳቹሬሽን እና ላይትነስ በፐርሰንት (ከ0%–100%) መሆን አለባቸው። የተሳሳተ ከሆነ፦
“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” - ከLAB ወይም CMYK የሚመጣ እሴት ከሚታየው RGB ጋማ ውጭ ከሆነ፣ መሣሪያው ወደሚቻለው ቅርብ የሆነ የስክሪን ቀለም ያስተካክላል። ይህን ቀለም ወደ LAB ወይም CMYK መልሶ መቀየር ትንሽ ልዩነት ሊያስከትል ይችላል።
- የCMYK ውጤቱ ለሙያዊ ህትመት ሳይሆን ለስክሪን እይታ ብቻ የተመከረ ነው።
ይህን መሣሪያ የሚፈልጉት እነማን ናቸው?
- UI/UX ዲዛይነሮች – ለተደራሽ የቀለም ማህበሮች ላይትነስን ከሑ ገለልተኝነት ጋር ማስተካከል ሲፈልጉ።
- የፊት-ፍፃሜ ገንቢዎች – የዲዛይን ምልክቶችን ከRGB (እንደ ፊግማ፣ እስከች) ወደ ሲኤስኤስ
hsl()ተግባር ሲተረጉሙ። - የጭብጥ ሰሪዎች – የአንድ የብራንድ ቀለም ብርሃን እና ጨለማ ተለዋዋጮችን ሲፈጥሩ፣ ሑውን ጠብቀው።
- የውሂብ እይታ ዲዛይነሮች – በቅደም ተከተል የተደረደሩ የቀለም ሚዛኖችን ሲፈልጉ፤ የHSL ላይትነስ ለዚህ ምቹ ነው።
ከRGB ወደ HSL የሚደረገው ለውጥ – የሂሳብ ዘዴ
የለውጡ ሂደት ሶስት ደረጃዎች አሉት።
1. ኖርማላይዜሽን
የRGB እሴቶችን ከ0–255 ወደ 0–1 ክልል ያስቀይሩ፦
R' = R / 255, G' = G / 255, B' = B / 255
2. ዝቅተኛውን እና ከፍተኛውን እሴት ፈልግ
Cmax = max(R', G', B')
Cmin = min(R', G', B')
Δ = Cmax - Cmin
3. የሑ (Hue) ስሌት
የሑ ስሌት በ60° ዙሪያ ክፍልፋዮች ላይ የተመሰረተ ነው፦
- Δ = 0 ከሆነ፣ H = 0
- Cmax = R' ከሆነ፣
H = 60 × ((G' – B') / Δ mod 6) - Cmax = G' ከሆነ፣
H = 60 × ((B' – R') / Δ + 2) - Cmax = B' ከሆነ፣
H = 60 × ((R' – G') / Δ + 4)
ውጤቱ አሉታዊ ከሆነ 360 ይጨመርበታል።
4. ላይትነስ (Lightness)
L = (Cmax + Cmin) / 2
5. ሳቹሬሽን (Saturation)
Δ = 0 ከሆነ S = 0። ካልሆነ፦
S = Δ / (1 – |2L – 1|)
ሁሉም ውጤቶች የሚገለጹት በዲግሪ (ሑ) እና በፐርሰንት (ሳቹሬሽን እና ላይትነስ) ነው።
በድረ-ገጽ ዲዛይን ውስጥ HSL እንዴት ይረዳል?
በሲኤስኤስ ውስጥ መደበኛው hsl() እና hsla() (አልፋ ሰርጥ ያለው) ተግባሮች ይገኛሉ። የሚከተሉት ምሳሌዎች አስተዋውቀው፦
background-color: hsl(243, 75%, 59%);
color: hsl(243, 75%, 90%); /* የበለጠ ብርሃን */
border: 2px solid hsl(243, 50%, 30%); /* ደብዛዛ፣ ጥቁር ሐምራዊ */
የመጀመሪያው እሴት (ሑ) ባልተቀየረ ቁጥር የቀለሙ መሰረታዊ “ማንነት” ይቆያል። በዚህ ምክንያት አንድ ብራንድ ቀለም ለብርሃን ጭብጥ ከፍተኛ ላይትነስ፣ ለጨለማ ጭብጥ ዝቅተኛ ላይትነስ ሊኖረው ይችላል።
ለተደራሽነት (Accessibility) ሲባል HSL
የWCAG 2.1 የንጽጽር ልዩነት ደረጃ የሚሰላው በሉሚንስ (luminance) ላይ ነው፣ በHSL ላይ አይደለም። ነገር ግን ላይትነስን ማስተካከል የንጽጽር መጠኑን ለመጨመር ቀላል መንገድ ነው። ለምሳሌ በጀርባ ቀለም ላይ ዝቅተኛ ላይትነስ ማስቀመጥ ወይም በፊት ቀለም ላይ ከፍተኛ ላይትነስ ማስቀመጥ የWCAG AA (4.5:1) ደረጃን ለማሟላት ይረዳል። ነገር ግን የRGB ቀጥተኛ ለውጥ ከሆነ የሑ ተመሳሳይ እንደሆነ መቆየቱ የብራንድ ማንነትን ይጠብቃል።
የHSL ገደቦች
ምንም እንኳን HSL ለሰው ተስማሚ ቢሆንም፣ ፍጹም በሆነ መልኩ ተመሳሳይ አይደለም። በተመሳሳይ ላይትነስ (50%)፣ ቢጫ (yellow) እና ሰማያዊ (blue) የተለያየ የእይታ ክብደት አላቸው። ቢጫ ብርሃናማ እንደሚመስል፣ ሰማያዊ ደብዛዛ እንደሚመስል ነው። ለበለጠ ተመሳሳይ ሞዴል፣ LAB (ወይም LCH) የሚባለውን መጠቀም ይቻላል። እንዲሁም HSL ከስክሪን ናሙና ጋር የተያያዘ ነው፤ ከህትመት ጋማ (CMYK) ጋር በቀጥታ አይስማማም።
የሚጠየቁ ጥያቄዎች (FAQ)
1. ለምን hsl() ከ rgb() የተሻለ ነው?
ምክንያቱም በሲኤስኤስ ውስጥ የላይትነስ ለውጥ ሲያደርጉ ሑ አይለወጥም። የRGB ሲቀይሩ ሶስቱንም ሰርጦች በተመጣጣኝ ሁኔታ ማስተካከል ያስፈልጋል።
2. የCMYK ውጤቱ ለህትመት የሚስማማ ነው?
አይደለም። ይህ መሣሪያ የተጠቀመው ለስክሪን እይታ የተጠጋጋ ዋጋ ነው። ትክክለኛ ለህትመት የባለሙያ ሶፍትዌር ያስፈልጋል።
3. ከLAB ወደ RGB ስቀይር ለምን ትንሽ ለውጥ ይፈጠራል?
ምክንያቱም LAB የሚችለው ከሚታየው የሰው አይን ክልል ጋር ሰፊ ነው። አንዳንድ የLAB እሴቶች ከስክሪን ጋማ ውጭ ስለሆኑ ወደ ቅርብ የRGB ይቀየራሉ።
4. የRGB እሴቶችን በነጠላ ሰረዝ መለየት አስፈላጊ ነው?
አይደለም፣ ክፍተቶችም ይሰራሉ። ለምሳሌ 79 70 229 እንዲሁ ይሰራል።
5. ወደ HSL ከቀየርኩ በኋላ ወደ RGB መልሼ ማስገባት እችላለሁ?
አዎ፣ መሣሪያው በሁለቱም አቅጣጫ ይሰራል።
6. የሚሠራው ለምን ዓይነት የRGB ስርዓት ነው?
መደበኛ sRGB ይጠቀማል፣ ይህም ለአብዛኞቹ አሳሾች እና መሳሪያዎች የተለመደ ነው።
ማጠቃለያ (ያለ ማጠቃለያ ሐረግ)
ይህ መሣሪያ የሚሰራው በተጠቃሚው አሳሽ ውስጥ ብቻ ስለሆነ ምንም አይነት ደህንነት ስጋት የለውም። የተለያዩ ቅርጸቶችን በአንድ ጊዜ ማየት በዲዛይን ውሳኔዎች ውስጥ ጊዜ ይቆጥባል። በተለይ ከRGB ወደ HSL ሲቀይሩ የቀለም ማህበሮችን ለመፍጠር ቀላል ያደርገዋል።