RGB ഒരു സ്ക്രീനിൽ എത്രക്കുറിച്ച് ലൈറ്റ് പുറപ്പെടുവിക്കണമെന്ന് പറയുന്നു; HSL നിങ്ങള്ക്കുയിന്ന് നിറം എങ്ങനെ കാണപ്പെടുമെന്ന് പറഞ്ഞുതരുന്നു. മൂന്നു ചാനലുകളെ hue, saturation, lightness ലേക്ക് മാറ്റിയാൽ നിറത്തെ കൈ കൊണ്ട് എളുപ്പത്തിൽ ക്രമീകരിക്കാം.
RGB നിന്ന് HSL വരെ മാറ്റം എങ്ങനെ നടക്കുന്നു
- R, G, B ഓരോന്നും 255-ൽ 部ിഭജിച്ച് മൂല്യങ്ങളെ 0–1 പരിധിയിലാക്കുക.
- മൂന്ന് മൂല്യങ്ങളിൽ പരമാവധിയും പരമാവതിയും എടുത്ത് അവയുടെ ശരാശരി lightness L ആണ്.
- പരമാവധിയും പരമാവതിയും തുല്യമായിരുന്നെങ്കിൽ, നിറം ശൂന്യമാണ്: hue ഉം saturation ഉം രണ്ടും 0 ആണ്.
- അല്ലെങ്കില് പരമാവധി-പരമാവതിയുടെ വ്യത്യാസത്തിൽ നിന്നു S നിശ്ചയിച്ച് ഏത് ചാനൽ പരമാവധി ആണെന്ന് നോക്കി H വായിക്കുക.
പ്രായോഗിക ഉദാഹരണം
സിദ്ധാന്തത്തിൽ സൗഖ്യമുള്ളതാണ്. H, S, L സാധാരണയായി ഒറ്റപ്പെട്ട മുഴുവൻ നമ്പർ ആയി കാണിക്കപ്പെടുന്നതിനാൽ തിരിച്ചുവരുമ്പോൾ ഒരു ചാനൽ ഒരു അല്ലെങ്കിൽ രണ്ട് ഘട്ടങ്ങൾ മാറാം.
RGBയും HSLയും വിശദീകരിച്ചത്
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 എന്താണ്?
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 to HSL reference table
സാധാരണയായി ഉപയോഗിക്കുന്ന CSS നിറങ്ങൾ RGB ൽ നിന്ന് HSL ആയി പരിവർത്തനം ചെയ്തിരിക്കുന്നു.
| നിറം | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |