RGB ስክሪኑ ምን ያህል ብርሃን እንደሚያበራ ይነገራል፤ HSL ግን ቀለሙ እንዴት እንደሚታይ ይገልጻል። ሶስቱን ቻናሎች ወደ ሁይን፣ ሳቱሬሽንና ላይትነስ ማስቀየር ቀለሙን ቀላል የሚያስተካክል ያደርጋል።
RGB ወደ HSL የሚሰራው እንዴት እንደሆነ
- R, G እና B ን በ255 ክፍል፣ እያንዳንዱ እስከ 0 እስከ 1 ይገኛል።
- ከሦስቱ ከፍተኛንና ከዳናን ትንሹን ውስጥ ይውሰዱ — እነሱ የማኅተም ድምር ነው የላይትነስ L።
- ከፍተኛውና ትንሹ ከተመሳሳይ ሲሆኑ ቀለሙ ግራይ ነው፤ ሁይንና ሳቱሬሽን ሁለቱም 0 ናቸው።
- ካለማይኖሩ ከፍተኛውን ከካሎቹ ቻናሎች እንዲነገር ሳቱሬሽን S ን ከልዩነቱ ያገናኝ እና H ን ከየቻናሉ ከፍተኛው ይቆጠር።
ስንኳ የሠራ ነገር
RGB rgb(155, 89, 182)=HSL hsl(283, 39%, 53%)
በመሠረት ትክክለኛ ነው። ምክንያቱም H, S እና L በስርዓት እንደ ተዘጋጅተው የሙሉ ቁጥር ሲያሳዩ ወደ ቀድሞው ማስመለስ ከፍተኛው ቻናልን በአንድ ወይም ሁለት ደረጃ ሊነገው ይችላል።
RGB እና HSL ተለያዩ
RGB ምንድነው?
RGB ቀለምን ሶስት የብርሃን ቻነሎች — ቀይ, አረንጓዴ እና ሰማያዊ — በ0 እስከ 255 ይገልጻል። ይህ እንደ ስክሪኖች ትክክለኛ ስርዓት ነው፤ ሶስቱም በ255 ሲሆኑ ነጭ ይሆናሉ፣ ሁሉም በ0 ሲሆኑ ጥቁር። RGB ማንኛውም ጊዜ ከቀለም ጋር ሲስሩ ወይም ሲቁም ሲሆን ትክክለኛ መርጫ ነው፣ rgba() ጨምሮ ስርጭትን ይጨምራል።
- ስንትክስ:
- rgb(R, G, B)
- ክልል:
- 0–255 ለእያንዱ ቻነል
- በጥሩ የሚረዳው:
- ኮድ, canvas, በrgba() ጋር ስርጭት
HSL ምንድነው?
HSL ቀለምን ወደ ሁለት ክፍሎች ይከፋፈላል፡ ሁይ (hue) በቀለም ሰዓት ላይ 0–360°, ሳቱሬሽን (saturation) ምን ያህል ቀለማዊ እንደሆነ 0–100% እና ላይትነስ (lightness) ምን ያህል ብርሃን እንደሆነ 0–100%። እያንዳንዱ ክፍል ሰውዬዎች የቀለምን ሲገልፁ የሚጠቀሙትን ይደግፋል፣ ስለዚህ HSL ለቲንት፣ ሸይዶችና ለተደጋጋሚ ፓሌቶች ይገባል — በእጅ ወይም በኮድ።
- ስንትክስ:
- hsl(H, S%, L%)
- ክልል:
- 0–360°, 0–100%, 0–100%
- በጥሩ የሚረዳው:
- ፓሌቶች, ቲንትና ሸይዶች, ማብቂያ
RGB ወደ HSL የማውጫ ሰንጠረዥ
ከ RGB ወደ HSL የተቀየሩ እጅግ የሚገኙ የCSS ቀለማት።
| ቀለም | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |