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

എന്തുകൊണ്ടാണ് ഈ പേജ് വ്യത്യസ്തമായിരിക്കുന്നത്

ഈ പേജ് ചെയ്യുന്ന ജോലി, നിങ്ങൾ സ്ക്രീനിൽ കാണുന്ന നിറങ്ങളുടെ ലോകത്തെ രണ്ട് പ്രധാന ഭാഷകളെ ബന്ധിപ്പിക്കുന്നതാണ്: ഹെക്സാഡെസിമൽ (base-16) എന്ന ഒതുക്കമുള്ള കോഡും, ഡിസ്പ്ലേകൾ നേരിട്ട് ഉപയോഗിക്കുന്ന ദശാംശ (base-10) RGB മൂല്യങ്ങളും. ഒറ്റനോട്ടത്തിൽ, #4f46e5 പോലുള്ള ഒരു ഹെക്സ് കോഡ് ഒരു നിറത്തിന്റെ 'ചുരുക്കെഴുത്ത്' പോലെയാണ്. എന്നാൽ, ഈ പേജ് നിങ്ങൾക്ക് മനസ്സിലാക്കിത്തരുന്നത്, ഈ ചുരുക്കെഴുത്ത് യഥാർത്ഥത്തിൽ മൂന്ന് അടിസ്ഥാന പ്രകാശകിരണങ്ങളുടെ (Red, Green, Blue) 0 മുതൽ 255 വരെയുള്ള കൃത്യമായ തീവ്രതാ നിലകളെയാണ് പ്രതിനിധീകരിക്കുന്നത് എന്നാണ്. ഹെക്സ് കോഡ് എന്നത്, ഈ മൂന്ന് 8-bit ചാനലുകളുടെ ഒരു ഒതുക്കമുള്ള പ്രതിനിധാനം മാത്രമാണ്, അതേ RGB സ്വഭാവം തന്നെയാണ് ഇവയ്ക്കും ഉള്ളത്. ഈ പേജിന്റെ പ്രത്യേകത, ഈ ഗണിത പരിവർത്തനം കൃത്യമായും പിഴവുകളില്ലാതെയും നിർവഹിക്കുക എന്നതാണ്. ഓരോ ഹെക്സ് ജോഡിയും 16-ന്റെ ഘാതങ്ങളാൽ ഗുണിച്ച് കൃത്യമായ പൂർണ്ണസംഖ്യാ RGB മൂല്യങ്ങൾ നൽകുന്നു. മറ്റ് പല പരിവർത്തന ഉപകരണങ്ങളിൽ നിന്നും വ്യത്യസ്തമായി, ഇവിടെ റൗണ്ടിംഗ് ഒന്നുമില്ല, നിറത്തിന്റെ ഗാമറ്റ് (gamut) ക്ലിപ്പിംഗും ഇല്ല. ഇത് ഒരു കൃത്യമായ, റിവേഴ്സിബിൾ ട്രാൻസ്ഫോർമേഷൻ ആണ്.

ഹെക്സാഡെസിമൽ നിറങ്ങൾ മനസ്സിലാക്കുക

നിങ്ങൾ #4f46e5 എന്ന കോഡ് ഇൻപുട്ട് ചെയ്യുമ്പോൾ, നിങ്ങൾ 16-അടിസ്ഥാനത്തിൽ (base-16) എഴുതിയ ഒരു നിറമാണ് നൽകുന്നത്. ഹെക്സാഡെസിമൽ സിസ്റ്റത്തിൽ, 0 മുതൽ 9 വരെയുള്ള സാധാരണ അക്കങ്ങളും, 10 മുതൽ 15 വരെയുള്ള മൂല്യങ്ങൾക്കായി A, B, C, D, E, F എന്നീ അക്ഷരങ്ങളും ഉപയോഗിക്കുന്നു. ആറ് അക്കങ്ങളുള്ള (#RRGGBB) ഒരു ഹെക്സ് കോഡ്, ആദ്യത്തെ രണ്ട് അക്കങ്ങൾ (RR) ചുവപ്പ് (Red), തുടർന്നുള്ള രണ്ട് അക്കങ്ങൾ (GG) പച്ച (Green), അവസാനത്തെ രണ്ട് അക്കങ്ങൾ (BB) നീല (Blue) എന്നിവയുടെ തീവ്രതയെ പ്രതിനിധീകരിക്കുന്നു. ഓരോ ജോഡിയും 0 മുതൽ 255 വരെയുള്ള ഒരു പൂർണ്ണസംഖ്യയെ പ്രതിനിധീകരിക്കുന്നു. ഉദാഹരണത്തിന്, #4f46e5 എന്നതിൽ, 4f എന്നത് 416 + 15 = 79 ആണ്. 46 എന്നത് 416 + 6 = 70, e5 എന്നത് 14*16 + 5 = 229 എന്നിങ്ങനെയാണ്. അതിനാൽ, RGB മൂല്യം (79, 70, 229) ആണ്. മൂന്ന് അക്കങ്ങളുള്ള ഒരു ഷോർട്ട്ഹാൻഡ് കോഡ് (#abc) നൽകുകയാണെങ്കിൽ, ഈ പേജ് അത് ആറ് അക്കങ്ങളായി വികസിപ്പിക്കുന്നു: ഓരോ അക്കവും ഇരട്ടിപ്പിക്കുന്നു (#aabbcc). മൂന്ന് അക്ക ഷോർട്ട്ഹാൻഡ് ഉപയോഗിച്ചും നിങ്ങൾക്ക് നിറങ്ങൾ പ്രകടിപ്പിക്കാം എന്നതാണ് ഇതിന്റെ പ്രത്യേകത. # എന്ന ഉപസർഗ്ഗം (prefix) നിർബന്ധമില്ല; കോഡ് ഉപസർഗ്ഗത്തോടെയോ അല്ലാതെയോ നൽകാം.

RGB ചാനലുകൾ എങ്ങനെ നിറങ്ങൾ സൃഷ്ടിക്കുന്നു

ഒരു കമ്പ്യൂട്ടർ സ്ക്രീനിൽ, ഓരോ പിക്സലും ചുവപ്പ്, പച്ച, നീല എന്നീ മൂന്ന് ലൈറ്റ് ഉറവിടങ്ങളുടെ സംയോജനമാണ്. ഇതിനെ അഡിറ്റീവ് കളർ മോഡൽ (additive color model) എന്ന് വിളിക്കുന്നു. ഈ മൂന്ന് നിറങ്ങളും പൂർണ്ണ തീവ്രതയിൽ (255) ചേരുമ്പോൾ, നമുക്ക് കിട്ടുന്നത് വെളുപ്പ് നിറമാണ്. മൂന്നും ഇല്ലെങ്കിൽ (0), കറുപ്പ്. RGB മൂല്യങ്ങൾ 0 മുതൽ 255 വരെയുള്ള സംഖ്യകളായതിനാൽ, ഓരോ ചാനലിനും 256 (2^8) സാധ്യമായ നിലകളുണ്ട്. അതിനാൽ, മൊത്തം 256 × 256 × 256 = 16,777,216 (ഏകദേശം 16.7 ദശലക്ഷം) നിറങ്ങൾ പ്രദർശിപ്പിക്കാൻ കഴിയും. ഈ പേജ്, നിങ്ങൾ നൽകുന്ന ഹെക്സ് കോഡിനെ ഈ മൂന്ന് നിറങ്ങളുടെ കൃത്യമായ അളവുകളായി വിഘടിപ്പിക്കുന്നു. ഉദാഹരണത്തിന്, #000000 (ഹെക്സ്) → (0, 0, 0) (RGB) കറുപ്പും, #FFFFFF → (255, 255, 255) വെളുപ്പും, #FF0000 → (255, 0, 0) ശുദ്ധമായ ചുവപ്പും, #00FF00 → (0, 255, 0) ശുദ്ധമായ പച്ചയും, #0000FF → (0, 0, 255) ശുദ്ധമായ നീലയും ആയി മാറുന്നു. ചാര നിറങ്ങൾക്ക്, Red, Green, Blue മൂന്നും ഒരേ മൂല്യമാണ്. #808080 → (128, 128, 128) ഇടത്തരം ചാരനിറം. ഈ പരിവർത്തനം കൃത്യമായി മനസ്സിലാക്കുന്നത്, ഒരു കളർ സ്കീം രൂപകൽപ്പന ചെയ്യുമ്പോഴോ, ആക്സസിബിലിറ്റിക്കായി കോൺട്രാസ്റ്റ് കണക്കാക്കുമ്പോഴോ വളരെ ഉപകാരപ്രദമാണ്.

ഹെക്സിനും RGB-ക്കും ഇടയിലുള്ള CSS വ്യത്യാസങ്ങൾ

വെബ് ഡെവലപ്മെന്റിൽ, നിങ്ങൾക്ക് പല സ്ഥലങ്ങളിലും ഹെക്സ് കോഡും RGB മൂല്യങ്ങളും കാണാം. CSS-ൽ, നിറം നിർവചിക്കാൻ രണ്ട് വഴികളുണ്ട്:

• color: #ff6600; - ഇത് ഒരു ഹെക്സാഡെസിമൽ കളർ കോഡാണ്.
• color: rgb(255, 102, 0); - ഇത് RGB കളർ ഫംഗ്ഷൻ ആണ്.

ബ്രൗസർ രണ്ടും ഒരേ നിറമായാണ് വ്യാഖ്യാനിക്കുന്നത്. ഹെക്സ് കോഡ് കൂടുതൽ ഒതുക്കമുള്ളതും (6 അക്ഷരങ്ങൾ, ഒരു #), പകർത്താനും ഓർമ്മിക്കാനും എളുപ്പവുമാണ്. എന്നാൽ, RGB മൂല്യങ്ങൾക്ക് ഗണിതശാസ്ത്രപരമായി കൈകാര്യം ചെയ്യാൻ എളുപ്പമാണ് എന്ന ഗുണമുണ്ട്. നിങ്ങൾ JavaScript-ൽ ഒരു canvas API-യിൽ നിറങ്ങൾ നിയന്ത്രിക്കുകയാണെങ്കിൽ, RGB അറേകളോ, അല്ലെങ്കിൽ rgba() (alpha ചേർത്ത്) ആണ് സാധാരണ ഉപയോഗിക്കുന്നത്. ഹെക്സ് കോഡ് അതിന് അനുയോജ്യമല്ലാത്തതിനാൽ, ഈ പരിവർത്തന പേജ് ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർമാർക്ക് വളരെ പ്രയോജനകരമാണ്. അവർക്ക് ഒരു ഡിസൈൻ മോക്കപ്പിൽ നിന്ന് ലഭിച്ച #1E90FF (ഡോഡ്ജർ ബ്ലൂ) പോലുള്ള ഒരു ഹെക്സ് മൂല്യം, rgb(30, 144, 255) എന്ന ഫോർമാറ്റിലേക്ക് എളുപ്പത്തിൽ മാറ്റാം.

കൃത്യതയും പിശക് കൈകാര്യം ചെയ്യലും

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

നിറങ്ങളുടെ മറ്റ് ഫോർമാറ്റുകളും സമന്വയ പ്രവർത്തനവും

ഈ പേജ്, ഒരു നിറത്തിന്റെ ഒന്നിലധികം ഫോർമാറ്റുകൾ (HSL, HSV, CMYK, LAB) ഒരേ സമയം പ്രദർശിപ്പിക്കുന്നു. നിങ്ങൾ ഹെക്സ് ഫീൽഡിൽ ഒരു മൂല്യം മാറ്റിയാൽ, മറ്റ് എല്ലാ ഫീൽഡുകളും (RGB ഉൾപ്പെടെ) തൽക്ഷണം അപ്ഡേറ്റ് ചെയ്യപ്പെടും. ഇത് വിവിധ കളർ സ്പേസുകൾ തമ്മിലുള്ള ബന്ധം മനസ്സിലാക്കാൻ സഹായിക്കുന്നു. ഉദാഹരണത്തിന്, #4f46e5 എന്നതിന്റെ HSL മൂല്യം (hue, saturation, lightness) എങ്ങനെയാണ് കണക്കാക്കുന്നത് എന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും. പ്രിന്റ് ഡിസൈനിന് ആവശ്യമായ CMYK (Cyan, Magenta, Yellow, Key/Black) മൂല്യങ്ങളും, മനുഷ്യന്റെ കാഴ്ചയുമായി കൂടുതൽ അടുത്ത് ബന്ധപ്പെട്ട LAB (CIELAB) മൂല്യങ്ങളും ഈ രീതിയിൽ നേരിട്ട് ലഭിക്കും. ഈ സമന്വയ പ്രവർത്തനം ഒരു വിഷ്വൽ ഡിസൈനർക്കോ, കളർ കോറക്ഷൻ ജീവനക്കാർക്കോ വളരെ ഉപയോഗപ്രദമാണ്. അവർക്ക് ഒരു നിറത്തെക്കുറിച്ചുള്ള സമഗ്രമായ വിവരം ഒറ്റ നോട്ടത്തിൽ ലഭിക്കും.

വെബ് ഡെവലപ്മെന്റിൽ ഹെക്സിന്റെ പങ്കും പ്രസക്തിയും

ഹെക്സാഡെസിമൽ കളർ കോഡുകൾ വെബിൽ ഇത്ര വ്യാപകമായി ഉപയോഗിക്കപ്പെടുന്നതിന് ചരിത്രപരമായ കാരണങ്ങളുണ്ട്. ആദ്യകാല വെബ് ബ്രൗസറുകളും, ഡിസൈൻ ടൂളുകളും, ഹെക്സ് കോഡുകളെയാണ് പ്രധാനമായും പിന്തുണച്ചത്. ഒരു വെബ്സൈറ്റിന്റെ CSS-ൽ ഒരു നിറം നിർവചിക്കുമ്പോൾ, #ff6600 എന്ന 7 അക്ഷര കോഡ് (ഹാഷ് ഉൾപ്പെടെ) rgb(255, 102, 0) എന്ന 13 അക്ഷര കോഡിനേക്കാൾ കൂടുതൽ ഒതുക്കമുള്ളതാണ്. വലിയ CSS ഫയലുകളിൽ, ഇത് ഫയൽ വലുപ്പം കുറയ്ക്കാൻ സഹായിക്കും. കൂടാതെ, ചില ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങളുടെ കളർ പിക്കറുകളിലും, ഗ്രാഫിക് ഡിസൈൻ സോഫ്റ്റ്വെയറുകളിലും, ഡിഫോൾട്ടായി ഹെക്സ് കോഡുകളാണ് കാണിക്കുന്നത്. എന്നിരുന്നാലും, CSS-ൽ rgb() ഫംഗ്ഷനും rgba() (ആൽഫ ചാനലിനായി), hsl() പോലുള്ള ആധുനിക ഫംഗ്ഷനുകളും ഇപ്പോൾ വ്യാപകമായി പിന്തുണയ്ക്കപ്പെടുന്നുണ്ട്. എങ്കിലും, ഹെക്സ് കോഡുകളുടെ ലാളിത്യവും, പൊതുവായ ഉപയോഗവും അവയെ ഇന്നും വെബ് ഡെവലപ്മെന്റിന്റെ ഒരു പ്രധാന ഭാഗമാക്കി നിർത്തുന്നു. ഉദാഹരണത്തിന്, ബ്രാൻഡ് ഗൈഡ്ലൈനുകളിൽ പലപ്പോഴും നിറങ്ങൾ ഹെക്സ് കോഡുകളായാണ് (ഉദാ: #336699) നൽകുന്നത്. ഈ പേജ്, അത്തരം സ്പെസിഫിക്കേഷനുകളെ എങ്ങനെ RGB മൂല്യങ്ങളാക്കി മാറ്റണമെന്ന് കാണിച്ചുതരുന്നു.

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

ചോദ്യം: ഞാൻ #abc പോലുള്ള മൂന്നക്ക ഹെക്സ് കോഡ് നൽകിയാൽ എന്ത് സംഭവിക്കും? ഉത്തരം: പേജ് അത് യാന്ത്രികമായി ആറക്ക ഹെക്സ് കോഡാക്കി മാറ്റും. ഓരോ അക്കവും ഇരട്ടിപ്പിക്കുക വഴിയാണ് ഇത് ചെയ്യുന്നത്. ഉദാഹരണത്തിന്, #abc എന്നത് #aabbcc ആയി വികസിപ്പിക്കപ്പെടും. തുടർന്ന്, ഈ ആറക്ക ഹെക്സ് കോഡിൽ നിന്നാണ് RGB മൂല്യങ്ങൾ കണക്കാക്കുന്നത്.

ചോദ്യം: എനിക്ക് RGB മൂല്യങ്ങളിൽ ആൽഫ (alpha) ചാനലും വേണം. എനിക്ക് എങ്ങനെ അത് ലഭിക്കും? ഉത്തരം: ഈ പേജ് പ്രത്യേകമായി ഹെക്സ്-ടു-RGB പരിവർത്തനത്തിനായി രൂപകൽപ്പന ചെയ്തതാണ്, ആൽഫ ചാനൽ (RGBA) ഇതിൽ ഉൾപ്പെടുന്നില്ല. എട്ടക്ക ഹെക്സ് കോഡുകൾ (ഉദാ: #rrggbbaa) ഇതിൽ പ്രവർത്തിക്കില്ല. ആൽഫ ചാനൽ ഉള്ള RGB മൂല്യങ്ങൾക്കായി, നിങ്ങൾക്ക് rgba() ഫംഗ്ഷൻ ഉപയോഗിക്കാം, പക്ഷേ അതിനായി മറ്റൊരു ഉപകരണമാണ് ആവശ്യമായി വരിക.

ചോദ്യം: ഞാൻ ഒരു സാധുവായ ഹെക്സ് കോഡ് അല്ലാതെ മറ്റെന്തെങ്കിലും ടൈപ്പ് ചെയ്താൽ എന്ത് സംഭവിക്കും? ഉത്തരം: പേജ് ഒരു പിശക് സന്ദേശം പ്രദർശിപ്പിക്കും: "Enter a hex color like #4f46e5 or #abc." ഇത് നിങ്ങൾക്ക് ശരിയായ ഫോർമാറ്റ് മനസ്സിലാക്കാൻ സഹായിക്കുന്നു.

ചോദ്യം: ഈ പേജിലെ പരിവർത്തനങ്ങൾ എത്രത്തോളം കൃത്യമാണ്? ഉത്തരം: പരിവർത്തനങ്ങൾ പൂർണ്ണമായും കൃത്യമാണ്. ഹെക്സാഡെസിമലിനെ ദശാംശത്തിലേക്ക് മാറ്റുന്നത് ഒരു നേർരേഖ ഗണിത പ്രക്രിയയാണ്, അതിനാൽ RGB മൂല്യങ്ങൾ എല്ലായ്പ്പോഴും കൃത്യമായ പൂർണ്ണസംഖ്യകളായിരിക്കും (0 മുതൽ 255 വരെ). ഇവിടെ റൗണ്ടിംഗ് സംഭവിക്കുന്നില്ല.

ചോദ്യം: എന്റെ ബ്രൗസറിന് പുറത്തുള്ള ഒരു പ്രോഗ്രാമിൽ ഞാൻ നൽകിയ RGB മൂല്യങ്ങൾ പതിക്കാൻ ആഗ്രഹിക്കുന്നു. എനിക്ക് എങ്ങനെ അവ പകർത്താനാകും? ഉത്തരം: RGB ഫീൽഡിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന മൂല്യങ്ങൾ (ഉദാ: 79, 70, 229) നിങ്ങൾക്ക് നേരിട്ട് സെലക്ട് ചെയ്ത് പകർത്താം. മറ്റ് ഫോർമാറ്റുകൾക്കും ഇത് ബാധകമാണ്.

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