HSL ആളുകൾ വർണത്തെ വർണിക്കുന്നത് പോലെ വിവരിക്കുന്നു: ഏതു തരം നിറം (hue), എത്ര നിറമുള്ളത് (saturation), എത്ര തിളക്കമുള്ളത് (lightness). 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 മില്യൺ നിറങ്ങൾ ഒരു ചെറുതായുള്ള നോട്ടേഷനിൽ നൽകുന്നു. HEX ആണ് CSS, design tools, ബ്രാൻഡ് ഗൈڈر്ലൈൻസിൽ ഡീഫോൾട്ട്.
- Syntax:
- #RRGGBB
- Range:
- ഒരു ചാനലിന് 00–FF
- Best for:
- CSS, design handoff, brand guidelines
HSL എന്താണ്?
HSL ഒരു കളർ മൂന്ന് ഭാഗങ്ങളായി വിഭജിക്കുന്നു: hue (0–360° കളർ വീലിൽ), saturation (എത്ര നിറമുള്ളത്, 0–100%) და lightness (എത്ര പ്രഭാമാനമുള്ളത്, 0–100%). ഓരോ ഭാഗവും മനുഷ്യർ നിറത്തെ വിവരിക്കുന്ന രീതിക്ക് തുല്യമായതിനാൽ, tints, shades, സ്ഥിരതയുള്ള palettes നിർമ്മിക്കാൻ 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%) |