HSL ቀለሙን እንደ ሰዎች ሲነጋገሩ ይገልጻል፡ ማንኛው ሁይ፣ እንዴት ቀለም ያለው፣ እንዴት ብርሃን እንደሚኖረው። HEX ኮድን HSL ለማስቀየር የቀረበው ሁኔታን ፈጣን መግባት እና ማስተካከል ይፈልጋሉ — ብርሃን ለማብራራት፣ ለማፋሰስ ወይም ከዚያ ሙሉ ስኬል ለማቋቋም።
HEX ወደ HSL የሚሰራው እንዴት እንደሆነ
- HEX ኮድን ወደ RGB ቀይርና እያንዳንዱን ቻናል በ255 ክፍል፡ ሦስቱም ቀለም ከ0 እስከ 1 ይገኛሉ።
- ከሦስቱ ላይ ትልቁንና ትንሹን ውስጥ ፈልግ። እነሱ ያለፉት የማኅተም ድምር ነው የማብራሪያ L።
- ከእነሱ መካከል ያለው ልዩነት የሳቱሬሽን Sን ይነቃ፤ ለብርሃን ቀለሞች (2 − max − min) በማካፈል እና ለጥቁር ቀለሞች (max + min) በማካፈል ይወሰናል።
- ያለውን ከፍተኛ ያሳይ ቻናል የሁይን H ይወስናል — ቀይ በ0°፣ ከረሜላ በ120°፣ ሰማያዊ በ240° — እና ሁለቱ ከካሎቹ ቻናሎች ውስጥ ያለው ሁኔታ ሁይንን ይቀይራል።
ስንኳ የሠራ ነገር
ኩነታዊ ትክክለኛ ነው፣ ነገር ግን HSL ዋጋዎች እንደ ደግሞ በዙሪያ የዝርዝር ክልሎችና በመቶ ነጥብ ይገምጻሉ። ወደ ቀድሞው ማስመለስ ሲደርስ ከዚህ በኋላ አንድ ወይም ሁለት RGB እርምጃዎች ይለወጣሉ — በሥራ ላይ ይህ የማይታየው ነገር ነው፣ ነገር ግን ቀጣይ የቀለም መንገድ ሲደርስ ይገባል።
HEX እና HSL ተለያዩ
HEX ምንድነው?
HEX ኮድ የቀለም ቀይ (red), አረንጓዴ (green) እና ሰማያዊ (blue) ቻነሎችን ከመጀመሪያው # ጋር የሚጠብቅ ስድስት አሃዛዊ ዲጂቶች ያለው ስድስት-ዲጂት ሕብረት ነው። ሁለቱ ፍፃሜ ዲጂቶች እያንዳንዱ አንድ ቻነል ይወክላሉ፣ ከ00 (የለም) እስከ FF (ሙሉ)፣ ይህም RGB ያለውን 16.7 ሚሊዮን ቀለሞች በአጭር አቀራረብ ይወክላል። HEX በCSS, ዲዛይን መሣሪያዎች እና የብራንድ መመሪያዎች ውስጥ ነው የነበረው።
- ስንትክስ:
- #RRGGBB
- ክልል:
- 00–FF ለእያንዱ ቻነል
- በጥሩ የሚረዳው:
- CSS, የንዑስ ስራ ማስተላለፊያ, የብራንድ መመሪያዎች
HSL ምንድነው?
HSL ቀለምን ወደ ሁለት ክፍሎች ይከፋፈላል፡ ሁይ (hue) በቀለም ሰዓት ላይ 0–360°, ሳቱሬሽን (saturation) ምን ያህል ቀለማዊ እንደሆነ 0–100% እና ላይትነስ (lightness) ምን ያህል ብርሃን እንደሆነ 0–100%። እያንዳንዱ ክፍል ሰውዬዎች የቀለምን ሲገልፁ የሚጠቀሙትን ይደግፋል፣ ስለዚህ HSL ለቲንት፣ ሸይዶችና ለተደጋጋሚ ፓሌቶች ይገባል — በእጅ ወይም በኮድ።
- ስንትክስ:
- hsl(H, S%, L%)
- ክልል:
- 0–360°, 0–100%, 0–100%
- በጥሩ የሚረዳው:
- ፓሌቶች, ቲንትና ሸይዶች, ማብቂያ
HEX ወደ HSL የማውጫ ሰንጠረዥ
ከ HEX ወደ HSL የተቀየሩ እጅግ የሚገኙ የCSS ቀለማት።
| ቀለም | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |