HEX සිට HSL පරිවර්තකය

ඕනෑම HEX වර්ණයක් HSL වෙත — ක්ෂණිකව සහ නොමිලේ

#2ECC71

ඕනෑම වර්ණ අගයක් ඇලවන්න. එහි ආකාරය අපි ඔබ වෙනුවෙන් හඳුනා ගනිමු.

HSL ප්‍රතිඵලය
හූ
145°
සැචුරේෂන්
63%
පැහැ කම්පනය
49%

මෙම වර්ණය සියලුම ආකාරවලින්

CMYK පැතිකඩ: Coated FOGRA39 (යුරෝපය සඳහා Photoshop හි පෙරනිමිය)

HSL මිනිසුන් තේරුම් ගන්නා රටාවෙන් වර්ණය විස්තර කරයි: කුමන hue, කොපමණ වර්ණවත්, කොපමණ දිලීරයි. HEX කේතයක් HSL වෙත පරිවර්තනය කිරීම, වර්ණයක් සෘජුවම ඔබට සකස් කළ හැකි ආකාරයට ගන්න ඉක්මන් ක්‍රමයකි — එය පහදු කරන්න, නිහතමානී කරන්න, හෝ එයින් සම්පූර්ණ පරිමාණයක් ගොඩනගන්න.

HEX සිට HSL පරිවර්තනය කෙසේ සිදු වෙයි

  1. HEX කේතය RGB වෙත පරිවර්තනය කර තනි චැනලයක් 255 කින් බෙදන්න, එහි තුනම 0 සිට 1 අතර සිටිය යුතුය.
  2. තුනෙන් විශාලතම හා කුඩාතම අග හඳුනා ගන්න. එම දෙකේ සාමාන්‍යයය lightness L වේ.
  3. ඒ දෙක අතර වූ පැතිරීම saturation S නියම කරයි: එය දිලීර වර්ණ සඳහා (2 − max − min) වෙතින් බෙදන්න, ගැඹුරු වර්ණ සඳහා (max + min) වෙතින් බෙදන්න.
  4. උපරිම අගය අඩංගු කරන චැනලය hue H තීරණය කරයි — රතු 0°, කොළ 120°, නීල 240° — අනෙක් දෙචැනල් ඒ පිටුවෙන් hue එක අභ්‍යන්තරයේ පිහිටුවයි.

කාර්යක්‌ෂම උදාහරණය

HEX #2ECC71=HSL hsl(145, 63%, 49%)

ගණිතය නිවැරදියි, නමුත් HSL අග සාමාන්‍යයෙන් වටකුරු කොට කෝණ සහ ප්‍රතිශත ලෙස පෙන්වයි. එබැවින් ආපසු පරිවර්තනය කිරීමෙන් මුල් RGB ට එක දෙකක පියවරක් වෙනස් විය හැක — ප්‍රායෝගිකව නොදැක්කන පරිදි, නමුත් බහු-චක්‍ර වර්ණ හුවමාරු කරන විට දැනගැනීම වැදගත්යි.

HEX සහ HSL විස්තර කරන්න

HEX කියන්නේ කුමක්ද?

HEX කේතයක් යනු නායක # එකක් සමඟින් රතු, කියළු සහ නිල් චැනල් ගබඩා කරන හය-අංක හෙක්සාදශම සංඛ්‍යාවකි. එක්-පුවරුවක් එක් චැනලය නිරූපණය කරන බැවින් 00 (සිසිලීම) සිට FF (පූර්ණය) දක්වා වන අගයන් තියේ. එය RGB හි 16.7 මිලියන වර්ණ එකම පරාසය කෙටියෙන් නිරූපණය කරන නිසා CSS, නිර්මාණ මෙවලම් සහ සන්නිවේදන ගුන පත්‍ර හි සම්භාව්‍යයි.

වක්‍රරචනය:
#RRGGBB
පරාසය:
චැනලය අනුව 00–FF
භාවිතයට හොඳම:
CSS, නිර්මාණ භාරදීම, brand guidelines

