HSL ടു HEX കൺവെർട്ടർ

HSL-ൽ നിന്ന് HEX-ലേക്ക്: നിറങ്ങളുടെ പരിവർത്തനം

HSL-ൽ നിന്ന് HEX-ലേക്കുള്ള പേജിന്റെ പ്രധാന ലക്ഷ്യം

ഈ പേജിൽ നിങ്ങൾക്ക് ഒരു HSL നിറം നൽകാം — ഡിഗ്രികളിൽ ഹ്യൂ (0–360), ശതമാനമായി സാച്ചുറേഷൻ (0–100%), ശതമാനമായി ലൈറ്റ്നസ് (0–100%) — ഉടനെ അതിന് തുല്യമായ ഹെക്സാഡെസിമൽ (HEX) കളർ കോഡ് ലഭിക്കും. CSS-ലും ഡിസൈൻ ടൂളുകളിലും ഉപയോഗിക്കുന്ന ആറ് അക്ക (അല്ലെങ്കിൽ മൂന്ന് അക്ക ഷോർട്ട്ഹാൻഡ്) നൊട്ടേഷനാണ് HEX കോഡ്, ഉദാഹരണത്തിന് #1E90FF. നിങ്ങൾ ടൈപ്പ് ചെയ്യുകയോ ഒരു നിറം തെരഞ്ഞെടുക്കുകയോ ചെയ്യുമ്പോൾ, HEX മൂല്യം തൽക്ഷണം അപ്ഡേറ്റ് ചെയ്യപ്പെടും.

ഈ പേജിനെ വ്യത്യസ്തമാക്കുന്നത് എന്ത്

HSL-ൽ നിന്ന് HEX-ലേക്കുള്ള പരിവർത്തനത്തിനായി മാത്രം സമർപ്പിച്ചിരിക്കുന്ന ഒരു ടൂൾ ആണ് ഇത്. മനുഷ്യന്റെ ചിന്താഗതിയനുസരിച്ച് നിറത്തെ മനസ്സിലാക്കാൻ രൂപകൽപ്പന ചെയ്ത ഒരു കളർ മോഡലാണ് HSL — ലൈറ്റ്നസ് മാത്രം മാറ്റുന്നത് ഹ്യൂവിനെ ബാധിക്കില്ല, അതുകൊണ്ടാണ് പാലറ്റും തീം ജനറേഷനും ഇത് ഉപയോഗിക്കുന്നത്. മറുവശത്ത്, HEX ആറ് അക്ക (അല്ലെങ്കിൽ മൂന്ന് അക്ക ഷോർട്ട്ഹാൻഡ്) RGB നൊട്ടേഷൻ ആണ്; എട്ട് അക്ക രൂപം ഉപയോഗിക്കാതെ ഇതിന് ആൽഫ ചാനൽ ഇല്ല. sRGB ഗാമറ്റിനുള്ളിൽ ഈ പരിവർത്തനം നേരിട്ടും നഷ്ടമില്ലാതെയും നടക്കുന്നു, LAB അല്ലെങ്കിൽ CMYK പരിവർത്തനങ്ങളിൽ നിന്ന് വ്യത്യസ്തമായി, ഇവിടെ ഗാമറ്റിന് പുറത്തുള്ള നിറങ്ങൾ ക്രമീകരിക്കപ്പെടുന്നില്ല.

ഇൻപുട്ടുകളും ഔട്ട്പുട്ടുകളും

ഇൻപുട്ടുകൾ

ഉപയോക്താവ് മൂന്ന് മൂല്യങ്ങൾ നൽകണം:

• ഹ്യൂ (Hue): 0 മുതൽ 360 വരെയുള്ള ഡിഗ്രികൾ
• സാച്ചുറേഷൻ (Saturation): 0% മുതൽ 100% വരെയുള്ള ശതമാനം
• ലൈറ്റ്നസ് (Lightness): 0% മുതൽ 100% വരെയുള്ള ശതമാനം

ഉദാഹരണം: 243, 75%, 59%

ഔട്ട്പുട്ടുകൾ

പ്രധാന ഔട്ട്പുട്ട് ഒരു HEX കളർ കോഡ് ആണ് (ഉദാ: #4f46e5). നിറത്തിന്റെ RGB ചാനലുകൾ ഓരോന്നും ഒരൊറ്റ ഹെക്സ് അക്കത്തിൽ പ്രതിനിധീകരിക്കാവുന്നതാണെങ്കിൽ, മൂന്ന് അക്ക ഷോർട്ട്ഹാൻഡ് രൂപവും (ഉദാ: #abc) ടൂൾ കാണിച്ചേക്കാം. മറ്റെല്ലാ കളർ ഫീൽഡുകളും (RGB, HSV, CMYK, LAB) ഒരേ സമയം അപ്ഡേറ്റ് ചെയ്യപ്പെടും.

നിയമങ്ങളും അതിർത്തി കേസുകളും

ഏതെങ്കിലും ഫീൽഡ് എഡിറ്റ് ചെയ്യുന്നത് മറ്റെല്ലാ ഫീൽഡുകളും തൽക്ഷണം അപ്ഡേറ്റ് ചെയ്യും.

HSL മൂല്യങ്ങൾ സാധുവായ പരിധിക്ക് പുറത്താണെങ്കിൽ (ഹ്യൂ 0–360, സാച്ചുറേഷൻ 0–100%, ലൈറ്റ്നസ് 0–100%) അല്ലെങ്കിൽ ശരിയായ ഫോർമാറ്റിൽ അല്ലെങ്കിൽ, ടൂൾ ഈ പിശക് സന്ദേശം കാണിക്കും:

"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."

HSL-ൽ നിന്ന് HEX-ലേക്കുള്ള പരിവർത്തനം എല്ലായ്പ്പോഴും ദൃശ്യമായ RGB പരിധിക്കുള്ളിൽ തന്നെ തുടരും; ഈ പരിവർത്തനത്തിന് ഗാമറ്റിന് പുറത്തുള്ള നിറങ്ങൾ ക്രമീകരിക്കുന്നില്ല.

CMYK ഔട്ട്പുട്ട് (ഒപ്പം കാണിക്കുന്നത്) ഒരു ഓൺ-സ്ക്രീൻ എസ്റ്റിമേറ്റ് മാത്രമാണ്, പ്രൊഫഷണൽ പ്രിന്റിംഗ് മൂല്യങ്ങളിൽ നിന്ന് വ്യത്യാസപ്പെട്ടേക്കാം.

എല്ലാ പ്രോസസ്സിംഗും നിങ്ങളുടെ ബ്രൗസറിൽ നേരിട്ട് നടക്കുന്നു; നിങ്ങൾ നൽകുന്ന ഒന്നും അപ്ലോഡ് ചെയ്യപ്പെടുന്നില്ല.

HSL കളർ മോഡൽ മനസ്സിലാക്കൽ

HSL എന്നാൽ Hue, Saturation, Lightness എന്നാണ്. മനുഷ്യർ നിറത്തെ എങ്ങനെ മനസ്സിലാക്കുന്നു എന്നതിനോട് അടുത്ത് പറ്റിനിൽക്കുന്ന ഒരു മോഡലാണിത്.

• Hue (ഹ്യൂ): നിറത്തിന്റെ അടിസ്ഥാന സ്വഭാവം — ചുവപ്പോ, നീലയോ, പച്ചയോ. 0° ചുവപ്പ്, 120° പച്ച, 240° നീല എന്നിങ്ങനെ കളർ വീലിൽ 0–360 ഡിഗ്രികളിലാണ് അളക്കുന്നത്.
• Saturation (സാച്ചുറേഷൻ): നിറത്തിന്റെ തീവ്രത അല്ലെങ്കിൽ ശുദ്ധത. 0% എന്നാൽ ഗ്രേ (നിറമില്ല), 100% എന്നാൽ പൂർണ്ണ നിറം.
• Lightness (ലൈറ്റ്നസ്): നിറത്തിന്റെ തെളിച്ചം അല്ലെങ്കിൽ ഇരുട്ട്. 0% എന്നാൽ കറുപ്പ്, 100% എന്നാൽ വെളുപ്പ്, 50% എന്നാൽ "സാധാരണ" നിറം.

HSL-ന്റെ പ്രധാന ഗുണം ലൈറ്റ്നസ് മാത്രം മാറ്റി നിറത്തിന്റെ ഹ്യൂവും സാച്ചുറേഷനും നിലനിർത്താൻ കഴിയും എന്നതാണ്. WCAG കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾക്കായി നിറങ്ങൾ ക്രമീകരിക്കുമ്പോൾ ഇത് വളരെ ഉപയോഗപ്രദമാണ്.

ഹെക്സാഡെസിമൽ കളർ കോഡുകളുടെ ഘടന

HEX കോഡുകൾ RGB മൂല്യങ്ങളെ ഹെക്സാഡെസിമൽ (ബേസ്-16) സംഖ്യകളായി പ്രതിനിധീകരിക്കുന്നു.

ആറ് അക്ക നൊട്ടേഷൻ

സാധാരണ HEX കോഡിന് #RRGGBB എന്ന ഘടനയുണ്ട്, ഇവിടെ:

• RR റെഡ് ചാനലിനെ (0–255) പ്രതിനിധീകരിക്കുന്നു
• GG ഗ്രീൻ ചാനലിനെ (0–255) പ്രതിനിധീകരിക്കുന്നു
• BB ബ്ലൂ ചാനലിനെ (0–255) പ്രതിനിധീകരിക്കുന്നു

ഉദാഹരണത്തിന്, #FF0000 എന്നാൽ ചുവപ്പ് (റെഡ്=255, ഗ്രീൻ=0, ബ്ലൂ=0).

മൂന്ന് അക്ക ഷോർട്ട്ഹാൻഡ്

ഓരോ RGB ചാനലും 0–255-ന് പകരം 0–15 (0x0–0xF) പരിധിയിലാണെങ്കിൽ, മൂന്ന് അക്ക രൂപം ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്:

• #F00 എന്നാൽ #FF0000 (ചുവപ്പ്)
• #ABC എന്നാൽ #AABBCC
• #369 എന്നാൽ #336699

ഇത് CSS-ൽ സംക്ഷിപ്തമായി നിറങ്ങൾ എഴുതാൻ സഹായിക്കുന്നു.

കേസ് സെൻസിറ്റിവിറ്റി

HEX കോഡുകൾ കേസ് സെൻസിറ്റീവ് അല്ല. #FF0000, #ff0000, #Ff0000 എന്നിവയെല്ലാം ഒരേ നിറമാണ്. എന്നാൽ മിക്ക ഡിസൈൻ ടൂളുകളും വലിയ അക്ഷരങ്ങളാണ് ഉപയോഗിക്കുന്നത്.

HSL-ൽ നിന്ന് HEX-ലേക്കുള്ള പരിവർത്തന അൽഗോരിതം

പരിവർത്തനം രണ്ട് ഘട്ടങ്ങളിലായാണ് നടക്കുന്നത്:

ഘട്ടം 1: HSL-ൽ നിന്ന് RGB-ലേക്ക്

HSL മൂല്യങ്ങളിൽ നിന്ന് RGB മൂല്യങ്ങൾ കണ്ടെത്താൻ ഈ ഫോർമുലകൾ ഉപയോഗിക്കുന്നു:

1. H-നെ 0–360-ൽ നിന്ന് 0–1 പരിധിയിലേക്ക് മാറ്റുക
2. S, L എന്നിവ ഇതിനകം 0–1 പരിധിയിൽ ആണെങ്കിൽ, 100 കൊണ്ട് ഹരിക്കുക
3. ഇടനില മൂല്യങ്ങൾ കണ്ടെത്തുക:
   • a = S * min(L, 1-L)
   • f(n) = L - a * max(-1, min(k-3, 9-k, 1)) എവിടെ k = (n + H*12) % 12
4. f(0), f(8), f(4) എന്നിവ യഥാക്രമം R, G, B ആണ്

ഘട്ടം 2: RGB-ൽ നിന്ന് HEX-ലേക്ക്

ഓരോ RGB മൂല്യവും (0–255) ഹെക്സാഡെസിമലിലേക്ക് മാറ്റുക:

1. മൂല്യത്തെ 16 കൊണ്ട് ഹരിച്ച് ആദ്യ ഹെക്സ് അക്കം കണ്ടെത്തുക (ഘാതകം)
2. ശിഷ്ടത്തിൽ നിന്ന് രണ്ടാം ഹെക്സ് അക്കം കണ്ടെത്തുക
3. മൂന്ന് ജോഡി ഹെക്സ് അക്കങ്ങൾ ചേർത്ത് #RRGGBB രൂപീകരിക്കുക

ഉദാഹരണം: R=79, G=70, B=229 എങ്കിൽ:

• 79 → 0x4F → 4F
• 70 → 0x46 → 46
• 229 → 0xE5 → E5
• ഫലം: #4F46E5

പ്രായോഗിക ഉപയോഗ കേസുകൾ

ഡിസൈനർമാർക്ക്

HSL-ൽ കളർ പാലറ്റുകൾ നിർമ്മിക്കുന്ന ഡിസൈനർമാർക്ക് കോഡിലോ ഡിസൈൻ ടൂളുകളിലോ നടപ്പിലാക്കാൻ HEX കോഡുകൾ ആവശ്യമാണ്. ലൈറ്റ്നസ് മാത്രം മാറ്റി ഒരേ ഹ്യൂവിന്റെ വ്യത്യസ്ത ഷേഡുകൾ സൃഷ്ടിക്കുന്നത് വളരെ എളുപ്പമാണ്.

ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർമാർക്ക്

Figma, Sketch പോലുള്ള ഡിസൈൻ ഫയലുകളിൽ നിന്ന് HSL മൂല്യങ്ങൾ ലഭിക്കുമ്പോൾ, അവ CSS HEX പ്രോപ്പർട്ടികളിലേക്ക് വിവർത്തനം ചെയ്യേണ്ടതുണ്ട്. ഈ ടൂൾ ആ ജോലി തൽക്ഷണം ചെയ്യുന്നു.

ആക്സസിബിലിറ്റിക്കായി

WCAG കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾക്കായി ലൈറ്റ്നസ് ക്രമീകരിക്കുമ്പോൾ, HSL മോഡൽ വളരെ ഉപയോഗപ്രദമാണ്. ലൈറ്റ്നസ് മാത്രം മാറ്റി ഹ്യൂവും സാച്ചുറേഷനും നിലനിർത്താൻ കഴിയും, തുടർന്ന് HEX-ലേക്ക് പരിവർത്തനം ചെയ്യാം.

പൊതുവായ തെറ്റുകളും അവ ഒഴിവാക്കാനുള്ള വഴികളും

തെറ്റ് 1: ശതമാന ചിഹ്നം വിട്ടുകളയൽ

75 എന്നത് 75% അല്ല. ശതമാന ചിഹ്നം (%) നിർബന്ധമാണ്. ഉദാഹരണം: 243, 75, 59 എന്നത് തെറ്റാണ്; 243, 75%, 59% എന്ന് നൽകണം.

തെറ്റ് 2: ഹ്യൂ പരിധി കവിയൽ

ഹ്യൂ 0–360 ഡിഗ്രി പരിധിയിൽ ആയിരിക്കണം. 400 അല്ലെങ്കിൽ -20 പോലുള്ള മൂല്യങ്ങൾ സാധുവല്ല.

തെറ്റ് 3: ഷോർട്ട്ഹാൻഡ് HEX-ന്റെ തെറ്റിദ്ധാരണ

മൂന്ന് അക്ക HEX കോഡ് (#ABC) എന്നത് #AABBCC-യ്ക്ക് തുല്യമാണ്, #A0B0C0-യ്ക്കല്ല. ഓരോ അക്കവും ഇരട്ടിയാക്കണം.

തെറ്റ് 4: CSS-ൽ ആൽഫയില്ലായ്മ

ആറ് അക്ക HEX-ന് ആൽഫ ചാനൽ ഇല്ല. നിങ്ങൾക്ക് സുതാര്യത ആവശ്യമുണ്ടെങ്കിൽ, എട്ട് അക്ക HEX (#RRGGBBAA) അല്ലെങ്കിൽ rgba() ഉപയോഗിക്കുക.

പതിവ് ചോദ്യങ്ങൾ (FAQ)

ചോദ്യം 1: HSL-ൽ നിന്ന് HEX-ലേക്ക് പരിവർത്തനം നഷ്ടമില്ലാത്തതാണോ? ഉത്തരം: അതെ, sRGB ഗാമറ്റിനുള്ളിൽ ഇത് പൂർണ്ണമായും നഷ്ടമില്ലാത്തതാണ്. LAB അല്ലെങ്കിൽ CMYK പരിവർത്തനങ്ങളിൽ നിന്ന് വ്യത്യസ്തമായി, ഇവിടെ ഗാമറ്റിന് പുറത്തുള്ള നിറങ്ങൾ ക്രമീകരിക്കുന്നില്ല.

ചോദ്യം 2: എനിക്ക് HSL-ൽ നിന്ന് നേരിട്ട് CMYK-ലേക്ക് പരിവർത്തനം ചെയ്യാൻ കഴിയുമോ? ഉത്തരം: ഈ ടൂൾ HSL-ൽ നിന്ന് HEX-ലേക്കും അതോടൊപ്പം CMYK-ലേക്കും പരിവർത്തനം ചെയ്യുന്നു, എന്നാൽ CMYK ഔട്ട്പുട്ട് ഒരു ഓൺ-സ്ക്രീൻ എസ്റ്റിമേറ്റ് മാത്രമാണ്. പ്രൊഫഷണൽ പ്രിന്റിംഗ് മൂല്യങ്ങളിൽ നിന്ന് ഇത് വ്യത്യാസപ്പെട്ടേക്കാം.

ചോദ്യം 3: HSL മൂല്യങ്ങൾ സാധുവായ പരിധിക്ക് പുറത്താണെങ്കിൽ എന്ത് സംഭവിക്കും? ഉത്തരം: ടൂൾ ഈ പിശക് സന്ദേശം കാണിക്കും: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%." നിങ്ങൾ ശരിയായ ഫോർമാറ്റിൽ മൂല്യങ്ങൾ നൽകുന്നത് വരെ മറ്റ് ഫീൽഡുകൾ അപ്ഡേറ്റ് ചെയ്യപ്പെടില്ല.

ചോദ്യം 4: ഈ ടൂൾ എന്റെ ഡാറ്റ സംഭരിക്കുമോ? ഉത്തരം: ഇല്ല. എല്ലാ പ്രോസസ്സിംഗും നിങ്ങളുടെ ബ്രൗസറിൽ നേരിട്ട് നടക്കുന്നു. നിങ്ങൾ നൽകുന്ന ഒന്നും സെർവറിലേക്ക് അയയ്ക്കുകയോ സംഭരിക്കുകയോ ചെയ്യപ്പെടുന്നില്ല.

ചോദ്യം 5: HEX കോഡിന് എട്ട് അക്ക രൂപം ഉപയോഗിക്കാമോ? ഉത്തരം: അതെ, എട്ട് അക്ക HEX (#RRGGBBAA) ആൽഫ ചാനലിനെ (സുതാര്യത) പ്രതിനിധീകരിക്കുന്നു. എന്നാൽ ഈ ടൂളിന്റെ പ്രാഥമിക ഔട്ട്പുട്ട് ആറ് അക്ക HEX ആണ്.

ചോദ്യം 6: HSL-നെ അപേക്ഷിച്ച് HEX-ന്റെ പരിമിതികൾ എന്തൊക്കെയാണ്? ഉത്തരം: HEX-ന് ലൈറ്റ്നസ് അല്ലെങ്കിൽ സാച്ചുറേഷൻ പോലുള്ള ഒരു "മനുഷ്യ-സൗഹൃദ" അളവുകോലും ഇല്ല. നിറത്തിലെ മാറ്റങ്ങൾ മനസ്സിലാക്കാൻ HSL കൂടുതൽ എളുപ്പമാണ്. കൂടാതെ, ആറ് അക്ക HEX-ന് ആൽഫ ചാനൽ ഇല്ല.