HSL നിറം തിരഞ്ഞെടുക്കാൻ സൗഹൃദമാർഗമാണ്; RGB ആണ് സ്ക്രീനുകൾ, canvas APIകൾ iyo image കോഡുകൾ ഉപയോഗിക്കുന്നത്. ഈ കൺവർട്ടർ ഏതെങ്കിലും hue, saturation, lightness ത്രയം 0–255 ചാനലുകളായി കൃത്യമായി മാറ്റുന്നു.
HSL നിന്ന് RGB വരെ മാറ്റം എങ്ങനെ നടക്കുന്നു
- Sയും Lയും അലവുകൾ ആയി (fractions) മാറ്റി chroma C = (1 − |2L − 1|) × S എന്ന് കണക്കാക്കൂ.
- Hue നെ 60 ന് വിഭജിച്ച് അതിന്റെ കളർ വീൽ സെഗ്മെന്റ് കണ്ടെത്തൂ; അന്തർവർത്തി മൂല്യം X = C × (1 − |(H/60 mod 2) − 1|) എന്നതായി കണക്കാക്കൂ.
- ആ സെഗ്മെന്റിന്റെ അടിസ്ഥാനത്തിൽ C, X, 0 നെ R, G, B സ്ലോട്ടുകളിൽ നിയോഗിക്കൂ.
- Lightness ഔഫ്സെറ്റ് L − C/2 എല്ലായിടത്തിലും ചേർത്ത് മൂന്ന് ചാനലുകൾക്കും 255 കൊണ്ട് ഗുണിക്കുക.
പ്രായോഗിക ഉദാഹരണം
ഫൈനൽ റൗണ്ടിങ്ങ് ചെയ്തതുവരെ ഫലം കൃത്യമാണ്. fractional hue അല്ലെങ്കിൽ saturation മൂല്യങ്ങൾ പിന്തുടരപ്പെടും; ഏറ്റവും അടുത്ത RGB ത്രയത്തിൽ അവ എത്തും.
HSLയും RGBയും വിശദീകരിച്ചത്
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
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
HSL to RGB reference table
സാധാരണയായി ഉപയോഗിക്കുന്ന CSS നിറങ്ങൾ HSL ൽ നിന്ന് RGB ആയി പരിവർത്തനം ചെയ്തിരിക്കുന്നു.
| നിറം | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |