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

RGB-യിൽ നിന്ന് Hex-ലേക്കുള്ള പരിവർത്തനം: പൂർണ്ണമായ മാർഗ്ഗദർശി

നിങ്ങൾ റെഡ്, ഗ്രീൻ, ബ്ലൂ എന്നീ മൂന്ന് മൂല്യങ്ങൾ (ഓരോന്നും 0 മുതൽ 255 വരെ) നൽകുകയാണെങ്കിൽ, ഈ പേജ് തൽക്ഷണം അതിനു തുല്യമായ ഹെക്സാഡെസിമൽ കളർ കോഡ് (ഉദാ: #1E90FF) കാണിച്ചുതരുന്നു. കോഡിനൊപ്പം നിറവും പ്രദർശിപ്പിക്കും. HSL, HSV, CMYK, LAB, കളർ പിക്കർ എന്നീ മറ്റ് ഫോർമാറ്റുകളും ഒരേ സമയം അപ്ഡേറ്റ് ചെയ്യപ്പെടുന്നു. CSS, ഡിസൈൻ സോഫ്റ്റ്വെയർ, അല്ലെങ്കിൽ ഹെക്സ് മൂല്യം പ്രതീക്ഷിക്കുന്ന ഏത് വർക്ക്ഫ്ലോയിലും നിങ്ങൾക്ക് ഈ കോഡ് ഉപയോഗിക്കാം.

ഈ പേജ് മറ്റുള്ളവയിൽ നിന്ന് എങ്ങനെ വ്യത്യസ്തമാണ്?

മറ്റ് പല ടൂളുകളും RGB-യെ ഹെക്സ് ആക്കുമ്പോൾ, ഈ പേജ് മൂന്ന് ചാനലുകളിലും (R, G, B) 0-255 സ്കെയിൽ ഉപയോഗിക്കുന്നു. രണ്ട് ഫോർമാറ്റുകളും ഒരേ കളർ സ്പേസ് (sRGB) പ്രതിനിധാനം ചെയ്യുന്നു. അതിനാൽ ഗാമറ്റ് ക്ലിപ്പിംഗോ ഏകദേശ കണക്കോ ഇവിടെ സംഭവിക്കുന്നില്ല. ഹെക്സ് ഔട്ട്പുട്ട് എപ്പോഴും # കൊണ്ട് ആരംഭിക്കും. നിങ്ങൾ എട്ട്-അക്ക ഹെക്സ് (RGBA) ഉപയോഗിക്കുന്നില്ലെങ്കിൽ, ഇതിന് ആൽഫ ചാനൽ ഇല്ല. RGB ഇൻപുട്ടിന് മൂന്ന് സംഖ്യകൾ കോമയോ സ്പേസോ കൊണ്ട് വേർതിരിച്ച് നൽകണം (ഉദാ: 79, 70, 229). ഔട്ട്പുട്ട് ആറ് അക്ക ഹെക്സ് കോഡായിരിക്കും (ഉദാ: #4F46E5). കാരണം, 0-255-ലെ ഓരോ മൂല്യവും രണ്ട് ഹെക്സ് അക്കങ്ങളായി മാറുന്നു.

നിങ്ങൾ ഒരു ഫോർമാറ്റ് ഫീൽഡ് എഡിറ്റ് ചെയ്താൽ, മറ്റെല്ലാ ഫീൽഡുകളും യാന്ത്രികമായി അപ്ഡേറ്റ് ചെയ്യും. “Convert” ബട്ടൺ ഇവിടെ ഇല്ല. ഇത് തത്സമയ പരിവർത്തനമാണ്. ഉപയോക്താവിന് ഉടൻ ഫലം കാണാൻ കഴിയും.

ഇൻപുട്ടും ഔട്ട്പുട്ടും: കൃത്യമായ നിയമങ്ങൾ

ഇൻപുട്ട്

• മൂന്ന് ദശാംശ സംഖ്യകൾ: റെഡ്, ഗ്രീൻ, ബ്ലൂ.
• ഓരോ സംഖ്യയും 0-255 പരിധിയിലായിരിക്കണം.
• ഉദാഹരണം: 79, 70, 229
• സെപ്പറേറ്റർ കോമയോ സ്പേസോ ആകാം. (ഉദാ: 79 70 229 എന്നും പ്രവർത്തിക്കും)
• ലീഡിംഗ് സീറോകൾ അനുവദനീയമാണ് (ഉദാ: 079, 070, 229).

ഔട്ട്പുട്ട്

• ആറ് അക്ക ഹെക്സാഡെസിമൽ കോഡ്, # ഉപസർഗ്ഗത്തോടെ.
• ഉദാഹരണം: #4F46E5
• നിറത്തിന്റെ വിഷ്വൽ സ്വാച്ചും പ്രദർശിപ്പിക്കും.
• മറ്റ് ഫോർമാറ്റുകൾ (HSL, HSV, CMYK, LAB, കളർ പിക്കർ) ഒരേ സമയം അപ്ഡേറ്റ് ചെയ്യും.

എഡ്ജ് കേസുകളും പിശകുകളും

• RGB മൂല്യങ്ങൾ 0-255 പരിധിക്ക് പുറത്താണെങ്കിൽ, അല്ലെങ്കിൽ അസാധുവായ ഫോർമാറ്റിലാണെങ്കിൽ, ടൂൾ പിശക് സന്ദേശം കാണിക്കും:
  "Enter RGB as three numbers 0–255, like 79, 70, 229."
• RGB-യും hex-ഉം ഒരേ sRGB കളർ സ്പേസിലാണ്. അതിനാൽ ഗാമറ്റ് ക്രോസിംഗ് ഇല്ല. പരിവർത്തനം കൃത്യവും വിപരീതവുമാണ്.
• ഹെക്സ് ഔട്ട്പുട്ട് എപ്പോഴും ആറ് അക്കമാണ്. മൂന്ന്-അക്ക ഷോർട്ട്ഹാൻഡ് (ഉദാ: #ABC) സ്വയം വികസിപ്പിക്കുന്നു. എന്നാൽ ഔട്ട്പുട്ട് #AABBCC ആയി തന്നെ കാണിക്കും, #ABC ആയി ചുരുക്കില്ല.
• ഹെക്സ് ഇൻപുട്ട് ഫീൽഡ് മൂന്ന്-അക്ക ഷോർട്ട്ഹാൻഡ് (ഉദാ: #abc) സ്വീകരിക്കുന്നു. ഇത് ആന്തരികമായി ആറ് അക്കം ആക്കി വികസിപ്പിക്കുന്നു.
• എല്ലാ പ്രോസസ്സിംഗും നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെ നടക്കുന്നു. നിങ്ങൾ നൽകുന്ന ഒന്നും അപ്ലോഡ് ചെയ്യപ്പെടുന്നില്ല.

ആർക്കാണ് ഈ ടൂൾ ആവശ്യമുള്ളത്?

RGB കളർ മോഡലും 0–255 സ്കെയിലും

RGB (Red-Green-Blue) ഒരു അഡിറ്റീവ് കളർ മോഡലാണ്. ഇതിൽ റെഡ്, ഗ്രീൻ, ബ്ലൂ എന്നീ പ്രകാശ പ്രൈമറികൾ കൂടിച്ചേർന്ന് വിവിധ നിറങ്ങൾ സൃഷ്ടിക്കുന്നു. ഓരോ ചാനലും 0 മുതൽ 255 വരെയുള്ള പൂർണ്ണ സംഖ്യകളാൽ പ്രതിനിധാനം ചെയ്യപ്പെടുന്നു. 0 എന്നാൽ ആ ചാനലിന്റെ പൂർണ്ണ അഭാവം, 255 എന്നാൽ പൂർണ്ണ തീവ്രത.

ഈ 256-ലെവൽ സ്കെയിൽ (2^8) കമ്പ്യൂട്ടറിൽ പ്രബലമായിരിക്കുന്നു, കാരണം ഒരു ബൈറ്റ് (8 ബിറ്റുകൾ) 0–255 ശ്രേണി സംഭരിക്കും. ഇത് പുരാതന ഹാർഡ്വെയർ നിയന്ത്രണങ്ങളിൽ നിന്ന് തുടങ്ങിയതാണെങ്കിലും, ഇന്നും മിക്കവാറും എല്ലാ ഡിജിറ്റൽ ഡിസ്പ്ലേകളും sRGB കളർ സ്പേസിൽ 8-ബിറ്റ് പെർ ചാനൽ പ്രവർത്തിക്കുന്നു.

ഉദാഹരണത്തിന്, RGB (0, 0, 0) = കറുപ്പ് (പ്രകാശമില്ല), (255, 255, 255) = വെളുപ്പ് (എല്ലാ പ്രകാശവും). (255, 0, 0) = ചുവപ്പ്.

ഹെക്സാഡെസിമൽ കളർ കോഡ്: ഘടനയും വിപുലീകരണവും

ഒരു ഹെക്സ് കോഡ് # കൊണ്ട് ആരംഭിക്കുന്നു, തുടർന്ന് ആറ് ഹെക്സാഡെസിമൽ അക്കങ്ങൾ (0-9, A-F). ഉദാ: #1E90FF. മൂന്ന് ജോഡികൾ: ആദ്യ ജോഡി റെഡ്, രണ്ടാം ജോഡി ഗ്രീൻ, മൂന്നാം ജോഡി ബ്ലൂ.

ഹെക്സ് അക്കങ്ങളിൽ കേസ് സെൻസിറ്റിവിറ്റി ഇല്ല. #1e90ff, #1E90FF രണ്ടും ഒന്നുതന്നെ. എങ്കിലും, പല ഡെവലപ്പർമാരും ഒരു കൺവെൻഷൻ പിന്തുടരുന്നു (സാധാരണയായി എല്ലാ വലിയ അക്ഷരങ്ങളും).

മൂന്ന്-അക്ക ഷോർട്ട്ഹാൻഡ് (ഉദാ: #ABC) എന്നത് #AABBCC-യുടെ ചുരുക്കിയ രൂപമാണ്. ഓരോ ഡിജിറ്റും ഇരട്ടിയാകുന്നു. ഈ ടൂളിന്റെ ഹെക്സ് ഇൻപുട്ട് ഫീൽഡ് ഇത് സ്വീകരിക്കുകയും ആന്തരികമായി #AABBCC ആക്കി വികസിപ്പിക്കുകയും ചെയ്യും. എന്നാൽ ഔട്ട്പുട്ട് ആറ്-അക്കമായി തന്നെ കാണിക്കും.

എട്ട്-അക്ക ഹെക്സ് (ഉദാ: #1E90FF80) ആൽഫ ചാനൽ (സുതാര്യത) ചേർക്കുന്നു. ഈ ടൂൾ RGB-ൽ നിന്ന് എട്ട്-അക്ക ഔട്ട്പുട്ട് നൽകുന്നില്ല, കാരണം ഇൻപുട്ടിൽ ആൽഫ ഇല്ല. എന്നാൽ കളർ പിക്കർ വഴി നിങ്ങൾക്ക് ഒരു നിറത്തിന് ആൽഫ ചേർക്കണമെങ്കിൽ, മറ്റൊരു ടൂൾ ആവശ്യമാണ്.

പരിവർത്തന ഗണിതം: ഓരോ 0–255 മൂല്യവും എങ്ങനെ ഹെക്സാകുന്നു

പരിവർത്തനം ലളിതമാണ്: ഓരോ ദശാംശ സംഖ്യയെയും 16 കൊണ്ട് ഹരിക്കുക. ഘടകം (quotient) ആദ്യ ഹെക്സ് അക്കം, ശിഷ്ടം (remainder) രണ്ടാം ഹെക്സ് അക്കം.

ഉദാഹരണം: 229 (ബ്ലൂ) → 229 ÷ 16 = 14.3125, അതായത് ഘടകം 14, ശിഷ്ടം 5. 14 ഹെക്സിൽ E, 5 ഹെക്സിൽ 5 → E5. 70 (ഗ്രീൻ) ÷ 16 = 4.375 → 4, ശിഷ്ടം 6 → 46. 79 (റെഡ്) ÷ 16 = 4.9375 → 4, ശിഷ്ടം 15 → 4F. അങ്ങനെ #4F46E5.

ഈ പരിവർത്തനം ദ്വിമുഖവും (reversible) കൃത്യവുമാണ്. sRGB സ്പേസിൽ, RGB-യിൽ നിന്ന് ഹെക്സിലേക്കും തിരിച്ചും പരിവർത്തനം ചെയ്യുമ്പോൾ നഷ്ടം സംഭവിക്കുന്നില്ല.

sRGB കളർ സ്പേസും പരിമിതികളും

sRGB (standard Red Green Blue) ഏറ്റവും സാധാരണമായ കളർ സ്പേസാണ്, ഇന്റർനെറ്റിലും മിക്ക ഡിസ്പ്ലേകളിലും ഉപയോഗിക്കുന്നു. RGB-യും ഹെക്സ് കോഡുകളും sRGB-യെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. അതിനാൽ ഒരു sRGB മോണിറ്ററിൽ RGB (79,70,229) എന്നതും #4F46E5 എന്നതും ഒരേ നിറമാണ്.

എന്നാൽ പ്രിന്റിംഗ് പോലുള്ള സബ്ട്രാക്റ്റീവ് കളർ ഉപകരണങ്ങൾ sRGB-യിൽ നിന്ന് വ്യത്യസ്തമായ കളർ ഗാമറ്റ് (gamut) ഉപയോഗിക്കുന്നു. CMYK (സയൻ, മജന്ത, യെല്ലോ, കീ/ബ്ലാക്ക്) പേപ്പറിലെ മഷി ഉപയോഗിച്ച് നിറങ്ങൾ സൃഷ്ടിക്കുന്നു. sRGB-യിലെ ചില ഊർജ്ജസ്വലമായ നിറങ്ങൾ (ഉദാ: നിയോൺ പച്ച) CMYK-യിൽ പ്രിന്റ് ചെയ്യാൻ കഴിയില്ല. അതിനാൽ, വെബ് ഡിസൈനിന് RGB/ഹെക്സ് മതിയെങ്കിലും, പ്രിന്റിനായി നിറങ്ങൾ കൃത്യമായി പുനർനിർമ്മിക്കാൻ പ്രത്യേക പ്രൊഫൈലുകളും പരിവർത്തന ക്രമീകരണങ്ങളും ആവശ്യമാണ്.

ഇൻപുട്ട് ഫോർമാറ്റിംഗും പൊതുവായ തെറ്റുകളും

RGB ഇൻപുട്ട് ടൂൾ മൂന്ന് സംഖ്യകൾ പ്രതീക്ഷിക്കുന്നു, കോമകളോ സ്പേസുകളോ കൊണ്ട് വേർതിരിച്ചിരിക്കണം. പൊതുവായ നിരവധി തെറ്റുകൾ ഇവയാണ്:

• ശ്രേണിക്ക് പുറത്തുള്ള മൂല്യങ്ങൾ: 300, 256, -5 പോലുള്ളവ നൽകിയാൽ പിശക് സന്ദേശം വരും. മൂല്യങ്ങൾ 0-255-നുള്ളിൽ ആയിരിക്കണം.
• മിക്സഡ് സെപ്പറേറ്ററുകൾ: 79, 70 229 (കോമയും സ്പേസും കൂടിക്കലർത്തിയാൽ) പ്രവർത്തിക്കാൻ സാധ്യതയുണ്ടെങ്കിലും, സ്ഥിരമായി കോമ അല്ലെങ്കിൽ സ്പേസ് ഉപയോഗിക്കുന്നതാണ് നല്ലത്.
• മൂന്നിലധികം സംഖ്യകൾ: 79, 70, 229, 100 പോലെ നൽകിയാൽ, ടൂൾ അവഗണിക്കുകയോ പിശക് കാണിക്കുകയോ ചെയ്യും. ഇത് RGB-യ്ക്ക് മാത്രമുള്ളതാണ് (ആൽഫ ഇല്ല).
• ഡിസിമൽ പോയിന്റുകൾ: 79.5, 70, 229 പോലുള്ളവ അനുവദനീയമല്ല. RGB മൂല്യങ്ങൾ പൂർണ്ണ സംഖ്യകളായിരിക്കണം. നിങ്ങൾക്ക് ഫ്ലോട്ടിംഗ് പോയിന്റ് ഉണ്ടെങ്കിൽ, റൗണ്ട് ചെയ്യേണ്ടതുണ്ട്.
• വൈറ്റ്സ്പേസ്: നിരവധി സ്പേസുകൾ ഉണ്ടെങ്കിലും, ടൂൾ അവ അവഗണിക്കും. എന്നാൽ ഫോർമാറ്റ് വ്യക്തമായിരിക്കേണ്ടതുണ്ട്.

CSS-ൽ ഹെക്സ് കോഡ് ഉപയോഗിക്കുന്ന വിധം

CSS-ൽ ഹെക്സ് കോഡ് നേരിട്ട് പ്രോപ്പർട്ടി മൂല്യമായി ഉപയോഗിക്കാം:

.example {
  color: #4F46E5;
  background-color: #1E90FF;
}

മൂന്ന്-അക്ക ഷോർട്ട്ഹാൻഡും CSS പിന്തുണയ്ക്കുന്നു: #abc എന്നത് #aabbcc-യ്ക്ക് തുല്യമാണ്. എട്ട്-അക്ക ഹെക്സ് (ഉദാ: #1E90FF80) CSS-ൽ ആൽഫ ചാനലായി ഉപയോഗിക്കാം (CSS Color Module Level 4). ഈ ടൂൾ എട്ട്-അക്ക ഔട്ട്പുട്ട് നൽകുന്നില്ലെങ്കിലും, നിങ്ങൾക്ക് സ്വയം ആഡ് ചെയ്യാം.

ഓർമ്മിക്കുക: currentColor, transparent പോലുള്ള CSS കീവേർഡുകളും ഉണ്ട്, പക്ഷേ ഹെക്സ് കൃത്യമായ നിയന്ത്രണം നൽകുന്നു.

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

Q1: RGB-യിൽ നിന്ന് ഹെക്സിലേക്ക് പരിവർത്തനം ചെയ്യുമ്പോൾ വിവരങ്ങൾ നഷ്ടപ്പെടുമോ?
A: ഇല്ല. sRGB സ്പേസിൽ, RGB (0–255) ഓരോന്നും കൃത്യമായി രണ്ട് ഹെക്സ് അക്കങ്ങളിലേക്ക് മാപ്പ് ചെയ്യുന്നു. പരിവർത്തനം പൂർണ്ണമായും വിപരീതമാണ്.

Q2: ഞാൻ RGB-യിൽ 128, 128, 128 എന്ന മൂല്യങ്ങൾ നൽകിയാൽ എന്ത് ഹെക്സ് ലഭിക്കും?
A: 128 → 0x80 (16×8 + 0). അതിനാൽ #808080, ഇത് ചാരനിറമാണ്.

Q3: ഞാൻ 255, 0, 0 നൽകിയാൽ ഹെക്സ് #FF0000 ആകുമോ?
A: അതെ. 255 = FF, 0 = 00. അതിനാൽ #FF0000 = ശുദ്ധ ചുവപ്പ്.

Q4: ഹെക്സ് കോഡിൽ കേസ് (Case) പ്രധാനമാണോ?
A: ഇല്ല. #1e90ff, #1E90FF രണ്ടും ഒരേ നിറം. എങ്കിലും, ഫയലുകളിൽ സ്ഥിരതയ്ക്കായി ഒരു കേസ് തിരഞ്ഞെടുക്കുന്നത് നല്ലതാണ്.

Q5: ഈ ടൂൾ പ്രിന്റിനുള്ള കളർ കൺവേർഷൻ ചെയ്യുമോ?
A: ഇല്ല. ഇത് sRGB-യിൽ നിന്ന് sRGB-യിലേക്കുള്ള ഹെക്സ് പരിവർത്തനം മാത്രം. പ്രിന്റിനായി CMYK പരിവർത്തനം വേറെ ആവശ്യമാണ്.

Q6: എനിക്ക് RGB-യിൽ 0, 255, 127 എന്ന മൂല്യങ്ങൾ നൽകി, ഹെക്സ് #00FF7F ലഭിക്കുമോ?
A: കൃത്യമായി. 0 = 00, 255 = FF, 127 = 7F (16×7 + 15).