RGB ടു HSL കൺവെർട്ടർ

ഈ പേജ് എന്താണ് ചെയ്യുന്നത്?

RGB (Red, Green, Blue) നിറത്തെ മൂന്ന് സംഖ്യകളായി 0 മുതൽ 255 വരെ നൽകിയാൽ, ഈ ഉപകരണം ഉടൻ തന്നെ അതിനെ HSL (Hue, Saturation, Lightness) ആയി മാറ്റുന്നു. HSL-ൽ ഹ്യൂ 0–360° ആയും സാച്ചുറേഷനും ലൈറ്റ്നെസും ശതമാനമായും കാണിക്കും. കൂടാതെ HEX, HSV, CMYK (ഓൺ-സ്ക്രീൻ എസ്റ്റിമേറ്റ്), LAB എന്നീ ഫോർമാറ്റുകളിലും നിറം ലഭിക്കും. ഏത് ഫീൽഡ് തിരുത്തിയാലും മറ്റെല്ലാം ഉടൻ പുതുക്കും. ബ്രൗസറിൽ തന്നെയാണ് എല്ലാ കൺവേർഷനും നടക്കുന്നത്; നിങ്ങൾ നൽകുന്ന ഒന്നും സെർവറിലേക്ക് അപ്ലോഡ് ചെയ്യപ്പെടുന്നില്ല.

ഈ പേജിനെ വ്യത്യസ്തമാക്കുന്നത് എന്ത്?

ഡിസ്പ്ലേ സ്വഭാവമുള്ള RGB മോഡലിൽ നിന്ന് മനുഷ്യ ധാരണയ്ക്കായി നിർമ്മിച്ച HSL മോഡലിലേക്കാണ് ഇവിടെ മാറ്റം. RGB-യിൽ ഒരു ചാനൽ മാറ്റുമ്പോൾ പലപ്പോഴും നിറത്തിന്റെ ഹ്യൂ തന്നെ മാറും. എന്നാൽ HSL-ൽ ലൈറ്റ്നെസ് ക്രമീകരിക്കാം, ഹ്യൂ മാറ്റമില്ലാതെ നിലനിർത്താം. അതിനാൽ കളർ പാലറ്റുകളും തീമുകളും ആക്സസിബിൾ കോൺട്രാസ്റ്റ് വേരിയേഷനുകളും സൃഷ്ടിക്കാൻ HSL ആണ് ഏറ്റവും അനുയോജ്യം. RGB മൂല്യങ്ങൾ 0–255 ലെവലിലെ അസംസ്കൃത തീവ്രതകളാണ്; HSL ഹ്യൂ ഒരു 360° വൃത്തത്തിലും സാച്ചുറേഷനും ലൈറ്റ്നെസും ശതമാനത്തിലും പ്രകടിപ്പിക്കുന്നു.

ഇൻപുട്ടും ഔട്ട്പുട്ടും

ഇൻപുട്ട്: RGB മൂന്ന് സംഖ്യകൾ 0–255 പരിധിയിൽ, കോമ അല്ലെങ്കിൽ സ്പേസ് കൊണ്ട് വേർതിരിച്ച്. ഉദാ: 79, 70, 229.

ഔട്ട്പുട്ട്:

• HSL: ഹ്യൂ (0–360), സാച്ചുറേഷൻ (%), ലൈറ്റ്നെസ് (%)
• HEX: #4F46E5 പോലെ
• HSV (Hue, Saturation, Value)
• CMYK (സയാൻ, മജന്ത, യെല്ലോ, കീ/ബ്ലാക്ക്) – ഓൺ-സ്ക്രീൻ എസ്റ്റിമേറ്റ് മാത്രം. പ്രൊഫഷണൽ പ്രിന്റിനായി ഇത് പരിശോധിക്കാതെ ഉപയോഗിക്കരുത്.
• LAB (CIELAB) – പെർസെപ്ച്വൽ യൂണിഫോമിറ്റിക്ക് പേരുകേട്ട സ്പേസ്

ഏത് ഫോർമാറ്റ് എഡിറ്റ് ചെയ്താലും ബാക്കിയെല്ലാം തൽക്ഷണം പുതുക്കും. HSL നേരിട്ട് നൽകിയാൽ അത് RGB-ലേക്ക് മാറ്റാനും കഴിയും.

നിയമങ്ങളും അതിർത്തി കേസുകളും

• അസാധുവായ RGB ഇൻപുട്ട്: മൂന്ന് പൂർണ്ണസംഖ്യകൾ 0–255-ന് പുറത്താണെങ്കിൽ പിശക് സന്ദേശം കാണിക്കും: "Enter RGB as three numbers 0–255, like 79, 70, 229."
• അസാധുവായ HSL ഇൻപുട്ട്: ഹ്യൂ 0–360-ഉം രണ്ട് ശതമാനം മൂല്യങ്ങളും ആയിരിക്കണം. അല്ലെങ്കിൽ: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
• LAB അല്ലെങ്കിൽ CMYK ദൃശ്യ RGB പരിധിക്ക് പുറത്താണെങ്കിൽ: ടൂൾ അതിനെ ഏറ്റവും അടുത്ത ഡിസ്പ്ലേ ചെയ്യാവുന്ന നിറത്തിലേക്ക് ക്രമീകരിക്കും. ആ നിറത്തെ തിരികെ മാറ്റുമ്പോൾ ചെറിയ മാറ്റം വരാം.
• CMYK ഔട്ട്പുട്ട്: ഓൺ-സ്ക്രീൻ എസ്റ്റിമേറ്റ് മാത്രം. പ്രൊഫഷണൽ പ്രിന്റിന് ഇത് പരിശോധിക്കാതെ ഉപയോഗിക്കരുത്.

ഈ ടൂൾ ആർക്ക് വേണ്ടി?

RGB എങ്ങനെ സ്ക്രീനിൽ നിറത്തെ പ്രതിനിധീകരിക്കുന്നു

RGB ആഡിറ്റീവ് മിക്സിംഗ് അടിസ്ഥാനമാക്കിയുള്ളതാണ്. ഓരോ പിക്സലും ചുവപ്പ്, പച്ച, നീല എന്നീ മൂന്ന് ലൈറ്റ് സ്രോതസ്സുകൾ കൊണ്ട് നിർമ്മിച്ചിരിക്കുന്നു. 0 എന്നാൽ ആ ലൈറ്റ് പൂർണ്ണമായും ഓഫ്, 255 എന്നാൽ പൂർണ്ണ ശക്തിയിൽ. ഉദാഹരണത്തിന് 255, 0, 0 ശുദ്ധമായ ചുവപ്പാണ്. 255, 255, 255 വെള്ള. 0,0,0 കറുപ്പ്. ഈ 0–255 സ്കെയിൽ 8-ബിറ്റ് പ്രതിനിധാനത്തിൽ നിന്നാണ് വരുന്നത് (2^8 = 256 മൂല്യങ്ങൾ). sRGB എന്ന വർക്കിംഗ് സ്പേസാണ് മിക്ക സ്ക്രീനുകളും ഉപയോഗിക്കുന്നത്. RGB-യിൽ ലൈറ്റ്നെസ് മാറ്റണമെങ്കിൽ മൂന്ന് ചാനലുകളും ഒരുമിച്ച് മാറ്റേണ്ടി വരും, അത് പലപ്പോഴും ഹ്യൂവിനെ ബാധിക്കും.

HSL മോഡൽ: മനുഷ്യ ധാരണയ്ക്കുള്ള ഒരു ബദൽ

HSL നിറത്തെ മൂന്ന് അളവുകളായി വിഭജിക്കുന്നു:

• Hue (0–360): നിറത്തിന്റെ തരം (ചുവപ്പ്, മഞ്ഞ, നീല മുതലായവ). ഒരു വർണ്ണ ചക്രത്തിലെ കോൺ.
• Saturation (0–100%): നിറത്തിന്റെ ശുദ്ധത. 0% = ഗ്രേ (അവർണ്ണം), 100% = പൂർണ്ണ വർണ്ണം.
• Lightness (0–100%): നിറത്തിന്റെ ലഘുത്വം. 0% = കറുപ്പ്, 100% = വെള്ള, 50% = “പ്യുവർ” നിറം.

ഈ ഘടന കാരണം, ലൈറ്റ്നെസ് മാറ്റുമ്പോൾ ഹ്യൂ മാറ്റമില്ലാതെ നിൽക്കും. അതുകൊണ്ട് തന്നെ ടിന്റുകളും (കൂടുതൽ വെള്ള) ഷേഡുകളും (കൂടുതൽ കറുപ്പ്) ടോണുകളും (കൂടുതൽ ഗ്രേ) സൃഷ്ടിക്കാൻ HSL അനുയോജ്യമാണ്.

RGB-യിൽ നിന്ന് HSL-ലേക്ക് മാറ്റുന്ന ഗണിതം

കൺവേർഷൻ ഘട്ടങ്ങൾ:

