ആളുകൾ നിറത്തെക്കുറിച്ച് സംസാരിക്കുന്ന രീതിയിൽ HSL അതിനെ വിവരിക്കുന്നു: ഏത് ഹ്യൂ, എത്ര നിറമുള്ളത്, എത്ര തെളിച്ചമുള്ളത്. HEX കോഡിനെ HSL-ലേക്ക് മാറ്റുന്നത്, നിറത്തെ യഥാർത്ഥത്തിൽ ക്രമീകരിക്കാവുന്ന രൂപത്തിലാക്കാനുള്ള ഏറ്റവും വേഗമുള്ള വഴിയാണ്: അത് തെളിച്ചം കൂട്ടാം, മങ്ങിക്കാം, അല്ലെങ്കിൽ അതിൽ നിന്ന് ഒരു മുഴുവൻ സ്കെയിൽ നിർമ്മിക്കാം.
HEX നിന്ന് HSL വരെ മാറ്റം എങ്ങനെ നടക്കുന്നു
- HEX കോഡിനെ RGB-ലേക്ക് മാറ്റി ഓരോ ചാനലിനെയും 255 കൊണ്ട് ഹരിക്കുക, അങ്ങനെ മൂന്നും 0-നും 1-നും ഇടയിൽ വരും.
- മൂന്ന് മൂല്യങ്ങളിലിൽ ഏറ്റവും വലിയതും ചെറുതും കണ്ടെത്തുക. അവയുടെ ശരാശരി ആണ് lightness L.
- അവയ്ക്കിടയിലുള്ള വ്യത്യാസമാണ് saturation S നിർണ്ണയിക്കുന്നത്: തെളിഞ്ഞ നിറങ്ങൾക്ക് (2 − max − min) കൊണ്ടും, ഇരുണ്ട നിറങ്ങൾക്ക് (max + min) കൊണ്ടും ഹരിക്കുക.
- ഏറ്റവും വലിയ മൂല്യം ലഭിച്ച ചാനൽ hue H നിനെ നിർണ്ണയിക്കും — ചുവപ്പ് 0°, പച്ച 120°, നീലം 240° — മറ്റു രണ്ട് ചാനലുകൾ ആ സെഗ്മന്റിനകത്തു ഹ്യൂയെ സ്ഥാനമിടുന്നു.
പ്രായോഗിക ഉദാഹരണം
ഗണിതം തീർച്ചയായാണ്, പക്ഷേ HSL മൂല്യങ്ങൾ സാധാരണയായി ഡിഗ്രികളും ശതമാനങ്ങളും ആയി വലയിക്കുന്നു. തിരിച്ചുവരുമ്പോൾ അതുവഴി ഒരോ RGB ചാനലിൽ ഒന്നോ രണ്ടോ ഘട്ടം മാറാൻ സാധ്യതയുണ്ട് — പ്രായോഗികമായി അവ അദൃശ്യമാണ്, പക്ഷേ നിറങ്ങൾ നിരന്തരമായി റൗണ്ട്-ട്രിപ്പ് ചെയ്യുകയാണെങ്കിൽ അറിഞ്ഞിരിക്കേണ്ടതാണ്.
HEXയും HSLയും വിശദീകരിച്ചത്
HEX എന്താണ്?
മുന്നിൽ # ചിഹ്നമുള്ള ആറക്ക ഹെക്സാഡെസിമൽ സംഖ്യയാണ് HEX കോഡ്. ഇത് ഒരു നിറത്തിന്റെ റെഡ്, ഗ്രീൻ, ബ്ലൂ ചാനലുകൾ സംഭരിക്കുന്നു. ഓരോ ജോഡി അക്കങ്ങളും ഒരു ചാനലിനെ പ്രതിനിധീകരിക്കുന്നു, 00 (ഒന്നുമില്ല) മുതൽ FF (പൂർണ്ണം) വരെ. RGB-യുടെ അതേ 16.7 ദശലക്ഷം നിറങ്ങൾ ഇത് കൂടുതൽ ചെറിയ രൂപത്തിൽ നൽകുന്നു. CSS, ഡിസൈൻ ടൂളുകൾ, ബ്രാൻഡ് ഗൈഡ്ലൈനുകൾ എന്നിവയിൽ HEX ആണ് സ്ഥിരസ്ഥിതി.
- Syntax:
- #RRGGBB
- Range:
- ഒരു ചാനലിന് 00–FF
- Best for:
- CSS, design handoff, brand guidelines
HSL എന്താണ്?
HSL ഒരു നിറത്തെ hue (വർണ്ണചക്രത്തിലെ 0–360°), saturation (എത്ര നിറമുള്ളത്, 0–100%), lightness (എത്ര തെളിച്ചമുള്ളത്, 0–100%) എന്നിങ്ങനെ മൂന്ന് ഭാഗങ്ങളായി വിഭജിക്കുന്നു. ഓരോ ഭാഗവും ആളുകൾ നിറത്തെ വിവരിക്കുന്ന രീതിയോട് യോജിക്കുന്നതിനാൽ, ടിന്റുകൾ, ഷേഡുകൾ, സ്ഥിരതയുള്ള പാലറ്റുകൾ എന്നിവ കൈകൊണ്ടോ കോഡിലോ നിർമ്മിക്കാൻ HSL ആണ് ഏറ്റവും എളുപ്പമുള്ള ഫോർമാറ്റ്.
- Syntax:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Best for:
- palettes, tints and shades, theming
HEX to HSL reference table
സാധാരണയായി ഉപയോഗിക്കുന്ന CSS നിറങ്ങൾ HEX ൽ നിന്ന് HSL ആയി പരിവർത്തനം ചെയ്തിരിക്കുന്നു.
| നിറം | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |