HSL යනු වර්ණයක් තෝරා ගැනීමට පහසු ක්‍රමයයි, RGB නම් තිර, canvas APIs සහ රූප කේතය සැබවින්ම භාවිතා කරන ආකාරයයි. මෙම පරිවර්තකය ඕනෑම hue, saturation සහ lightness ත්‍රිත්වයක් නිශ්චිත 0–255 නාලිකා බවට හරවයි.
HSL සිට RGB පරිවර්තනය කෙසේ සිදු වෙයි
- S සහ L ප්රතිශත කොටස් ලෙස පරිවර්තනය කර, chroma C = (1 − |2L − 1|) × S ගණනය කරන්න.
- Hue එක 60 කින් බෙදා එහි වර්ණ චක්රයේ කොටස හඳුනාගෙන නතරක X = C × (1 − |(H/60 mod 2) − 1|) ගණනය කරන්න.
- ඒ කොටස අනුව C, X සහ 0 R, G සහ B තණ්හෙට ලබා දෙන්න.
- ලයිට්නස් හි offset L − C/2 සියලු නාලිකාට එක්කීරලා 255 කින් ගුණ කරන්න.
කාර්යක්‌ෂම උදාහරණය
අවසාන වටකිරීමට පෙර ප්රතිඵලය නිවැරදියි. කොටස් වශයෙන් hue හෝ saturation අග ලබා දුවත්, ඒවා ළඟම RGB ත්රිකය වෙයි.
HSL සහ RGB විස්තර කරන්න
HSL කියන්නේ කුමක්ද?
HSL වර්ණයක් හියු (වර්ණ චක්රයේ 0–360°), සංතෘප්තිය (0–100%, වර්ණවත්කම) සහ ආලෝකත්වය (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 යන යොමු සටහන
අතිශය පොදු CSS වර්ණ, HSL සිට RGB වෙත පරිවර්තනය කර තිබේ.
| වර්ණය | 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) |