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

HEX മുതൽ HSL വരെ: എന്തുകൊണ്ട് ഈ പരിവർത്തനം പ്രധാനമാണ്

ഈ പേജിൽ നിങ്ങൾ ഒരു ഹെക്സ് കളർ കോഡ് (#1E90FF പോലെയുള്ള ആറ് അക്കങ്ങൾ അല്ലെങ്കിൽ #abc പോലെയുള്ള മൂന്ന് അക്കങ്ങൾ) നൽകിയാൽ, അതിന് തുല്യമായ HSL മൂല്യം (hue ഡിഗ്രിയിലും, saturation, lightness ശതമാനത്തിലും) ഉടനടി ലഭിക്കും. HSL രൂപീകരണം മനുഷ്യന്റെ യുക്തിക്കും ചിന്തയ്ക്കും വേണ്ടിയാണ് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. അതിനാൽ, ഒരേ hue നിലനിർത്തിക്കൊണ്ട് lightness അല്ലെങ്കിൽ saturation ക്രമീകരിക്കുന്നത് വളരെ എളുപ്പമാണ്. അതേ സമയം, പേജ് നിറത്തെ മറ്റെല്ലാ പിന്തുണയ്ക്കുന്ന ഫോർമാറ്റുകളിലും (RGB, HSV, CMYK, LAB) പ്രദർശിപ്പിക്കുന്നു. ആവശ്യമുള്ള ഏത് ഫോർമാറ്റും നിങ്ങൾക്ക് പകർത്തിയെടുക്കാം.

എന്താണ് ഈ പേജിനെ വ്യത്യസ്തമാക്കുന്നത്? HEX എന്നത് അസംസ്കൃതമായ RGB നൊട്ടേഷൻ ആണ് – ആറ് ഹെക്സാഡെസിമൽ അക്കങ്ങൾ (അല്ലെങ്കിൽ മൂന്ന് അക്കങ്ങളുടെ ചുരുക്കെഴുത്ത്) ചുവപ്പ്, പച്ച, നീല മൂല്യങ്ങളെ നേരിട്ട് എൻകോഡ് ചെയ്യുന്നു. CSS, ഡിസൈൻ ടൂളുകളിൽ ഇത് ഒതുക്കമുള്ളതും വ്യാപകമായി ഉപയോഗിക്കുന്നതുമാണ്, പക്ഷേ മനുഷ്യന് മനസ്സിലാക്കാൻ കഴിയുന്ന രീതിയിലുള്ള ക്രമീകരണങ്ങൾക്ക് ഇത് അവബോധജന്യമല്ല. HSL എന്നത് മനുഷ്യന്റെ യുക്തിക്ക് വേണ്ടി നിർമ്മിച്ചതാണ് – hue ഒരു കളർ വീലിൽ ഡിഗ്രിയിലും (0–360), saturation, lightness എന്നിവ ശതമാനത്തിലും അളക്കുന്നു. lightness മാറ്റുമ്പോൾ മാത്രം hue മാറ്റമില്ലാതെ തുടരും. അതുകൊണ്ടാണ് HSL കളർ പാലറ്റുകളും തീം സിസ്റ്റങ്ങളും സൃഷ്ടിക്കുന്നതിനുള്ള ഏറ്റവും പ്രിയപ്പെട്ട ഫോർമാറ്റ് ആയിരിക്കുന്നത്. ആൽഫ ചാനൽ ഇല്ല – സ്റ്റാൻഡേർഡ് HEX (ആറ് അക്കം അല്ലെങ്കിൽ മൂന്ന് അക്കം) ട്രാൻസ്പരൻസി വിവരങ്ങൾ വഹിക്കുന്നില്ല, HSL ലും ആൽഫ ഘടകം ഉൾപ്പെടുന്നില്ല. പരിവർത്തനം എല്ലായ്പ്പോഴും പൂർണ്ണമായും അതാര്യമായ നിറങ്ങൾ കൈകാര്യം ചെയ്യുന്നു.

ഇൻപുട്ടും ഔട്ട്പുട്ടും: സാധുതയും സ്വഭാവവും

ഇൻപുട്ട് – ഒരു ഹെക്സ് കളർ കോഡ്, ആറ് അക്കങ്ങൾ (ഉദാ: #4f46e5) അല്ലെങ്കിൽ മൂന്ന് അക്കങ്ങളുടെ ചുരുക്കെഴുത്ത് (ഉദാ: #abc). # ചിഹ്നത്തോടെയോ അല്ലാതെയോ നൽകാം. ഔട്ട്പുട്ട് – HSL തുല്യത (hue 0–360, saturation 0–100%, lightness 0–100%) കൂടാതെ HEX, RGB, HSV, CMYK, LAB ഫോർമാറ്റുകളിലെ നിറത്തിന്റെ പ്രാതിനിധ്യവും. നിങ്ങൾ എഡിറ്റ് ചെയ്യുമ്പോൾ എല്ലാ ഫീൽഡുകളും ഒരേസമയം അപ്ഡേറ്റ് ചെയ്യപ്പെടും.

നിയമങ്ങളും എഡ്ജ് കേസുകളും

• സാധുവായ ആറ് അക്കങ്ങളുടെയോ മൂന്ന് അക്കങ്ങളുടെയോ ഹെക്സ് കോഡുകൾ മാത്രമേ പേജ് സ്വീകരിക്കൂ.
• അസാധുവായ ഒരു മൂല്യം നൽകിയാൽ, ഈ പിശക് കാണിക്കും: “Enter a hex color like #4f46e5 or #abc.”
• നിങ്ങൾ മറ്റൊരു കളർ സ്പേസിലേക്ക് (ഉദാ: LAB അല്ലെങ്കിൽ CMYK) മാറുകയും ദൃശ്യമായ RGB ഗാമറ്റിന് പുറത്തുള്ള ഒരു മൂല്യം നൽകുകയും ചെയ്താൽ, നിറം ഏറ്റവും അടുത്തുള്ള പ്രദർശിപ്പിക്കാവുന്ന നിറത്തിലേക്ക് ക്രമീകരിക്കപ്പെടും; ആ നിറം തിരികെ ഹെക്സിലേക്ക് മാറ്റുമ്പോൾ നേരിയ വ്യത്യാസം ഉണ്ടായേക്കാം.
• CMYK മൂല്യങ്ങൾ സ്ക്രീനിലെ ഏകദേശ കണക്കുകളാണ്. പ്രൊഫഷണൽ പ്രിന്റിനായി കാലിബ്രേഷൻ കൂടാതെ ഇവ ഉപയോഗിക്കരുത്.
• എല്ലാ പരിവർത്തനങ്ങളും നിങ്ങളുടെ ബ്രൗസറിനുള്ളിൽ തന്നെ നടക്കുന്നു – നിങ്ങൾ ടൈപ്പ് ചെയ്യുന്ന ഒന്നും അപ്ലോഡ് ചെയ്യപ്പെടുകയോ സൂക്ഷിക്കപ്പെടുകയോ ചെയ്യുന്നില്ല.

HEX കളർ കോഡിന്റെ ഘടന: അടിസ്ഥാനങ്ങൾ

ഒരു ഹെക്സ് കളർ കോഡ്, RGB കളർ മോഡലിനെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. ഓരോ ജോഡി ഹെക്സാഡെസിമൽ അക്കങ്ങളും 0-255 (0x00-0xFF) വരെയുള്ള ഒരു ദശാംശ മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഉദാഹരണത്തിന്, #4f46e5 എന്നത് R=79 (0x4F), G=70 (0x46), B=229 (0xE5) എന്നിങ്ങനെ വിഘടിപ്പിക്കാം. മൂന്ന് അക്കങ്ങളുടെ ചുരുക്കെഴുത്ത് (ഉദാ: #abc) ആറ് അക്കങ്ങളുടെ ഒരു ചുരുക്കിയ രൂപമാണ്. ഇത് #aabbcc ആയി വികസിപ്പിക്കുന്നു. അതായത്, ഓരോ അക്കവും ഇരട്ടിയാക്കപ്പെടുന്നു. #abc എന്നത് #aabbcc ന് തുല്യമാണ്. ഇത് വളരെ കുറച്ച് നിറങ്ങളെ മാത്രമേ പ്രതിനിധീകരിക്കുന്നുള്ളൂ (4096 നിറങ്ങൾ, 16^3), ആറ് അക്കങ്ങളുടെ ഫോർമാറ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ (16,777,216 നിറങ്ങൾ, 256^3).

HSL ഫോർമാറ്റ്: Hue, Saturation, Lightness

HSL (Hue, Saturation, Lightness) എന്നത് RGB മോഡലിന്റെ ഒരു സിലിണ്ടർ പ്രതിനിധാനമാണ്.

• Hue (നിറം): 0° മുതൽ 360° വരെയുള്ള ഒരു കളർ വീലിൽ അളക്കുന്നു. 0°/360° ചുവപ്പ്, 120° പച്ച, 240° നീല.
• Saturation (പൂരിതത്വം): 0% മുതൽ 100% വരെയുള്ള ശതമാനം. 0% എന്നാൽ ചാരനിറം (നിറമില്ല), 100% എന്നാൽ പൂർണ്ണ നിറം.
• Lightness (തെളിച്ചം): 0% മുതൽ 100% വരെയുള്ള ശതമാനം. 0% എന്നാൽ കറുപ്പ്, 100% എന്നാൽ വെളുപ്പ്. 50% എന്നത് "സാധാരണ" നിറമാണ്.

HSL-ന്റെ പ്രധാന നേട്ടം അതിന്റെ അവബോധജന്യതയാണ്. ഒരു നിറത്തിന്റെ "ഇരുണ്ട" അല്ലെങ്കിൽ "ഇളം" പതിപ്പ് ലഭിക്കാൻ, നിങ്ങൾ lightness മൂല്യം മാറ്റിയാൽ മതി. മറ്റ് പാരാമീറ്ററുകൾ മാറ്റേണ്ടതില്ല. ഉദാഹരണത്തിന്, #4f46e5 (HSL: 243°, 76%, 58%) എന്നതിന്റെ 20% light പതിപ്പ് ലഭിക്കാൻ, hue ഉം saturation ഉം അതേപടി നിർത്തി lightness 20% ആക്കുക.

RGB-യിൽ നിന്ന് HSL-ലേക്ക്: പരിവർത്തന ഗണിതം

പരിവർത്തനത്തിന് ഒരു സ്റ്റാൻഡേർഡ് ഗണിത അൽഗോരിതം ഉണ്ട്. ഇത് RGB മൂല്യങ്ങളെ (0-255 പരിധിയിൽ) 0-1 ശ്രേണിയിലേക്ക് നോർമലൈസ് ചെയ്ത് ആരംഭിക്കുന്നു.

1. R, G, B മൂല്യങ്ങളിൽ നിന്ന് ഏറ്റവും വലുതും ചെറുതുമായ മൂല്യങ്ങൾ കണ്ടെത്തുക. max = max(R, G, B), min = min(R, G, B).
2. Lightness (L): L = (max + min) / 2
3. Saturation (S):
   • max = min ആണെങ്കിൽ, S = 0 (നിറമില്ല).
   • അല്ലെങ്കിൽ, diff = max - min. L ≤ 0.5 ആണെങ്കിൽ, S = diff / (max + min). L > 0.5 ആണെങ്കിൽ, S = diff / (2 - max - min).
4. Hue (H):
   • max = min ആണെങ്കിൽ, H = 0.
   • max = R ആണെങ്കിൽ, H = (G - B) / diff.
   • max = G ആണെങ്കിൽ, H = 2 + (B - R) / diff.
   • max = B ആണെങ്കിൽ, H = 4 + (R - G) / diff.
   • തത്ഫലമായുണ്ടാകുന്ന H മൂല്യത്തെ 60 കൊണ്ട് ഗുണിച്ച് ഡിഗ്രിയിലേക്ക് മാറ്റുക. H < 0 ആണെങ്കിൽ, 360 ചേർക്കുക.

ഈ അൽഗോരിതം, HSL-നെ RGB-യുടെ ഒരു രേഖീയ പരിവർത്തനമാക്കി മാറ്റുന്നു. ഇത് പൂർണ്ണമായും കൃത്യവും വിപരീതവുമാണ് (റൗണ്ടിംഗ് പിശകുകൾ മാറ്റിനിർത്തിയാൽ).

HSL-ന്റെ പ്രായോഗിക ഉപയോഗങ്ങൾ

• ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർമാർ: ഒരു ഡിസൈൻ മോക്ക്അപ്പിൽ നിന്നുള്ള ഹെക്സ് നിറത്തെ HSL ലേക്ക് മാറ്റി, ഹോവർ സ്റ്റേറ്റുകൾക്കും തീം വേരിയന്റുകൾക്കുമായി lightness എളുപ്പത്തിൽ ക്രമീകരിക്കാൻ കഴിയും. CSS-ൽ, hsl(243, 76%, 58%) എന്ന് നേരിട്ട് എഴുതാം.
• UI/UX ഡിസൈൻമാർ: Hue, Saturation, Lightness എന്നിവയിലൂടെ ചിന്തിക്കുന്ന ഡിസൈനർമാർക്ക്, HEX-ൽ നൽകിയിരിക്കുന്ന ഒരു ബ്രാൻഡ് നിറവുമായി പൊരുത്തപ്പെടാൻ HSL ഉപയോഗിക്കാം.
• കളർ പാലറ്റ് നിർമ്മാതാക്കൾ: Hue അല്ലെങ്കിൽ Saturation മാത്രം ട്വീക്ക് ചെയ്തുകൊണ്ട് കോംപ്ലിമെന്ററി, അനലോഗസ് അല്ലെങ്കിൽ മോണോക്രോമാറ്റിക് സ്കീമുകൾ സൃഷ്ടിക്കുന്നത് HSL വളരെ ലളിതമാക്കുന്നു.
• വെബ് ആക്സസിബിലിറ്റി ഓഡിറ്റർമാർ: കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾ പരിശോധിക്കുമ്പോൾ, raw hex അല്ലെങ്കിൽ RGB-യെ അപേക്ഷിച്ച് HSL-നെക്കുറിച്ച് ചിന്തിക്കുന്നത് എളുപ്പമാണ്. ഉദാഹരണത്തിന്, WCAG കംപ്ലയൻസിനായി കോൺട്രാസ്റ്റ് വർദ്ധിപ്പിക്കുമ്പോൾ, Hue നിലനിർത്തിക്കൊണ്ട് Lightness ക്രമീകരിക്കാം.

HSL ഉം HSV ഉം തമ്മിലുള്ള വ്യത്യാസം

ഈ രണ്ട് മോഡലുകളും Hue ഉപയോഗിക്കുന്നു, എന്നാൽ Saturation, Brightness/Value, Lightness എന്നിവയുടെ നിർവചനങ്ങൾ വ്യത്യസ്തമാണ്.

HSV-യിൽ, Lightness-ന് പകരം Value (തെളിച്ചം) ആണുള്ളത്. Value-ൽ, വെളുപ്പ് അല്ലെങ്കിൽ കറുപ്പ് ചേർക്കുന്നതിനുപകരം, നിറത്തിൽ നിന്ന് കറുപ്പ് നീക്കം ചെയ്താണ് ഇളം നിറങ്ങൾ ലഭിക്കുന്നത്. ഇത് HSL-നെ അപേക്ഷിച്ച് അൽപ്പം വ്യത്യസ്തമായ ഒരു ഗ്രാഫിക്കൽ പ്രാതിനിധ്യം നൽകുന്നു.

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

1. എന്തുകൊണ്ടാണ് HSL-ന് ആൽഫ ചാനൽ ഇല്ലാത്തത്? HSL എന്നത് RGB-യുടെ ഒരു ഗണിത പരിവർത്തനം മാത്രമാണ്. സ്റ്റാൻഡേർഡ് RGB, HSL എന്നിവയിൽ ആൽഫ (അതായത്, അതാര്യത) ഉൾപ്പെടുന്നില്ല. അതിനാൽ, HSL-ന് ആൽഫ ചാനൽ ഇല്ലാത്തത് സ്വാഭാവികമാണ്. CSS-ൽ, HSLA (HSL with Alpha) എന്ന ഒരു വകഭേദം ഉണ്ട്.

2. #abc പോലുള്ള മൂന്ന് അക്കങ്ങളുടെ ഹെക്സ് എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്? ഇത് ആറ് അക്കങ്ങളുടെ ഒരു ചുരുക്കിയ രൂപമാണ്. ഓരോ അക്കവും ഇരട്ടിയാക്കപ്പെടുന്നു. ഉദാഹരണത്തിന്, #abc എന്നത് #aabbcc ആയി മാറുന്നു. ഇത് വളരെ കുറച്ച് നിറങ്ങളെ മാത്രമേ പ്രതിനിധീകരിക്കുന്നുള്ളൂ (4096).

3. CMYK-യിൽ നിന്ന് HEX-ലേക്ക് മാറ്റുമ്പോൾ നിറത്തിൽ വ്യത്യാസം വരുന്നത് എന്തുകൊണ്ട്? CMYK ഒരു സബ്ട്രാക്റ്റീവ് കളർ മോഡലാണ് (പ്രിന്റിന് വേണ്ടി), അതേസമയം RGB/HEX ഒരു അഡിറ്റീവ് മോഡലാണ് (സ്ക്രീനുകൾക്ക് വേണ്ടി). രണ്ട് മോഡലുകളും വ്യത്യസ്ത ഗാമറ്റുകൾ (നിറങ്ങളുടെ പരിധി) ഉപയോഗിക്കുന്നു. RGB ഗാമറ്റിന് പുറത്തുള്ള CMYK നിറങ്ങൾ, സ്ക്രീനിൽ ഏറ്റവും അടുത്തുള്ള നിറത്തിലേക്ക് ക്രമീകരിക്കപ്പെടും. ഇത് കൃത്യമായ പൊരുത്തക്കേട് ഉണ്ടാക്കും.

4. HSL-നെ കുറിച്ചുള്ള എന്തെങ്കിലും പൊതുവായ തെറ്റിദ്ധാരണകൾ ഉണ്ടോ? ഏറ്റവും സാധാരണമായ തെറ്റിദ്ധാരണ, HSL-നെ HSV (HSB) മായി ആശയക്കുഴപ്പത്തിലാക്കുന്നതാണ്. HSL-ൽ Lightness 50% ആയിരിക്കുമ്പോൾ "സാധാരണ" നിറമാണ് ലഭിക്കുന്നത്. HSV-യിൽ, Value 100% ആയിരിക്കുമ്പോൾ പൂർണ്ണ നിറമാണ് ലഭിക്കുന്നത്. ഇത് ഒരേ നിറത്തിന് വ്യത്യസ്ത മൂല്യങ്ങൾ ലഭിക്കാൻ കാരണമാകും.

5. HEX-ൽ നിന്ന് HSL-ലേക്ക് മാറ്റുന്നതിന് എന്തെങ്കിലും പ്രത്യേക സോഫ്റ്റ്വെയർ ആവശ്യമുണ്ടോ? ഇല്ല. ഈ പേജ് തന്നെ ആ പരിവർത്തനം ചെയ്യുന്നു. കൂടാതെ, മിക്ക ആധുനിക ഗ്രാഫിക്സ് സോഫ്റ്റ്വെയറുകളും (Photoshop, GIMP, Figma) കളർ പിക്കറിൽ ഈ പരിവർത്തനം സ്വയം കാണിക്കുന്നു.