HSL කියන්නේ කුමක්ද?

HSL වර්ණයක් හියු (වර්ණ චක්රයේ 0–360°), සංතෘප්තිය (0–100%, වර්ණවත්කම) සහ ආලෝකත්වය (0–100%, දිදුලීම) ලෙස වෙන් කරනවා. මිනිසුන් වර්ණය විස්තර කරන ආකාරයට එක් එක් කොටසම අනුකූල වන නිසා HSL විලාසිතා, ශේඩ් සහ ස්ථිර පැලට් සෑදීමට — අත්මඟින් හෝ කේතයෙන් — පහසුම ආකාරයයි.

වක්‍රරචනය:
hsl(H, S%, L%)
පරාසය:
0–360°, 0–100%, 0–100%
භාවිතයට හොඳම:
පැලට්, ටින්ට් හා ශේඩ්, තේමාවන්

HEX සිට HSL යන යොමු සටහන

අතිශය පොදු CSS වර්ණ, HEX සිට HSL වෙත පරිවර්තනය කර තිබේ.

වර්ණයHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

පහසුවෙන් අසන ප්‍රශ්න

HEX කේතය RGB වෙත පරිවර්තනය කර තනි චැනලයක් 255 කින් බෙදන්න, එහි තුනම 0 සිට 1 අතර සිටිය යුතුය. තුනෙන් විශාලතම හා කුඩාතම අග හඳුනා ගන්න. එම දෙකේ සාමාන්‍යයය lightness L වේ. ඒ දෙක අතර වූ පැතිරීම saturation S නියම කරයි: එය දිලීර වර්ණ සඳහා (2 − max − min) වෙතින් බෙදන්න, ගැඹුරු වර්ණ සඳහා (max + min) වෙතින් බෙදන්න. උපරිම අගය අඩංගු කරන චැනලය hue H තීරණය කරයි — රතු 0°, කොළ 120°, නීල 240° — අනෙක් දෙචැනල් ඒ පිටුවෙන් hue එක අභ්‍යන්තරයේ පිහිටුවයි.

ගණිතය නිවැරදියි, නමුත් HSL අග සාමාන්‍යයෙන් වටකුරු කොට කෝණ සහ ප්‍රතිශත ලෙස පෙන්වයි. එබැවින් ආපසු පරිවර්තනය කිරීමෙන් මුල් RGB ට එක දෙකක පියවරක් වෙනස් විය හැක — ප්‍රායෝගිකව නොදැක්කන පරිදි, නමුත් බහු-චක්‍ර වර්ණ හුවමාරු කරන විට දැනගැනීම වැදගත්යි.

HSL වර්ණයක් හියු (වර්ණ චක්රයේ 0–360°), සංතෘප්තිය (0–100%, වර්ණවත්කම) සහ ආලෝකත්වය (0–100%, දිදුලීම) ලෙස වෙන් කරනවා. මිනිසුන් වර්ණය විස්තර කරන ආකාරයට එක් එක් කොටසම අනුකූල වන නිසා HSL විලාසිතා, ශේඩ් සහ ස්ථිර පැලට් සෑදීමට — අත්මඟින් හෝ කේතයෙන් — පහසුම ආකාරයයි.

ඔව්. ඇතුල් කිරීමේ ආසන්නයේ ඇති හුවමාරු බොත්තම ඔබව HSL → HEX පරිවර්තකයට ගෙන යයි. එය සමාන ක්‍රමවේදය අනුව ක්‍රියා කරයි — දෙපාර්ශ්වයද ඒකම සූත්‍රය භාවිතා කරයි, සාමාන්‍යයෙන් ප්‍රතිපල ආපසු ගන්නා ආකාරයට යෙදී.

වර්ණ විවිධාකාර අවශ්‍ය වන විට HSL වෙත මාරු වන්න. H සහ S ස්ථායී තබා L එක මාරු කිරීමෙන් ඔබට සවිත සහ කුහුඹු පරාසයක් ලැබේ, HEX හි අතින් මෙය කිරීමට වඩා දුෂ්කරයි.