HEX to HSL converter

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

#2ECC71

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

HSL ഫലം
ഹ്യൂ
145°
സാച്ചുറേഷൻ
63%
ലൈറ്റ്‌നസ്
49%

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

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

ആളുകൾ നിറത്തെക്കുറിച്ച് സംസാരിക്കുന്ന രീതിയിൽ HSL അതിനെ വിവരിക്കുന്നു: ഏത് ഹ്യൂ, എത്ര നിറമുള്ളത്, എത്ര തെളിച്ചമുള്ളത്. HEX കോഡിനെ HSL-ലേക്ക് മാറ്റുന്നത്, നിറത്തെ യഥാർത്ഥത്തിൽ ക്രമീകരിക്കാവുന്ന രൂപത്തിലാക്കാനുള്ള ഏറ്റവും വേഗമുള്ള വഴിയാണ്: അത് തെളിച്ചം കൂട്ടാം, മങ്ങിക്കാം, അല്ലെങ്കിൽ അതിൽ നിന്ന് ഒരു മുഴുവൻ സ്കെയിൽ നിർമ്മിക്കാം.

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

  1. HEX കോഡിനെ RGB-ലേക്ക് മാറ്റി ഓരോ ചാനലിനെയും 255 കൊണ്ട് ഹരിക്കുക, അങ്ങനെ മൂന്നും 0-നും 1-നും ഇടയിൽ വരും.
  2. മൂന്ന് മൂല്യങ്ങളിലിൽ ഏറ്റവും വലിയതും ചെറുതും കണ്ടെത്തുക. അവയുടെ ശരാശരി ആണ് lightness L.
  3. അവയ്ക്കിടയിലുള്ള വ്യത്യാസമാണ് saturation S നിർണ്ണയിക്കുന്നത്: തെളിഞ്ഞ നിറങ്ങൾക്ക് (2 − max − min) കൊണ്ടും, ഇരുണ്ട നിറങ്ങൾക്ക് (max + min) കൊണ്ടും ഹരിക്കുക.
  4. ഏറ്റവും വലിയ മൂല്യം ലഭിച്ച ചാനൽ hue H നിനെ നിർണ്ണയിക്കും — ചുവപ്പ് 0°, പച്ച 120°, നീലം 240° — മറ്റു രണ്ട് ചാനലുകൾ ആ സെഗ്മന്റിനകത്തു ഹ്യൂയെ സ്ഥാനമിടുന്നു.

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

HEX #2ECC71=HSL hsl(145, 63%, 49%)

ഗണിതം തീർച്ചയായാണ്, പക്ഷേ HSL മൂല്യങ്ങൾ സാധാരണയായി ഡിഗ്രികളും ശതമാനങ്ങളും ആയി വലയിക്കുന്നു. തിരിച്ചുവരുമ്പോൾ അതുവഴി ഒരോ RGB ചാനലിൽ ഒന്നോ രണ്ടോ ഘട്ടം മാറാൻ സാധ്യതയുണ്ട് — പ്രായോഗികമായി അവ അദൃശ്യമാണ്, പക്ഷേ നിറങ്ങൾ നിരന്തരമായി റൗണ്ട്-ട്രിപ്പ് ചെയ്യുകയാണെങ്കിൽ അറിഞ്ഞിരിക്കേണ്ടതാണ്.

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

HEX എന്താണ്?

മുന്നിൽ # ചിഹ്നമുള്ള ആറക്ക ഹെക്സാഡെസിമൽ സംഖ്യയാണ് HEX കോഡ്. ഇത് ഒരു നിറത്തിന്റെ റെഡ്, ഗ്രീൻ, ബ്ലൂ ചാനലുകൾ സംഭരിക്കുന്നു. ഓരോ ജോഡി അക്കങ്ങളും ഒരു ചാനലിനെ പ്രതിനിധീകരിക്കുന്നു, 00 (ഒന്നുമില്ല) മുതൽ FF (പൂർണ്ണം) വരെ. RGB-യുടെ അതേ 16.7 ദശലക്ഷം നിറങ്ങൾ ഇത് കൂടുതൽ ചെറിയ രൂപത്തിൽ നൽകുന്നു. CSS, ഡിസൈൻ ടൂളുകൾ, ബ്രാൻഡ് ഗൈഡ്‌ലൈനുകൾ എന്നിവയിൽ HEX ആണ് സ്ഥിരസ്ഥിതി.

Syntax:
#RRGGBB
Range:
ഒരു ചാനലിന് 00–FF
Best for:
CSS, design handoff, brand guidelines

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

HEX to HSL reference table

സാധാരണയായി ഉപയോഗിക്കുന്ന CSS നിറങ്ങൾ HEX ൽ നിന്ന് HSL ആയി പരിവർത്തനം ചെയ്തിരിക്കുന്നു.

നിറംHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

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

HEX കോഡിനെ RGB-ലേക്ക് മാറ്റി ഓരോ ചാനലിനെയും 255 കൊണ്ട് ഹരിക്കുക, അങ്ങനെ മൂന്നും 0-നും 1-നും ഇടയിൽ വരും. മൂന്ന് മൂല്യങ്ങളിലിൽ ഏറ്റവും വലിയതും ചെറുതും കണ്ടെത്തുക. അവയുടെ ശരാശരി ആണ് lightness L. അവയ്ക്കിടയിലുള്ള വ്യത്യാസമാണ് saturation S നിർണ്ണയിക്കുന്നത്: തെളിഞ്ഞ നിറങ്ങൾക്ക് (2 − max − min) കൊണ്ടും, ഇരുണ്ട നിറങ്ങൾക്ക് (max + min) കൊണ്ടും ഹരിക്കുക. ഏറ്റവും വലിയ മൂല്യം ലഭിച്ച ചാനൽ hue H നിനെ നിർണ്ണയിക്കും — ചുവപ്പ് 0°, പച്ച 120°, നീലം 240° — മറ്റു രണ്ട് ചാനലുകൾ ആ സെഗ്മന്റിനകത്തു ഹ്യൂയെ സ്ഥാനമിടുന്നു.

ഗണിതം തീർച്ചയായാണ്, പക്ഷേ HSL മൂല്യങ്ങൾ സാധാരണയായി ഡിഗ്രികളും ശതമാനങ്ങളും ആയി വലയിക്കുന്നു. തിരിച്ചുവരുമ്പോൾ അതുവഴി ഒരോ RGB ചാനലിൽ ഒന്നോ രണ്ടോ ഘട്ടം മാറാൻ സാധ്യതയുണ്ട് — പ്രായോഗികമായി അവ അദൃശ്യമാണ്, പക്ഷേ നിറങ്ങൾ നിരന്തരമായി റൗണ്ട്-ട്രിപ്പ് ചെയ്യുകയാണെങ്കിൽ അറിഞ്ഞിരിക്കേണ്ടതാണ്.

HSL ഒരു നിറത്തെ hue (വർണ്ണചക്രത്തിലെ 0–360°), saturation (എത്ര നിറമുള്ളത്, 0–100%), lightness (എത്ര തെളിച്ചമുള്ളത്, 0–100%) എന്നിങ്ങനെ മൂന്ന് ഭാഗങ്ങളായി വിഭജിക്കുന്നു. ഓരോ ഭാഗവും ആളുകൾ നിറത്തെ വിവരിക്കുന്ന രീതിയോട് യോജിക്കുന്നതിനാൽ, ടിന്റുകൾ, ഷേഡുകൾ, സ്ഥിരതയുള്ള പാലറ്റുകൾ എന്നിവ കൈകൊണ്ടോ കോഡിലോ നിർമ്മിക്കാൻ HSL ആണ് ഏറ്റവും എളുപ്പമുള്ള ഫോർമാറ്റ്.

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

നിങ്ങൾക്ക് ഒരു നിറത്തിന്റെ വ്യത്യാസങ്ങൾ ആവശ്യമായപ്പോൾ ഉടൻ HSL-ലേക്ക് മാറ്റുക. H, S നിർത്തി L മാത്രം മാറ്റുമ്പോൾ ഒരു ഏകോപിത ടിന്റ്/ഷേഡ് സ്കെയിൽ ലഭിക്കും — HEX-ൽ ഇത് കൈയോടെ ചെയ്യുന്നത് വളരെ വല്ലതുണ്ട്.