HSL ቀለም ለመመርጥ ቀላል ዘዴ ነው፣ RGB ግን ስክሪን፣ canvas ኤፒአይዎች እና የምስል ኮዶች የሚበጁት ነው። ይህ ቀይር ማቀይር ማንኛዉንም H, S ና L እስከ ትክክለኛ 0–255 ቻነሎች ይቀይራል።
HSL ወደ RGB የሚሰራው እንዴት እንደሆነ
- S እና L ን ወደ ክፍል እንዲሆኑ አስቀይር እና ክሮማ C = (1 − |2L − 1|) × S ን ያስላ።
- H ን በ60 እንዲከፋ አካል በቀለም ዙር ላይ የሚገኝበትን ክፍል ይፈልጋሉ እና የመካከለኛው እሴት X = C × (1 − |(H/60 mod 2) − 1|) ን ይሠሩ።
- ያንን ክፍል መሠረት ላይ C, X እና 0 ን ወደ R, G እና B ቦታዎች ያውርዱ።
- የብርሃንን መስተዋድድ L − C/2 ወደ ሶስቱ ቻነሎች ያክሉ እና በ255 ይዛወሩ።
ስንኳ የሠራ ነገር
HSL hsl(37, 90%, 51%)=RGB rgb(243, 156, 18)
ውጤቱ እስከ መጨረሻው ድረስ እስከ ትክክለኛ ድግም ይጠናቀቃል። የሙሉ ቁጥር አሰናዳጅ እና የተከፋፈለ H ወይም S እንዲሁም የተደጋጋ የRGB ትርፍ ይሰርካሉ።
HSL እና RGB ተለያዩ
HSL ምንድነው?
HSL ቀለምን ወደ ሁለት ክፍሎች ይከፋፈላል፡ ሁይ (hue) በቀለም ሰዓት ላይ 0–360°, ሳቱሬሽን (saturation) ምን ያህል ቀለማዊ እንደሆነ 0–100% እና ላይትነስ (lightness) ምን ያህል ብርሃን እንደሆነ 0–100%። እያንዳንዱ ክፍል ሰውዬዎች የቀለምን ሲገልፁ የሚጠቀሙትን ይደግፋል፣ ስለዚህ HSL ለቲንት፣ ሸይዶችና ለተደጋጋሚ ፓሌቶች ይገባል — በእጅ ወይም በኮድ።
- ስንትክስ:
- hsl(H, S%, L%)
- ክልል:
- 0–360°, 0–100%, 0–100%
- በጥሩ የሚረዳው:
- ፓሌቶች, ቲንትና ሸይዶች, ማብቂያ
RGB ምንድነው?
RGB ቀለምን ሶስት የብርሃን ቻነሎች — ቀይ, አረንጓዴ እና ሰማያዊ — በ0 እስከ 255 ይገልጻል። ይህ እንደ ስክሪኖች ትክክለኛ ስርዓት ነው፤ ሶስቱም በ255 ሲሆኑ ነጭ ይሆናሉ፣ ሁሉም በ0 ሲሆኑ ጥቁር። RGB ማንኛውም ጊዜ ከቀለም ጋር ሲስሩ ወይም ሲቁም ሲሆን ትክክለኛ መርጫ ነው፣ rgba() ጨምሮ ስርጭትን ይጨምራል።
- ስንትክስ:
- rgb(R, G, B)
- ክልል:
- 0–255 ለእያንዱ ቻነል
- በጥሩ የሚረዳው:
- ኮድ, canvas, በrgba() ጋር ስርጭት
HSL ወደ RGB የማውጫ ሰንጠረዥ
ከ HSL ወደ RGB የተቀየሩ እጅግ የሚገኙ የCSS ቀለማት።
| ቀለም | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |