HEX കോഡ് മൂന്ന് 8‑ബിറ്റ് നമ്പറുകൾ ആറ് ഹെക്സഡെസിമൽ ഡിജിറ്റുകളിൽ പാക് ചെയ്യുന്നു. HEX നിന്ന് RGBയ്ക്ക് മാറ്റം tähendab ആ ഡിജിറ്റുകൾ ജോഡികളായി വിഭജിച്ച് ഓരോ ജോഡിയെയും 0–255 വരെയുള്ള ദശലക്ഷ്യ സംഖ്യയായി വായിക്കുക — ഇതെല്ലാം CSS, Figma, image editors പ്രതീക്ഷിക്കുന്ന മൂല്യങ്ങളാണ്.
HEX നിന്ന് RGB വരെ മാറ്റം എങ്ങനെ നടക്കുന്നു
- മുനെയുള്ള # drop ചെയ്യുക, കോഡിന് മൂന്ന് ഡിജിറ്റുകൾ മാത്രം ഉണ്ടെങ്കിൽ ഓരോന്നും ഇരട്ടപ്പെടുത്തുക: #f53 എന്നത് #ff5533 ആക്കുക.
- ആറ് ഡിജിറ്റുകൾ മൂന്ന് ജോഡികളായി ഭാഗിക്കുക — RR, GG, BB.
- ഓരോ ജോഡിയും base-16 എണ്ണമായാണ് വായിക്കേണ്ടത്, base-10 ആയി കൺവെർട്ട് ചെയ്യുക: FF becomes 255, 57 becomes 87, 33 becomes 51.
- മൂന്ന് ഫലം rgb(R, G, B) എന്നായി എഴുതുക.
പ്രായോഗിക ഉദാഹരണം
ഈ കൺവർഷൻ കൃത്യമാണ്. HEXയും RGBയും അതേ sRGB മൂല്യങ്ങളെ വ്യത്യസ്ത നോട്ടേഷനുകളിൽ വിവരിക്കുന്നു, അതിനാൽ ഏതെങ്കിലും ദിശയിലും വൃത്തികെട്ടനെയോ നഷ്ടമോ ഉണ്ടാകില്ല.
HEXയും RGBയും വിശദീകരിച്ചത്
HEX എന്താണ്?
HEX കോഡ് ആറ്-ടിജിറ്റുള്ള ഹെക്സാഡെസിമൽ നമ്പർ ആണ്, മുന്നിൽ # ഉം കൂടിയുള്ളത്, ഒരോ കളറിന്റെ റെഡ്, ഗ്രീൻ, ബ്ലൂ ചാനലുകൾ സംഭരിക്കുന്നു. ഓരോ ഡിജിറ്റുകളുടെ ജോഡിയും ഒരു ചാനൽ കവർ ചെയ്യുന്നു, 00 (യാതും ഇല്ല) മുതൽ FF (പൂർണ്ണം) വരെ, ഇത് RGB ന് സമാനമായ 16.7 മില്യൺ നിറങ്ങൾ ഒരു ചെറുതായുള്ള നോട്ടേഷനിൽ നൽകുന്നു. HEX ആണ് CSS, design tools, ബ്രാൻഡ് ഗൈڈر്ലൈൻസിൽ ഡീഫോൾട്ട്.
- Syntax:
- #RRGGBB
- Range:
- ഒരു ചാനലിന് 00–FF
- Best for:
- CSS, design handoff, brand guidelines
RGB എന്താണ്?
RGB ഒരു കളർ മൂന്ന് ലൈറ്റ് ചാനലുകളായി വിവരിക്കുന്നു — red, green, blue — ഓരോത് 0–255 വരെയാണ്. ഇത് സ്ക്രീനുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെ പ്രതിഫലിപ്പിക്കുന്നു: മൂന്നു ചാനലുകളും 255 ആയാൽ വെള്ള, എല്ലാ ചാനലുകളും 0 ആണെങ്കിൽ കറുപ്പ്. കളറുമായി കണക്കുകൾ ചെയ്യേണ്ടപ്പോഴെല്ലാം RGB അനുയോജ്യമാണ്, rgba() വഴി transparency ചേർക്കാനും കഴിയും.
- Syntax:
- rgb(R, G, B)
- Range:
- ഒരു ചാനലിന് 0–255
- Best for:
- code, canvas, rgba() ഉപയോഗിച്ച് transparency
HEX to RGB reference table
സാധാരണയായി ഉപയോഗിക്കുന്ന CSS നിറങ്ങൾ HEX ൽ നിന്ന് RGB ആയി പരിവർത്തനം ചെയ്തിരിക്കുന്നു.
| നിറം | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |