HSL to RGB converter

ഏതെങ്കിലും HSL നിറം RGB ആയി മാറ്റുക — തൽക്ഷണം, സൗജന്യമായി

#F39C12

ഏതെങ്കിലും നിറ മൂല്യം പേസ്റ്റ് ചെയ്യുക — ഞങ്ങൾ ഫോർമാറ്റ് നിങ്ങക്കുവേണ്ടി കണ്ടെത്തും.

H
S
L
RGB ഫലം
ചുവപ്പ്
243
പച്ച
156
നീല
18

ഈ നിറം എല്ലാ ഫോർമാറ്റുകളിലും

CMYK പ്രൊഫൈൽ: Coated FOGRA39 (യൂറോപ്പിലെ Photoshop-ന്റെ ഡിഫോൾട്ട്)

HSL നിറം തിരഞ്ഞെടുക്കാൻ സൗഹൃദമാർഗമാണ്; RGB ആണ് സ്ക്രീനുകൾ, canvas APIകൾ iyo image കോഡുകൾ ഉപയോഗിക്കുന്നത്. ഈ കൺവർട്ടർ ഏതെങ്കിലും hue, saturation, lightness ത്രയം 0–255 ചാനലുകളായി കൃത്യമായി മാറ്റുന്നു.

HSL നിന്ന് RGB വരെ മാറ്റം എങ്ങനെ നടക്കുന്നു

  1. Sയും Lയും അലവുകൾ ആയി (fractions) മാറ്റി chroma C = (1 − |2L − 1|) × S എന്ന് കണക്കാക്കൂ.
  2. Hue നെ 60 ന് വിഭജിച്ച് അതിന്റെ കളർ വീൽ സെഗ്മെന്റ് കണ്ടെത്തൂ; അന്തർവർത്തി മൂല്യം X = C × (1 − |(H/60 mod 2) − 1|) എന്നതായി കണക്കാക്കൂ.
  3. ആ സെഗ്മെന്റിന്റെ അടിസ്ഥാനത്തിൽ C, X, 0 നെ R, G, B സ്ലോട്ടുകളിൽ നിയോഗിക്കൂ.
  4. Lightness ഔഫ്‌സെറ്റ് L − C/2 എല്ലായിടത്തിലും ചേർത്ത് മൂന്ന് ചാനലുകൾക്കും 255 കൊണ്ട് ഗുണിക്കുക.

പ്രായോഗിക ഉദാഹരണം

HSL hsl(37, 90%, 51%)=RGB rgb(243, 156, 18)

ഫൈനൽ റൗണ്ടിങ്ങ് ചെയ്തതുവരെ ഫലം കൃത്യമാണ്. fractional hue അല്ലെങ്കിൽ saturation മൂല്യങ്ങൾ പിന്തുടരപ്പെടും; ഏറ്റവും അടുത്ത RGB ത്രയത്തിൽ അവ എത്തും.

HSLയും RGBയും വിശദീകരിച്ചത്

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

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 ആയി പരിവർത്തനം ചെയ്തിരിക്കുന്നു.

നിറംHSLRGB
blackhsl(0, 0%, 0%)rgb(0, 0, 0)
whitehsl(0, 0%, 100%)rgb(255, 255, 255)
redhsl(0, 100%, 50%)rgb(255, 0, 0)
limehsl(120, 100%, 50%)rgb(0, 255, 0)
bluehsl(240, 100%, 50%)rgb(0, 0, 255)
yellowhsl(60, 100%, 50%)rgb(255, 255, 0)
orangehsl(39, 100%, 50%)rgb(255, 166, 0)
tealhsl(180, 100%, 25%)rgb(0, 127, 128)
purplehsl(300, 100%, 25%)rgb(128, 0, 127)
grayhsl(0, 0%, 50%)rgb(128, 128, 128)

നിരന്തരം ചോദിക്കപ്പെടുന്ന ചോദ്യങ്ങൾ

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 ത്രയത്തിൽ അവ എത്തും.

RGB ഒരു കളർ മൂന്ന് ലൈറ്റ് ചാനലുകളായി വിവരിക്കുന്നു — red, green, blue — ഓരോത് 0–255 വരെയാണ്. ഇത് സ്ക്രീനുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെ പ്രതിഫലിപ്പിക്കുന്നു: മൂന്നു ചാനലുകളും 255 ആയാൽ വെള്ള, എല്ലാ ചാനലുകളും 0 ആണെങ്കിൽ കറുപ്പ്. കളറുമായി കണക്കുകൾ ചെയ്യേണ്ടപ്പോഴെല്ലാം RGB അനുയോജ്യമാണ്, rgba() വഴി transparency ചേർക്കാനും കഴിയും.

അതെ. ഇൻപുട്ടിന്റെ അടുത്തുള്ള സ്വപ് ബട്ടൺ നിന്നെ RGB to HSL കൺവർത്തറിലേക്ക് തിരയിക്കും, അത് ശരിയായി അതേ രീതിയിൽ പ്രവർത്തിക്കുന്നു. രണ്ട് ദിശകളും ഒരേ ഫോർമുല ഉപയോഗിക്കുന്നു, വെറും റിവേഴ്സ് ആയി പ്രയോഗിച്ചാൽ മതിയാകും.

കോഡിൽ ഒരു പാലറ്റ് ജനറേറ്റ് ചെയ്യണോ? HSL-ലെ ഹ്യൂവിലൂടെ ലൂപ്പ് ചെയ്ത് ഓരോ ഘട്ടവും RGB-ലേക്ക് മാറ്റുക. മാനുവൽ RGB ക്രമീകരണത്തിലൂടെ ഒരിക്കലും ലഭിക്കാത്ത, തുല്യ അകലത്തിലുള്ള നിറങ്ങൾ നിങ്ങൾക്ക് ലഭിക്കും.