1. നോർമലൈസേഷൻ: ഓരോ RGB മൂല്യവും 255 കൊണ്ട് ഹരിക്കുക. (ഉദാ: 79 → 0.3098, 70 → 0.2745, 229 → 0.8980)
2. കണ്ടെത്തുക: ഈ മൂന്ന് മൂല്യങ്ങളിൽ ഏറ്റവും വലുത് (max) ഏറ്റവും ചെറുത് (min).
3. ലൈറ്റ്നെസ് (L): L = (max + min) / 2.
4. സാച്ചുറേഷൻ (S): max == min ആണെങ്കിൽ S = 0 (അവർണ്ണം). അല്ലെങ്കിൽ, ഡെൽറ്റ = max - min.
   • L ≤ 0.5 ആണെങ്കിൽ, S = delta / (max + min)
   • L > 0.5 ആണെങ്കിൽ, S = delta / (2 - max - min)
5. ഹ്യൂ (H): max == min ആണെങ്കിൽ H = 0. അല്ലെങ്കിൽ:
   • max == R ആണെങ്കിൽ: H = ((G - B) / delta) mod 6
   • max == G ആണെങ്കിൽ: H = ((B - R) / delta) + 2
   • max == B ആണെങ്കിൽ: H = ((R - G) / delta) + 4
   • തുടർന്ന് H = H × 60 (ഡിഗ്രി). H < 0 ആണെങ്കിൽ 360 കൂട്ടുക.

ഉദാഹരണത്തിന് 79, 70, 229 (ഒരു ഇൻഡിഗോ ഷേഡ്) നോർമലൈസ് ചെയ്താൽ max ≈ 0.8980 (B), min ≈ 0.2745 (G). L ≈ 0.5863 → 58.6%. delta ≈ 0.6235. L > 0.5 ആയതിനാൽ S ≈ 0.6235 / (2 - 0.8980 - 0.2745) ≈ 0.6235 / 0.8275 ≈ 0.7535 → 75.4%. H: max=B, അതിനാൽ H = ((R - G)/delta) + 4 = ((0.3098 - 0.2745)/0.6235) + 4 ≈ 0.0566 + 4 = 4.0566, ×60 = 243.4°. അതിനാൽ HSL ≈ 243°, 75%, 59%.

HSL ഉപയോഗിച്ച് പാലറ്റുകളും തീമുകളും നിർമ്മിക്കുക

HSL-ന്റെ ഏറ്റവും വലിയ ഗുണം ലൈറ്റ്നെസ് മാറ്റാം, ഹ്യൂ ഒരേപോലെ നിലനിർത്താം എന്നതാണ്. ഒരു ബ്രാൻഡ് നിറത്തിന്റെ (H = 210) ഇരുണ്ട പതിപ്പ് ഉണ്ടാക്കാൻ L കുറച്ചാൽ മതി. വെളുത്ത പതിപ്പിന് L കൂട്ടാം. സാച്ചുറേഷൻ കുറച്ച് പേസ്റ്റൽ നിറങ്ങൾ സൃഷ്ടിക്കാം. ഇത് CSS-ൽ hsl(210, 80%, 50%) പോലെ നേരിട്ട് ഉപയോഗിക്കാനും കഴിയും.

പ്രവേശനക്ഷമതയ്ക്കായി HSL

WCAG (Web Content Accessibility Guidelines) കോൺട്രാസ്റ്റ് അനുപാതം കണക്കാക്കാൻ റിലേറ്റീവ് ലുമിനൻസ് ഉപയോഗിക്കുന്നു. HSL-ന്റെ ലൈറ്റ്നെസ് ചാനൽ (L) ലുമിനൻസിന് തുല്യമല്ലെങ്കിലും, L ക്രമീകരിച്ച് കോൺട്രാസ്റ്റ് വർദ്ധിപ്പിക്കാം. ഉദാഹരണത്തിന്, hsl(30, 100%, 50%) (ഓറഞ്ച്) വെള്ള പശ്ചാത്തലത്തിൽ വായിക്കാൻ ബുദ്ധിമുട്ടാണ്. L 40% ആക്കിയാൽ മതി, ഹ്യൂ സംരക്ഷിച്ച് വായനാക്ഷമത മെച്ചപ്പെടും.

HSL-ന്റെ പരിമിതികൾ

HSL പെർസെപ്ച്വൽ യൂണിഫോം അല്ല. അതായത്, ഒരേ L മൂല്യം ഉള്ള മഞ്ഞയും നീലയും മനുഷ്യന്റെ കണ്ണിന് വ്യത്യസ്ത ലൈറ്റ്നെസ് തോന്നും. മഞ്ഞ സ്വാഭാവികമായും തെളിച്ചമുള്ളതായി തോന്നും. അതുകൊണ്ട് കൃത്യമായ പെർസെപ്ച്വൽ ഗ്രേഡിയന്റുകൾക്ക് LAB അല്ലെങ്കിൽ LCH പോലുള്ള മോഡലുകൾ മികച്ചതാണ്. കൂടാതെ RGB, HSL ഇവ രണ്ടും ഡിസ്പ്ലേ-റഫറൻസ്ഡ് ആണ്; LAB-ൽ നിന്നോ CMYK-ൽ നിന്നോ മാറ്റുമ്പോൾ ദൃശ്യ വർണ്ണപരിധിക്ക് പുറത്തുള്ള മൂല്യങ്ങൾ ടൂൾ ക്രമീകരിക്കുന്നു.

വെബ് ഡെവലപ്മെന്റിൽ HSL-ന്റെ പ്രായോഗിക ഉപയോഗം

CSS hsl() ഫംഗ്ഷൻ (ഉദാ: background-color: hsl(243, 75%, 59%)) ബ്രൗസറുകൾ നേറ്റീവ് ആയി പിന്തുണയ്ക്കുന്നു. JavaScript-ൽ HSL മൂല്യങ്ങൾ കൈകാര്യം ചെയ്യുന്നത് RGB-യെക്കാൾ എളുപ്പമാണ്. ഉദാഹരണത്തിന്, ഒരു ഡാർക്ക് മോഡ് ടോഗിളിനായി L 20% കുറയ്ക്കുക, എന്നാൽ H ഉം S ഉം നിലനിർത്തുക. RGB-യിൽ ഇതിന് മൂന്ന് ചാനലുകളും വ്യത്യസ്ത അനുപാതത്തിൽ മാറ്റേണ്ടി വരും.

പതിവ് ചോദ്യങ്ങൾ (FAQ)

1. RGB-യിൽ 0, 0, 0 നൽകിയാൽ HSL എന്താകും? കറുപ്പ്: HSL = 0°, 0%, 0%. ലൈറ്റ്നെസ് 0% ആയതിനാൽ ഹ്യൂവും സാച്ചുറേഷനും അപ്രസക്തം.

2. HSL-ൽ നേരിട്ട് ലൈറ്റ്നെസ് 100% ആക്കിയാൽ RGB എന്താകും? വെള്ള: RGB 255, 255, 255. ഹ്യൂ, സാച്ചുറേഷൻ എത്രയായാലും 100% ലൈറ്റ്നെസിൽ വെള്ള മാത്രം.

3. CMYK ഔട്ട്പുട്ട് പ്രിന്റിന് ഉപയോഗിക്കാമോ? ടൂൾ ഓൺ-സ്ക്രീൻ എസ്റ്റിമേറ്റ് മാത്രം നൽകുന്നു. പ്രൊഫഷണൽ പ്രിന്റിന് CMYK പ്രൊഫൈലുകൾ ഉപയോഗിച്ച് പരിശോധിക്കേണ്ടതാണ്.

4. LAB മൂല്യങ്ങൾ എങ്ങനെ ശരിയാകും? LAB ദൃശ്യ വർണ്ണപരിധിക്ക് പുറത്തുള്ള നിറങ്ങളെ പ്രതിനിധീകരിക്കും. ടൂൾ അവയെ ഏറ്റവും അടുത്ത ഡിസ്പ്ലേ ചെയ്യാവുന്ന RGB-യിലേക്ക് ക്രമീകരിക്കും. അതിനാൽ തിരികെ മാറ്റുമ്പോൾ ചെറിയ വ്യതിയാനം ഉണ്ടാകും.

5. ഒരു RGB മൂല്യം തെറ്റായി നൽകിയാൽ എന്ത് സംഭവിക്കും? മൂന്ന് പൂർണ്ണസംഖ്യകൾ 0–255-ന് പുറത്താണെങ്കിൽ, ടൂൾ പിശക് സന്ദേശം കാണിക്കും. ഉദാഹരണത്തിന്, 79, 70, 300 നൽകിയാൽ “Enter RGB as three numbers 0–255, like 79, 70, 229” എന്ന് കാണിക്കും.

6. ബ്രൗസറിൽ ഡാറ്റ സംരക്ഷിക്കപ്പെടുമോ? ഇല്ല. എല്ലാ കൺവേർഷനും നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെയാണ് നടക്കുന്നത്. ഒന്നും സെർവറിലേക്ക് അയയ്ക്കുന്നില്ല.