ചിത്രത്തിൽ നിന്ന് HEX കളർ കണ്ടെത്തുക

ഹെക്സ് കളർ കോഡ്: ചിത്രത്തിൽ നിന്ന് പിക്സൽ സാമ്പിൾ ചെയ്യുന്ന ടൂൾ

എന്താണ് ഈ പേജ് ചെയ്യുന്നത്?

നിങ്ങളുടെ ഉപകരണത്തിൽ നിന്ന് ഒരു ഇമേജ് ഫയൽ തിരഞ്ഞെടുത്ത് അതിൽ മൗസ് പോയിന്റർ ചലിപ്പിക്കുകയോ ക്ലിക്ക് ചെയ്യുകയോ ചെയ്യുമ്പോൾ, ആ പിക്സലിന്റെ നിറം തൽക്ഷണം ഹെക്സാഡെസിമൽ കോഡായി (ഉദാ: #1E90FF) പ്രദർശിപ്പിക്കുന്നു. RGB, HSL മൂല്യങ്ങളും കാണിക്കും. നിങ്ങൾക്ക് ആ നിറം കോപ്പി ചെയ്ത് CSS, ഡിസൈൻ സോഫ്റ്റ്വെയർ, അല്ലെങ്കിൽ മറ്റേതെങ്കിലും പ്രോജക്ടിൽ ഉപയോഗിക്കാം. കൃത്യമായ പിക്സൽ തിരഞ്ഞെടുക്കാൻ സഹായകമായ മാഗ്നിഫൈഡ് വ്യൂ (വലുതാക്കിയ കാഴ്ച) ഉണ്ട്. ഒന്നിലധികം നിറങ്ങൾ സംരക്ഷിച്ച് ചരിത്രത്തിൽ (history) സൂക്ഷിക്കാം – പരമാവധി 12 ഇനങ്ങൾ വരെ.

ഒരു ഇമേജ് ലോഡ് ചെയ്യുമ്പോൾ, ആദ്യം സെന്റർ പിക്സലിന്റെ കളർ വിവരങ്ങളും കോർഡിനേറ്റുകളും പ്രദർശിപ്പിക്കും. പിന്നീട് പോയിന്റർ ചലിപ്പിക്കുമ്പോൾ പിക്സൽ പ്രകാരം നിറം മാറിക്കൊണ്ടിരിക്കും. ക്ലിക്ക് ചെയ്യുമ്പോൾ, “Saved ‹hex› to your picks” എന്ന സന്ദേശം കാണും. ഏതെങ്കിലും കളർ മൂല്യത്തിൽ (HEX, RGB, അല്ലെങ്കിൽ HSL) ക്ലിക്ക് ചെയ്താൽ അത് ക്ലിപ്ബോർഡിലേക്ക് കോപ്പി ചെയ്യപ്പെടും.

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

ഈ ടൂളിന്റെ പ്രധാന ഔട്ട്പുട്ട് ഹെക്സ് കളർ കോഡ് ആണ് – ആറ് അക്കങ്ങളുള്ള (ചിലപ്പോൾ മൂന്നക്ക ഷോർട്ട്ഹാൻഡും) RGB നൊട്ടേഷൻ, അത് CSS, ഡിസൈൻ ടൂളുകളിൽ സ്റ്റാൻഡേർഡാണ്. സഹോദര പേജുകളായ RGB ഫങ്ഷണൽ നൊട്ടേഷൻ അല്ലെങ്കിൽ HSL എന്നിവയിൽ നിന്ന് വ്യത്യസ്തമായി, ഈ പേജ് ഹെക്സ് പ്രതിനിധാനമാണ് നൽകുന്നത്. ആറക്ക ഹെക്സിൽ ആൽഫ ചാനൽ (സുതാര്യത) ഉൾപ്പെടുന്നില്ല. അതിനാൽ, ഒരു പിക്സൽ അർദ്ധസുതാര്യമാണെങ്കിൽ, അത് വെവ്വേറെ ശതമാനമായി കാണിക്കും: “Alpha ‹n›% — this pixel is partly transparent.”

ഹെക്സ് ഫോർമാറ്റ് വെബിന് അനുയോജ്യമായ ഒതുക്കമുള്ള രൂപമായതിനാൽ, color, background-color, അല്ലെങ്കിൽ മറ്റേതെങ്കിലും CSS പ്രോപ്പർട്ടിയിൽ നേരിട്ട് ഉപയോഗിക്കാവുന്ന മൂല്യമാണ് ഇത് – അധിക പരാൻതീസിസുകളോ വാക്യഘടനയോ ആവശ്യമില്ല. ഉദാഹരണത്തിന്, #FF5733 എന്നത് rgb(255, 87, 51) അല്ലെങ്കിൽ hsl(10, 100%, 60%) എന്നിവയേക്കാൾ കൂടുതൽ സങ്കോചിച്ചതും വെബിൽ വ്യാപകവുമാണ്.

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

ഇൻപുട്ടുകൾ:

• ഒരൊറ്റ ഇമേജ് ഫയൽ, ഇനിപ്പറയുന്ന ഫോർമാറ്റുകളിൽ ഒന്ന്: PNG, JPG, WebP, GIF, AVIF, HEIC.
• അനുവദനീയമായ MIME തരങ്ങൾ: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif.

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

• “Image ready — move over it to sample, click to save a color.”
• ഇമേജിന്റെ ഡൈമെൻഷനുകൾ (വീതി × ഉയരം).
• നിലവിലെ പിക്സലിന്റെ കോർഡിനേറ്റുകൾ (x, y).
• HEX: ആ പിക്സലിന്റെ ഹെക്സാഡെസിമൽ നിറം (ആറക്ക, ഉദാ: #1E90FF).
• RGB: ചുവപ്പ്, പച്ച, നീല മൂല്യങ്ങൾ.
• HSL: ഹ്യൂ, സാച്ചുറേഷൻ, ലൈറ്റ്നെസ് മൂല്യങ്ങൾ.
• പിക്സൽ അർദ്ധസുതാര്യമാണെങ്കിൽ: “Alpha ‹n›% — this pixel is partly transparent.”
• ക്ലിക്ക് ചെയ്യുമ്പോൾ: “Saved ‹hex› to your picks.”
• സംരക്ഷിച്ച നിറങ്ങളുടെ ചരിത്രം (പരമാവധി 12 ഇനങ്ങൾ) – ഒരു സ്വാച്ചിൽ ക്ലിക്ക് ചെയ്താൽ ആ നിറം വീണ്ടും ലോഡ് ചെയ്യുന്നു.
• ഏതെങ്കിലും കളർ മൂല്യത്തിൽ (HEX, RGB, HSL) ക്ലിക്ക് ചെയ്താൽ അത് ക്ലിപ്ബോർഡിലേക്ക് കോപ്പി ചെയ്യപ്പെടും.

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

• ഇമേജ് ലോഡ് ചെയ്യുമ്പോൾ, സെന്റർ പിക്സലിന്റെ നിറവും കോർഡിനേറ്റുകളും ഉടൻ പ്രദർശിപ്പിക്കും.
• മൗസ് ചലിപ്പിക്കുമ്പോൾ ഓരോ പിക്സലായി നിറം മാറും.
• ഇമേജിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ നിലവിലെ നിറം നിങ്ങളുടെ പിക്കുകളിലേക്ക് സംരക്ഷിക്കും.
• കീബോർഡ് നാവിഗേഷൻ: ആരോ കീകൾ (arrow keys) ഉപയോഗിച്ച് ക്രോസ്ഹെയർ ചലിപ്പിക്കാം. Shift+ആരോ കീകൾ ഉപയോഗിച്ചാൽ 10 പിക്സൽ വീതം ചലിക്കും. Enter അല്ലെങ്കിൽ Space അമർത്തി നിറം സംരക്ഷിക്കാം.
• ചരിത്ര പരിധി: പരമാവധി 12 നിറങ്ങൾ. ഒരേ RGB മൂല്യമുള്ളതും എന്നാൽ വ്യത്യസ്ത ആൽഫ മൂല്യമുള്ളതുമായ നിറങ്ങൾ വെവ്വേറെ എൻട്രികളായി സംരക്ഷിക്കും.
• ക്ലിപ്ബോർഡ് പ്രശ്നം: ബ്രൗസർ ക്ലിപ്ബോർഡിലേക്ക് കോപ്പി ചെയ്യുന്നത് തടഞ്ഞാൽ, “Could not copy — your browser blocked clipboard access.” എന്ന സന്ദേശം കാണും.
• അർദ്ധസുതാര്യത: ഹെക്സ് ആൽഫ എൻകോഡ് ചെയ്യാത്തതിനാൽ, ആൽഫ ശതമാനമായി കാണിക്കും. പശ്ചാത്തലം പരിഗണിക്കാതെ പിക്സലിന്റെ കൃത്യമായ മൂല്യം എടുക്കുന്നു.
• കംപ്രഷൻ/ആന്റി-അലിയാസിംഗ്: JPEG അല്ലെങ്കിൽ സ്ക്രീൻഷോട്ട് ആണെങ്കിൽ, കംപ്രഷനും ആന്റി-അലിയാസിംഗും പിക്സൽ മൂല്യങ്ങളെ മാറ്റിയിരിക്കാം. അതിനാൽ ഒരേ നിറം കാണുന്ന സ്ഥലത്ത് പോലും പിക്സലുകൾ വ്യത്യാസപ്പെട്ടേക്കാം.
• പിന്തുണയില്ലാത്ത ഫയൽ തരം: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.”
• തുറക്കാൻ കഴിയാത്ത ഇമേജ്: “That image could not be opened. It may be corrupted or in an unsupported format.”
• വലിയ ഇമേജുകൾ: ഏറ്റവും നീളം കൂടിയ വശം 4096 പിക്സലിൽ കൂടുതലാണെങ്കിൽ, ഇമേജ് സ്കെയിൽ ചെയ്ത് ചെറുതാക്കും.
• “Start over” ബട്ടൺ: ഇമേജ്, കളർ ചരിത്രം, എല്ലാം ക്ലിയർ ചെയ്ത് ടൂളിനെ പ്രാരംഭ അവസ്ഥയിലേക്ക് കൊണ്ടുപോകുന്നു.

ആർക്കാണ് ഇത് ആവശ്യം?

• ഡിസൈനർമാർ: UI ഡിസൈനിനായി റഫറൻസ് ഇമേജുകളിൽ നിന്ന് കൃത്യമായ പിക്സൽ നിറങ്ങൾ വേർതിരിച്ചെടുക്കാൻ.
• ഡെവലപ്പർമാർ: CSS-ലേക്ക് നേരിട്ട് ഉപയോഗിക്കാവുന്ന കൃത്യമായ ഹെക്സ് മൂല്യങ്ങൾ (ഉദാ. #1E90FF) ആവശ്യമുള്ളപ്പോൾ.
• കണ്ടന്റ് ക്രിയേറ്റർമാർ: ബ്രാൻഡിംഗ്, തംബ്നെയിലുകൾ, സോഷ്യൽ മീഡിയ ഗ്രാഫിക്സ് എന്നിവയ്ക്കായി നിറങ്ങൾ സാമ്പിൾ ചെയ്യാൻ.
• ആർക്കും: ഒരു ലോഗോ, ഫോട്ടോ, അല്ലെങ്കിൽ സ്ക്രീൻഷോട്ടിലെ നിറവുമായി പൊരുത്തപ്പെടാൻ ഹെക്സ് കോഡ് ആവശ്യമുള്ളവർ.

സാങ്കേതിക പശ്ചാത്തലം: ഹെക്സ്, RGB, HSL എന്നീ കളർ മോഡലുകൾ

HEX (ഹെക്സാഡെസിമൽ) എന്നത് RGB കളറിനെ പ്രതിനിധീകരിക്കുന്ന ഒരു രീതിയാണ്, അതിൽ ഓരോ ഘടകത്തിനും 00 മുതൽ FF വരെയുള്ള രണ്ട് ഹെക്സാഡെസിമൽ അക്കങ്ങൾ ഉപയോഗിക്കുന്നു. ഉദാഹരണത്തിന്, #1E90FF എന്നത് R=30 (hex 1E), G=144 (hex 90), B=255 (hex FF) എന്നുവായിക്കാം. ഈ ഫോർമാറ്റ് 16.7 ദശലക്ഷം നിറങ്ങളെ പ്രതിനിധീകരിക്കും. ആൽഫ ചാനൽ ഇല്ലാത്തതിനാൽ, സുതാര്യത വെവ്വേറെ ശതമാനമായി കാണിക്കുന്നു.

RGB (റെഡ്, ഗ്രീൻ, ബ്ലൂ) ഫങ്ഷണൽ നൊട്ടേഷനിൽ rgb(30, 144, 255) എന്ന രീതിയിലാണ് എഴുതുന്നത്. CSS-ലും ഇത് ഉപയോഗിക്കാം, പക്ഷേ ഹെക്സിനേക്കാൾ വാക്കുകൾ കൂടുതലാണ്.

HSL (Hue, Saturation, Lightness) എന്നത് മറ്റൊരു മോഡലാണ്. Hue = 210°, Saturation = 100%, Lightness = 56% എന്നിങ്ങനെ. മനുഷ്യന്റെ നിറം കാണുന്ന വിധത്തോട് കൂടുതൽ അടുത്തതാണ് ഇത്.

ഈ പേജ് മൂന്ന് ഫോർമാറ്റുകളും കാണിക്കുന്നു. ഹെക്സ് പ്രധാന ഔട്ട്പുട്ടായതുകൊണ്ടാണ് ഇതിന്റെ പേര് “hex-color-from-image” എന്ന് നൽകിയിരിക്കുന്നത്.

ഉപയോഗ രീതികളും പ്രായോഗിക നുറുങ്ങുകളും

• കൃത്യമായ പിക്സൽ തിരഞ്ഞെടുപ്പിന്: മാഗ്നിഫൈഡ് വ്യൂ ഉപയോഗിക്കുക. ആന്റി-അലിയാസിംഗ് കാരണം അരികുകളിൽ നിറങ്ങൾ മങ്ങിയിരിക്കും – കൃത്യമായ നിറം ലഭിക്കാൻ നിറഞ്ഞ പ്രദേശത്തിനുള്ളിൽ ക്ലിക്ക് ചെയ്യുക.
• കീബോർഡ് ഷോർട്ട്കട്ടുകൾ: ആരോ കീകൾ ഉപയോഗിച്ച് പിക്സൽ പ്രകാരം നീങ്ങാം; Shift ചേർത്താൽ 10 പിക്സൽ. ഇത് കൃത്യതയ്ക്കുള്ള മികച്ച മാർഗമാണ്.
• ഒന്നിലധികം നിറങ്ങൾ സംരക്ഷിക്കൽ: 12 വരെ നിറങ്ങൾ ചരിത്രത്തിൽ സൂക്ഷിക്കാം. ഓരോ നിറത്തിലും ക്ലിക്ക് ചെയ്ത് വീണ്ടും കോപ്പി ചെയ്യാം.
• CSS-ലേക്ക് ഇന്റഗ്രേഷൻ: #1E90FF എന്ന ഹെക്സ് കോഡ് നേരിട്ട് color: #1E90FF; ആയി ഉപയോഗിക്കാം. എന്നാൽ ആൽഫ ആവശ്യമുണ്ടെങ്കിൽ CSS-ലെ rgba() ഫംഗ്ഷനോ hsla() ഫംഗ്ഷനോ ഉപയോഗിക്കണം. ടൂൾ ആൽഫ ശതമാനമായി കാണിക്കുന്നതിനാൽ, rgba(30, 144, 255, 0.5) എന്ന് എഴുതാം.
• ജെപിജി കംപ്രഷൻ: JPEG ഇമേജുകളിൽ കംപ്രഷൻ ആർട്ടിഫാക്റ്റുകൾ കാരണം ഒരേ പ്രദേശത്ത് പോലും പിക്സലുകൾ വ്യത്യാസപ്പെട്ടേക്കും. ശരാശരി നിറം ലഭിക്കാൻ 3×3 അല്ലെങ്കിൽ 5×5 പിക്സൽ ബ്ലോക്ക് മനസ്സിൽ കണക്കാക്കേണ്ടതുണ്ട്. ഈ ടൂൾ ഒരു പിക്സൽ മാത്രം സാമ്പിൾ ചെയ്യുന്നു – അതുകൊണ്ട് സമീപ പിക്സലുകളും പരിശോധിക്കാൻ ശുപാർശ ചെയ്യുന്നു.

പതിവുചോദ്യങ്ങൾ

1. ഹെക്സ് കോഡിൽ # എന്തിനാണ്?
# എന്നത് ഹെക്സാഡെസിമൽ നൊട്ടേഷൻ തുടങ്ങുന്നത് സൂചിപ്പിക്കുന്നു. CSS-ലും ഡിസൈൻ ടൂളുകളിലും ഇത് നിർബന്ധമാണ്.

2. പിക്സൽ അർദ്ധസുതാര്യമാണെങ്കിൽ ടൂൾ എന്താണ് കാണിക്കുക?
ആൽഫ ശതമാനമായി കാണിക്കും. ഉദാഹരണത്തിന്, “Alpha 50% — this pixel is partly transparent.” ഹെക്സ് കോഡിൽ ആൽഫ ഉൾപ്പെടുന്നില്ല. CSS-ൽ ഉപയോഗിക്കാൻ rgba() ഫംഗ്ഷൻ ഉപയോഗിക്കുക.

3. ഞാൻ 12-ൽ കൂടുതൽ നിറങ്ങൾ സംരക്ഷിച്ചാൽ എന്ത് സംഭവിക്കും?
ചരിത്രത്തിൽ പരമാവധി 12 എൻട്രികളേ സൂക്ഷിക്കൂ. പുതിയത് ചേർക്കുമ്പോൾ പഴയത് നീക്കം ചെയ്യപ്പെടും. ഒരേ RGB മൂല്യമുള്ളതും വ്യത്യസ്ത ആൽഫയുള്ളതുമായ നിറങ്ങൾ വെവ്വേറെ കണക്കാക്കും.

4. എന്തുകൊണ്ടാണ് JPEG-ൽ നിറങ്ങൾ കൃത്യമായി ലഭിക്കാത്തത്?
JPEG കംപ്രഷൻ ലോസി ആണ് – ചില പിക്സൽ വിവരങ്ങൾ നഷ്ടപ്പെടുന്നു. കൂടാതെ, ആന്റി-അലിയാസിംഗ് വക്കുകളിൽ നിറങ്ങൾ മിശ്രണം ചെയ്യുന്നു. PNG അല്ലെങ്കിൽ ലോസ്സ്ലെസ് ഫോർമാറ്റ് ഉപയോഗിക്കുന്നതാണ് കൃത്യത കൂടിയത്.

5. എനിക്ക് മൗസ് ഇല്ല – കീബോർഡ് മാത്രം ഉപയോഗിച്ച് പ്രവർത്തിക്കാമോ?
അതെ. ആരോ കീകൾ ഉപയോഗിച്ച് ക്രോസ്ഹെയർ നീക്കുക, Shift+ആരോ കീകൾ 10 പിക്സൽ വീതം ചലിക്കാൻ, Enter അല്ലെങ്കിൽ Space അമർത്തി നിറം സംരക്ഷിക്കുക.

6. 4096 പിക്സലിൽ കൂടുതലുള്ള ഇമേജ് അപ്ലോഡ് ചെയ്യുമ്പോൾ എന്ത് സംഭവിക്കും?
ഏറ്റവും നീളം കൂടിയ വശം 4096 പിക്സലിൽ ആയി സ്കെയിൽ ചെയ്യപ്പെടും. ഈ സമയത്ത് പിക്സൽ മൂല്യങ്ങൾ ചെറിയ മാറ്റത്തിന് വിധേയമായേക്കാം.