RGB ස්කීනයට කොපමණ ආලෝකය නිකුත් කළ යුතුද කියේ; HSL වර්ණය සැබැවින්ම කොහෙයි කියලා කියයි. තුන් චැනල් H, S, L වෙත පරිවර්තනය කිරීම වර්ණය අතින් සරලව සකස් කිරීමට උපකාරී වේ.
RGB සිට HSL පරිවර්තනය කෙසේ සිදු වෙයි
- R, G, B 255 කින් බෙදලා එක් අගයක් 0–1 අතර සිටින ලෙස කරන්න.
- තුනෙන් උපරිමය සහ අවමය ගෙන එවොන්ගේ සාමාන්යය lightness L වේ.
- උපරිමය සහ අවමය සමාන නම්, වර්ණය දුඹුරුයි: hue සහ saturation දෙකම 0 වේ.
- අනිත් විට S එම උපරිමය සහ අවමය අතර පැතිරීමෙන් ලබාගෙන, H උපරිමය අඩංගු වන චැනලයෙන් කියවන්න.
කාර්යක්‌ෂම උදාහරණය
නීතියෙන් නිවැරදිය. H, S සහ L සාමාන්යයෙන් වටකුරු කළ මුළු අග ලෙස පෙන්වන බැවින් ආපසු පරිවර්තනය කිරීමෙන් චැනලයක් එක හෝ දෙපියවරක් උස්-අඩු විය හැක.
RGB සහ HSL විස්තර කරන්න
RGB කියන්නේ කුමක්ද?
RGB වර්ණයක් රතු, කලාව සහ නිල් ලෙස වූ ආලෝක චැනල් තුනක් ලෙස විස්තර කරනවා — එක් එක් චැනලය 0 සිට 255 දක්වා. එය තිර කෙලසින්ම ක්රියා කරන ආකාරයට අනුකූල වන අතර: සියළු චැනල් 255 නම් සුදු, සියළුම 0 නම් කලු වේ. වර්ණ සමඟ ගණනය කිරීම අවශ්ය වියහොත් RGB හොඳම තේරීමයි; rgba() මගින් පාරදර්ශිතාව ද එක් කළ හැක.
- වක්‍රරචනය:
- rgb(R, G, B)
- පරාසය:
- චැනලය අනුව 0–255
- භාවිතයට හොඳම:
- කේතය, canvas, rgba() සමඟ පාරදර්ශිතාව
HSL කියන්නේ කුමක්ද?
HSL වර්ණයක් හියු (වර්ණ චක්රයේ 0–360°), සංතෘප්තිය (0–100%, වර්ණවත්කම) සහ ආලෝකත්වය (0–100%, දිදුලීම) ලෙස වෙන් කරනවා. මිනිසුන් වර්ණය විස්තර කරන ආකාරයට එක් එක් කොටසම අනුකූල වන නිසා HSL විලාසිතා, ශේඩ් සහ ස්ථිර පැලට් සෑදීමට — අත්මඟින් හෝ කේතයෙන් — පහසුම ආකාරයයි.
- වක්‍රරචනය:
- hsl(H, S%, L%)
- පරාසය:
- 0–360°, 0–100%, 0–100%
- භාවිතයට හොඳම:
- පැලට්, ටින්ට් හා ශේඩ්, තේමාවන්
RGB සිට HSL යන යොමු සටහන
අතිශය පොදු CSS වර්ණ, RGB සිට HSL වෙත පරිවර්තනය කර තිබේ.
| වර්ණය | 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%) |