በHSL ውስጥ ቀለም መምረጥ ስለሚያስተላለፍ ሲሆን፣ ጽሁፍ ስብስናዎች፣ ዲዛይን ማስተላለፊያዎች እና የብራንድ ሰነዶች እየተጠቀሙ የሚሄዱት እስከዚህ ጊዜ ግን HEX ይጠቀሙ። ይህ ትርጉም ያፈፀምልሃል እና ለማንኛውም H, S እና L የሆነ ውስጥ ስድስት ዲጅቶች ኮድ ይሰጥሃል።
HSL ወደ HEX የሚሰራው እንዴት እንደሆነ
- S እና L ን ወደ የክፍል ቁጥር ቀይር፡ 60% ይሆናል 0.6።
- chroma C = (1 − |2L − 1|) × S ን በማስላት ኪርኮማ ረጥም ከወርቅ ያለውን ክፍል ትርዒት ነው።
- ሁይንን ተጠቅመህ ያለውን ኪሮማ በቀይ፣ ከረሜላ እና ሰማያዊ ቻናሎች ላይ አቅርብ፣ ከዚያም ሁሉንም ቻናሎች L − C/2 በማንካት እንዲንቀሳቀሱ አርከብ።
- እያንዳንዱን ቻናል በ255 አጥፍ፣ ዙሪያ ማድረግ፣ እና እንደ ሁለት ሄክሳዴሲማል ቁጥሮች ጻ።
ስንኳ የሠራ ነገር
ማድረግ በመጨረሻው ደረጃ አንድ ጊዜ ይከናወናል፣ እንደ ዚያም እያንዳንዱ ቻናል ወደ 0–255 የሙሉ ቁጥር ሲለወጥ። ውጤቱ ወደ ስርዓቱ የቅርብ ኮድ ሲሆን በአብዛኛው የዲዛይን መሣሪያ የሚያሳየው ነገር ነው።
HSL እና HEX ተለያዩ
HSL ምንድነው?
HSL ቀለምን ወደ ሁለት ክፍሎች ይከፋፈላል፡ ሁይ (hue) በቀለም ሰዓት ላይ 0–360°, ሳቱሬሽን (saturation) ምን ያህል ቀለማዊ እንደሆነ 0–100% እና ላይትነስ (lightness) ምን ያህል ብርሃን እንደሆነ 0–100%። እያንዳንዱ ክፍል ሰውዬዎች የቀለምን ሲገልፁ የሚጠቀሙትን ይደግፋል፣ ስለዚህ HSL ለቲንት፣ ሸይዶችና ለተደጋጋሚ ፓሌቶች ይገባል — በእጅ ወይም በኮድ።
- ስንትክስ:
- hsl(H, S%, L%)
- ክልል:
- 0–360°, 0–100%, 0–100%
- በጥሩ የሚረዳው:
- ፓሌቶች, ቲንትና ሸይዶች, ማብቂያ
HEX ምንድነው?
HEX ኮድ የቀለም ቀይ (red), አረንጓዴ (green) እና ሰማያዊ (blue) ቻነሎችን ከመጀመሪያው # ጋር የሚጠብቅ ስድስት አሃዛዊ ዲጂቶች ያለው ስድስት-ዲጂት ሕብረት ነው። ሁለቱ ፍፃሜ ዲጂቶች እያንዳንዱ አንድ ቻነል ይወክላሉ፣ ከ00 (የለም) እስከ FF (ሙሉ)፣ ይህም RGB ያለውን 16.7 ሚሊዮን ቀለሞች በአጭር አቀራረብ ይወክላል። HEX በCSS, ዲዛይን መሣሪያዎች እና የብራንድ መመሪያዎች ውስጥ ነው የነበረው።
- ስንትክስ:
- #RRGGBB
- ክልል:
- 00–FF ለእያንዱ ቻነል
- በጥሩ የሚረዳው:
- CSS, የንዑስ ስራ ማስተላለፊያ, የብራንድ መመሪያዎች
HSL ወደ HEX የማውጫ ሰንጠረዥ
ከ HSL ወደ HEX የተቀየሩ እጅግ የሚገኙ የCSS ቀለማት።
| ቀለም | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |