HSL-ൽ നിറം തിരഞ്ഞെടുക്കുന്നത് സൗകര്യപ്രദമാണ്, പക്ഷേ സ്റ്റൈൽഷീറ്റുകളും ഡിസൈൻ കൈമാറ്റങ്ങളും ബ്രാൻഡ് ഡോക്യുമെന്റുകളും এখনও HEX-ൽ പ്രവർത്തിക്കുന്നു. ഈ കൺവ Behavioralർ gap നിർത്തി ഏതു hue, saturation, lightness സംയോജനത്തിനും ആറു-ഡിജിറ്റ് കോഡ് നൽകുന്നു.
HSL നിന്ന് HEX വരെ മാറ്റം എങ്ങനെ നടക്കുന്നു
- Saturation ഉം lightness ഉം ഭാഗങ്ങളാക്കി മാറ്റുക: 60% → 0.6.
- chroma C = (1 − |2L − 1|) × S കണക്കാക്കുക — ഇത് നിറം ഗ്രേഷ്യൽ (വെള്ളാശ) മുതൽ എത്ര ದೂರെയാണെന്ന് കാണിക്കും.
- ആ chroma ചുവപ്പ്, പച്ച, നീല ചാനലുകളിൽ ഹ്യൂ ഉപയോഗിച്ച് സ്ഥാനം നിശ്ചയിക്കുക, പിന്നെ മൂവതെയും L − C/2 കൊണ്ട് ഷിഫ്റ്റ് ചെയ്യുക.
- ഓരോ ചാനലും 255-ൽ ഗുണിച്ച്, വലിപ്പിച്ച്, രണ്ടടി ഹെക്സാഡെസിമൽ അക്കങ്ങളായി എഴുതുക.
പ്രായോഗിക ഉദാഹരണം
റൗണ്ടിംഗ് അവസാന ഘട്ടത്തിലാണ് — ഓരോ ചാനലും 0–255 മുഴുവൻ മൂല്യങ്ങളിലേക്ക് കുത്തി മാറ്റുമ്പോൾ. ഫലമായി നിങ്ങളുടെ HSL ഇൻപുട്ടിന് ഏറ്റവും մոտമുള്ള HEX കോഡാണ് ലഭിക്കുന്നത്, സാധാരണയായി ഒരു ഡിസൈൻ ടൂളിൽ കാണുന്നതുമായി ഒത്തുചേരുന്നതായിരിക്കും.
HSLയും HEXയും വിശദീകരിച്ചത്
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 എന്താണ്?
HEX കോഡ് ആറ്-ടിജിറ്റുള്ള ഹെക്സാഡെസിമൽ നമ്പർ ആണ്, മുന്നിൽ # ഉം കൂടിയുള്ളത്, ഒരോ കളറിന്റെ റെഡ്, ഗ്രീൻ, ബ്ലൂ ചാനലുകൾ സംഭരിക്കുന്നു. ഓരോ ഡിജിറ്റുകളുടെ ജോഡിയും ഒരു ചാനൽ കവർ ചെയ്യുന്നു, 00 (യാതും ഇല്ല) മുതൽ FF (പൂർണ്ണം) വരെ, ഇത് RGB ന് സമാനമായ 16.7 മില്യൺ നിറങ്ങൾ ഒരു ചെറുതായുള്ള നോട്ടേഷനിൽ നൽകുന്നു. HEX ആണ് CSS, design tools, ബ്രാൻഡ് ഗൈڈر്ലൈൻസിൽ ഡീഫോൾട്ട്.
- Syntax:
- #RRGGBB
- Range:
- ഒരു ചാനലിന് 00–FF
- Best for:
- CSS, design handoff, brand guidelines
HSL to HEX reference table
സാധാരണയായി ഉപയോഗിക്കുന്ന CSS നിറങ്ങൾ HSL ൽ നിന്ന് HEX ആയി പരിവർത്തനം ചെയ്തിരിക്കുന്നു.
| നിറം | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |