HSL තුළ වර්ණයක් තෝරා ගැනීම සුවපහසුයි, නමුත් stylesheets, design handoffs හා brand ලේඛන තවමත් HEX මත රඳා පවතී. මෙම පරිවර්තකය ඒ හිඟය පුරවයි සහ ඕනෑම hue, saturation සහ lightness සංයෝගයක් සඳහා හය-අංක කේතය ලබා දෙයි.
HSL සිට HEX පරිවර්තනය කෙසේ සිදු වෙයි
- saturation සහ lightness කොටස් වලට පවත්වන්න: 60% ලෙස 0.6 වේ.
- chroma C = (1 − |2L − 1|) × S ගණනය කරන්න — එමඟින් වර්ණය ඉඳහිට grey සිට කොපමණ දුරක තිබේද කියා දැනගන්න.
- Hue භාවිතයෙන් ඒ chroma රතු, කොළ සහ නීල චැනල් මත පිහිටුවා, පසුව සියලු තුනම L − C/2 මගින් ශිප් කරන්න.
- චැනල් එක්ක එකිනෙකට 255 ගුණ කර වටකුරු කොට, එය ද්වි-හෙක්සාදශම අංක ලෙස ලියන්න.
කාර්යක්‌ෂම උදාහරණය
වටකුරු කිරීම අවසන් පියවරේ, තනි චැනලයක් සම්පූර්ණ 0–255 අගයකට ගැලපෙද්දි සිදුවේ. ප්‍රතිඵලය ඔබගේ HSL ප්‍රවේශයට ආසන්නතම HEX කේතය වන අතර සාමාන්යයෙන් design tool එකක පෙන්වන දේ සමඟ සමාන වේ.
HSL සහ HEX විස්තර කරන්න
HSL කියන්නේ කුමක්ද?
HSL වර්ණයක් හියු (වර්ණ චක්රයේ 0–360°), සංතෘප්තිය (0–100%, වර්ණවත්කම) සහ ආලෝකත්වය (0–100%, දිදුලීම) ලෙස වෙන් කරනවා. මිනිසුන් වර්ණය විස්තර කරන ආකාරයට එක් එක් කොටසම අනුකූල වන නිසා HSL විලාසිතා, ශේඩ් සහ ස්ථිර පැලට් සෑදීමට — අත්මඟින් හෝ කේතයෙන් — පහසුම ආකාරයයි.
- වක්‍රරචනය:
- hsl(H, S%, L%)
- පරාසය:
- 0–360°, 0–100%, 0–100%
- භාවිතයට හොඳම:
- පැලට්, ටින්ට් හා ශේඩ්, තේමාවන්
HEX කියන්නේ කුමක්ද?
HEX කේතයක් යනු නායක # එකක් සමඟින් රතු, කියළු සහ නිල් චැනල් ගබඩා කරන හය-අංක හෙක්සාදශම සංඛ්‍යාවකි. එක්-පුවරුවක් එක් චැනලය නිරූපණය කරන බැවින් 00 (සිසිලීම) සිට FF (පූර්ණය) දක්වා වන අගයන් තියේ. එය RGB හි 16.7 මිලියන වර්ණ එකම පරාසය කෙටියෙන් නිරූපණය කරන නිසා CSS, නිර්මාණ මෙවලම් සහ සන්නිවේදන ගුන පත්‍ර හි සම්භාව්‍යයි.
- වක්‍රරචනය:
- #RRGGBB
- පරාසය:
- චැනලය අනුව 00–FF
- භාවිතයට හොඳම:
- CSS, නිර්මාණ භාරදීම, brand guidelines
HSL සිට HEX යන යොමු සටහන
අතිශය පොදු CSS වර්ණ, HSL සිට HEX වෙත පරිවර්තනය කර තිබේ.
| වර්ණය | 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 |