സിഎസ്എസ് റിലേറ്റീവ് കളർ സിന്റാക്സ്: ആഗോള വെബ് ഡിസൈനിനായി എച്ച്എസ്എൽ, ലാബ് കളർ സ്പേസുകൾ മനസ്സിലാക്കാം

വെബ് ഡിസൈനിന്റെ ലോകം നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുകയാണ്, അതോടൊപ്പം കാഴ്ചയിൽ ആകർഷകവും എല്ലാവർക്കും ഉപയോഗിക്കാവുന്നതുമായ അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ നമ്മൾ ഉപയോഗിക്കുന്ന ടൂളുകളും ടെക്നിക്കുകളും മാറിക്കൊണ്ടിരിക്കുന്നു. സിഎസ്എസിലെ ഏറ്റവും പുതിയതും ആവേശകരവുമായ കൂട്ടിച്ചേർക്കലുകളിലൊന്നാണ് റിലേറ്റീവ് കളർ സിന്റാക്സ്. ഈ ശക്തമായ ഫീച്ചർ നിങ്ങളുടെ സിഎസ്എസിനുള്ളിൽ തന്നെ നിറങ്ങളിൽ മാറ്റങ്ങൾ വരുത്താൻ അനുവദിക്കുന്നു, ഇത് ഡൈനാമിക് തീമുകൾ, സൂക്ഷ്മമായ വ്യതിയാനങ്ങൾ, ആക്സസിബിൾ ഡിസൈനുകൾ എന്നിവ കൂടുതൽ എളുപ്പത്തിലും വഴക്കത്തിലും നിർമ്മിക്കാൻ സഹായിക്കുന്നു. ഈ ലേഖനം റിലേറ്റീവ് കളർ സിന്റാക്സിന്റെ സങ്കീർണ്ണതകളിലേക്ക് ആഴത്തിൽ ഇറങ്ങിച്ചെല്ലുന്നു, എച്ച്എസ്എൽ, ലാബ് കളർ സ്പേസുകൾക്ക് ഊന്നൽ നൽകിക്കൊണ്ട്, ലോകമെമ്പാടുമുള്ള നിങ്ങളുടെ പ്രോജക്റ്റുകൾക്കായി അവ എങ്ങനെ പ്രയോജനപ്പെടുത്താമെന്ന് വിശദീകരിക്കുന്നു.

എന്താണ് സിഎസ്എസ് റിലേറ്റീവ് കളർ സിന്റാക്സ്?

റിലേറ്റീവ് കളർ സിന്റാക്സിന് മുമ്പ്, സിഎസ്എസിൽ നിറങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിന് പലപ്പോഴും സാസ് (Sass) അല്ലെങ്കിൽ ലെസ് (Less) പോലുള്ള പ്രീപ്രൊസസറുകൾ ഉപയോഗിക്കുകയോ ജാവാസ്ക്രിപ്റ്റിനെ ആശ്രയിക്കുകയോ ചെയ്തിരുന്നു. റിലേറ്റീവ് കളർ സിന്റാക്സ് നിലവിലുള്ള നിറങ്ങളെ നിങ്ങളുടെ സിഎസ്എസ് നിയമങ്ങൾക്കുള്ളിൽ നേരിട്ട് മാറ്റം വരുത്താൻ അനുവദിച്ചുകൊണ്ട് ഈ രീതിയെ മാറ്റുന്നു. ഇത് ഒരു നിറത്തിന്റെ ഓരോ ഘടകങ്ങളെയും (എച്ച്എസ്എലിലെ ഹ്യൂ, സാച്ചുറേഷൻ, ലൈറ്റ്‌നെസ്സ് എന്നിവ പോലെ) പരാമർശിക്കുകയും അവയിൽ ഗണിതശാസ്ത്രപരമായ പ്രവർത്തനങ്ങൾ പ്രയോഗിക്കുകയും ചെയ്യുന്നു. ഇതിനർത്ഥം, ഒന്നിലധികം നിറങ്ങൾ മുൻകൂട്ടി നിർവചിക്കാതെ തന്നെ, ഒരു നിറത്തിന്റെ നിലവിലെ മൂല്യത്തെ അടിസ്ഥാനമാക്കി അതിനെ കൂടുതൽ തെളിച്ചമുള്ളതാക്കാനോ, ഇരുണ്ടതാക്കാനോ, സാച്ചുറേഷൻ കൂട്ടാനോ കുറയ്ക്കാനോ, അല്ലെങ്കിൽ ഹ്യൂ മാറ്റാനോ നിങ്ങൾക്ക് കഴിയും.

ഈ സിന്റാക്സ് color() ഫംഗ്ഷനെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. ഇത് ഒരു കളർ സ്പേസ് (hsl, lab, lch, rgb, അല്ലെങ്കിൽ oklab പോലുള്ളവ), മാറ്റം വരുത്തേണ്ട അടിസ്ഥാന നിറം, ആവശ്യമായ ക്രമീകരണങ്ങൾ എന്നിവ വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്:

.element {
 color: color(hsl red calc(h + 30) s l);
}

ഈ കോഡ് സ്നിപ്പെറ്റ് ചുവപ്പ് നിറം എടുത്ത്, hsl കളർ സ്പേസ് ഉപയോഗിച്ച്, ഹ്യൂ 30 ഡിഗ്രി വർദ്ധിപ്പിക്കുന്നു. h, s, l എന്നിവ യഥാക്രമം നിലവിലുള്ള ഹ്യൂ, സാച്ചുറേഷൻ, ലൈറ്റ്‌നെസ്സ് മൂല്യങ്ങളെ പ്രതിനിധീകരിക്കുന്നു. ഗണിതശാസ്ത്രപരമായ പ്രവർത്തനങ്ങൾ നടത്താൻ calc() ഫംഗ്ഷൻ നിർണായകമാണ്.

എന്തുകൊണ്ട് എച്ച്എസ്എൽ, ലാബ്?

റിലേറ്റീവ് കളർ സിന്റാക്സ് വിവിധ കളർ സ്പേസുകളിൽ പ്രവർത്തിക്കുമെങ്കിലും, എച്ച്എസ്എൽ, ലാബ് എന്നിവ നിറങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനും ആക്സസിബിലിറ്റിക്കും വ്യക്തമായ നേട്ടങ്ങൾ നൽകുന്നു. എന്തുകൊണ്ടെന്ന് നമുക്ക് പരിശോധിക്കാം:

എച്ച്എസ്എൽ (ഹ്യൂ, സാച്ചുറേഷൻ, ലൈറ്റ്‌നെസ്സ്)

എച്ച്എസ്എൽ എന്നത് ഒരു സിലിണ്ടർ ആകൃതിയിലുള്ള കളർ സ്പേസാണ്, ഇത് മനുഷ്യന്റെ കാഴ്ചപ്പാടിന് അനുസരിച്ച് നിറങ്ങളെ ലളിതമായി പ്രതിനിധീകരിക്കുന്നു. ഇത് മൂന്ന് ഘടകങ്ങളാൽ നിർവചിക്കപ്പെട്ടിരിക്കുന്നു:

ഹ്യൂ (Hue): കളർ വീലിലെ നിറത്തിന്റെ സ്ഥാനം (0-360 ഡിഗ്രി). ചുവപ്പ് സാധാരണയായി 0-ലും, പച്ച 120-ലും, നീല 240-ലും ആയിരിക്കും.
സാച്ചുറേഷൻ (Saturation): നിറത്തിന്റെ തീവ്രത അല്ലെങ്കിൽ ശുദ്ധത (0-100%). 0% ഗ്രേസ്‌കെയിലും 100% പൂർണ്ണമായും സാച്ചുറേറ്റഡും ആണ്.
ലൈറ്റ്‌നെസ്സ് (Lightness): നിറത്തിന്റെ പ്രകാശനില (0-100%). 0% കറുപ്പും 100% വെളുപ്പുമാണ്.

എച്ച്എസ്എല്ലിന്റെ പ്രയോജനങ്ങൾ:

എളുപ്പത്തിൽ മാറ്റങ്ങൾ വരുത്താം: കാഴ്ചയുടെ അടിസ്ഥാനത്തിൽ നിറങ്ങൾ ക്രമീകരിക്കാൻ എച്ച്എസ്എൽ സഹായിക്കുന്നു. ലൈറ്റ്‌നെസ്സ് കൂട്ടുന്നത് നിറത്തിന് കൂടുതൽ തെളിച്ചം നൽകുന്നു, സാച്ചുറേഷൻ കുറയ്ക്കുന്നത് നിറം മങ്ങിയതാക്കുന്നു, ഹ്യൂ മാറ്റുന്നത് കളർ വീലിൽ നിറത്തെ നീക്കുന്നു.
കളർ സ്കീമുകൾ നിർമ്മിക്കാൻ: യോജിച്ച കളർ സ്കീമുകൾ നിർമ്മിക്കുന്ന പ്രക്രിയ എച്ച്എസ്എൽ ലളിതമാക്കുന്നു. നിങ്ങൾക്ക് കോംപ്ലിമെന്ററി നിറങ്ങൾ (ഹ്യൂ + 180 ഡിഗ്രി), അനലോഗസ് നിറങ്ങൾ (അടുത്തടുത്തുള്ള ഹ്യൂകൾ), അല്ലെങ്കിൽ ട്രയാഡിക് നിറങ്ങൾ (120 ഡിഗ്രി അകലത്തിലുള്ള ഹ്യൂകൾ) എളുപ്പത്തിൽ നിർമ്മിക്കാം.
ഡൈനാമിക് തീമിംഗ്: ഡൈനാമിക് തീമിംഗിന് എച്ച്എസ്എൽ അനുയോജ്യമാണ്. നിങ്ങൾക്ക് ഒരു അടിസ്ഥാന നിറം നിർവചിച്ച്, റിലേറ്റീവ് കളർ സിന്റാക്സ് ഉപയോഗിച്ച് ലൈറ്റ്, ഡാർക്ക് മോഡുകൾക്കായി വ്യത്യസ്ത വകഭേദങ്ങൾ സൃഷ്ടിക്കാൻ കഴിയും.

ഉദാഹരണം: ഒരു ഡാർക്ക് മോഡ് തീം നിർമ്മിക്കുന്നു

നിങ്ങളുടെ ബ്രാൻഡ് നിറം #007bff (ഒരു തിളക്കമുള്ള നീല) ആണെന്ന് കരുതുക. കുറഞ്ഞ വെളിച്ചത്തിൽ കണ്ണിന് ആശ്വാസം നൽകുന്നതും എന്നാൽ ബ്രാൻഡിന്റെ തനിമ നിലനിർത്തുന്നതുമായ ഒരു ഡാർക്ക് മോഡ് തീം നിർമ്മിക്കാൻ നിങ്ങൾക്ക് എച്ച്എസ്എൽ ഉപയോഗിക്കാം.

:root {
 --brand-color: #007bff;
 --brand-color-hsl: color(oklch #007bff h s l);
 --bg-color: #fff;
 --text-color: #000;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #121212; /* ഒരു ഇരുണ്ട ചാരനിറം */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* അല്പം സാച്ചുറേഷൻ കുറച്ച്, തെളിച്ചം കൂട്ടിയ ബ്രാൻഡ് നിറം */
 }
}

body {
 background-color: var(--bg-color);
 color: var(--text-color);
}

.brand-button {
 background-color: var(--brand-color);
 color: #fff;
}

ഈ ഉദാഹരണത്തിൽ, ഉപയോക്താവ് ഡാർക്ക് കളർ സ്കീം ആണോ ഇഷ്ടപ്പെടുന്നതെന്ന് ഞങ്ങൾ പരിശോധിക്കുന്നു. അങ്ങനെയെങ്കിൽ, ഇരുണ്ട പശ്ചാത്തലത്തിൽ മികച്ച കോൺട്രാസ്റ്റ് നൽകുന്നതിനായി ബ്രാൻഡ് നിറത്തിന്റെ സാച്ചുറേഷൻ ചെറുതായി കുറയ്ക്കുകയും തെളിച്ചം കൂട്ടുകയും ചെയ്യാൻ ഞങ്ങൾ റിലേറ്റീവ് കളർ സിന്റാക്സ് ഉപയോഗിക്കുന്നു. ഇത് ഡാർക്ക് മോഡിൽ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുമ്പോൾ തന്നെ ബ്രാൻഡ് ഐഡന്റിറ്റി സ്ഥിരമായി നിലനിർത്തുന്നു.

ലാബ് (ലൈറ്റ്‌നെസ്സ്, a, b)

ലാബ് (അല്ലെങ്കിൽ CIELAB) എന്നത് കാഴ്ചയിൽ ഏകീകൃതമായി രൂപകൽപ്പന ചെയ്ത ഒരു കളർ സ്പേസാണ്. ഇതിനർത്ഥം, നിറത്തിന്റെ മൂല്യങ്ങളിലെ ഒരു മാറ്റം, കാഴ്ചയിൽ അനുഭവപ്പെടുന്ന നിറത്തിന്റെ വ്യത്യാസത്തിൽ ഏതാണ്ട് സമാനമായ മാറ്റത്തിന് കാരണമാകുന്നു, അത് ഏത് നിറത്തിൽ നിന്നാണ് തുടങ്ങിയത് എന്നത് പരിഗണിക്കാതെ തന്നെ. ഇത് മൂന്ന് ഘടകങ്ങളാൽ നിർവചിക്കപ്പെട്ടിരിക്കുന്നു:

L: ലൈറ്റ്‌നെസ്സ് (0-100%). 0 കറുപ്പും 100 വെളുപ്പുമാണ്.
a: പച്ച-ചുവപ്പ് അക്ഷത്തിലെ സ്ഥാനം. നെഗറ്റീവ് മൂല്യങ്ങൾ പച്ചയും പോസിറ്റീവ് മൂല്യങ്ങൾ ചുവപ്പുമാണ്.
b: നീല-മഞ്ഞ അക്ഷത്തിലെ സ്ഥാനം. നെഗറ്റീവ് മൂല്യങ്ങൾ നീലയും പോസിറ്റീവ് മൂല്യങ്ങൾ മഞ്ഞയുമാണ്.

ലാബിന്റെ പ്രയോജനങ്ങൾ:

പെർസെപ്ച്വൽ യൂണിഫോർമിറ്റി (കാഴ്ചയിലുള്ള ഏകത): കളർ കറക്ഷൻ, ആക്സസിബിലിറ്റി പരിശോധനകൾ പോലുള്ള കൃത്യമായ വർണ്ണ വ്യത്യാസങ്ങൾ നിർണായകമായ ജോലികൾക്ക് ലാബിന്റെ ഈ ഗുണം അനുയോജ്യമാണ്.
വിശാലമായ കളർ ഗാമറ്റ്: ആർജിബി (RGB) അല്ലെങ്കിൽ എച്ച്എസ്എൽ (HSL) എന്നിവയേക്കാൾ വിശാലമായ നിറങ്ങൾ ലാബിന് പ്രതിനിധീകരിക്കാൻ കഴിയും.
ആക്സസിബിലിറ്റി: ടെക്സ്റ്റും പശ്ചാത്തലവും തമ്മിൽ മതിയായ കളർ കോൺട്രാസ്റ്റ് ഉറപ്പാക്കാൻ ലാബ് പലപ്പോഴും ആക്സസിബിലിറ്റി കണക്കുകൂട്ടലുകളിൽ ഉപയോഗിക്കുന്നു. WCAG (വെബ് കണ്ടന്റ് ആക്സസിബിലിറ്റി ഗൈഡ്‌ലൈൻസ്) ലാബ് കളർ സ്പേസുമായി വളരെ അടുത്ത ബന്ധമുള്ള റിലേറ്റീവ് ലൂമിനൻസിനെ അടിസ്ഥാനമാക്കിയുള്ള ഒരു ഫോർമുലയാണ് ഉപയോഗിക്കുന്നത്.

ഉദാഹരണം: ആക്സസിബിലിറ്റിക്കായി കളർ കോൺട്രാസ്റ്റ് മെച്ചപ്പെടുത്തുന്നു

മതിയായ കളർ കോൺട്രാസ്റ്റ് ഉറപ്പാക്കുന്നത് ആക്സസിബിലിറ്റിക്ക് അത്യന്താപേക്ഷിതമാണ്. നിങ്ങളുടെ ടെക്സ്റ്റ് നിറവും പശ്ചാത്തല നിറവും WCAG AA കോൺട്രാസ്റ്റ് അനുപാതമായ 4.5:1 പാലിക്കുന്നില്ലെന്ന് കരുതുക. ആവശ്യകത നിറവേറ്റുന്നത് വരെ ടെക്സ്റ്റ് നിറത്തിന്റെ ലൈറ്റ്‌നെസ്സ് ക്രമീകരിക്കാൻ നിങ്ങൾക്ക് ലാബ് ഉപയോഗിക്കാം.

കുറിപ്പ്: സിഎസ്എസിൽ റിലേറ്റീവ് കളർ സിന്റാക്സ് ഉപയോഗിച്ച് കോൺട്രാസ്റ്റ് അനുപാതം നേരിട്ട് കൈകാര്യം ചെയ്യാൻ സാധ്യമല്ലെങ്കിലും, ലൈറ്റ്‌നെസ്സ് ക്രമീകരിക്കാൻ നമുക്ക് ഇത് ഉപയോഗിക്കാം, തുടർന്ന് ഒരു കോൺട്രാസ്റ്റ് ചെക്കിംഗ് ടൂൾ ഉപയോഗിച്ച് ഫലം പരിശോധിക്കാം.

.text {
 color: var(--text-color);
 background-color: var(--bg-color);
}

:root {
 --text-color: #333;
 --bg-color: #eee;
}

/*ഉദാഹരണം: ഇത് യഥാർത്ഥത്തിൽ കോൺട്രാസ്റ്റ് അനുപാതം നേരിട്ട് കണക്കാക്കുന്നില്ല.*/
/*ഇത് ലൈറ്റ്‌നെസ്സ് ക്രമീകരിക്കുന്നതിനുള്ള ഒരു ആശയപരമായ ഉദാഹരണമാണ്*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* ടെക്സ്റ്റിന് 10 യൂണിറ്റ് തെളിച്ചം കൂട്ടുന്നു. ടെക്സ്റ്റ് നിറത്തിന്റെ L മൂല്യം 100-ന് അടുത്താണെങ്കിൽ ഇതിന് ഒരു പരിധി വരെ മാത്രമേ ഫലം ലഭിക്കൂ. ഇരുണ്ടതാക്കാൻ, കുറയ്ക്കണം*/

}

ഈ ഉദാഹരണത്തിൽ, കോൺട്രാസ്റ്റ് മെച്ചപ്പെടുത്തുന്നതിനായി ടെക്സ്റ്റ് നിറത്തിന് തെളിച്ചം കൂട്ടാൻ ഞങ്ങൾ ശ്രമിക്കുന്നു. സിഎസ്എസിൽ കോൺട്രാസ്റ്റ് അനുപാതം കണക്കാക്കാൻ കഴിയാത്തതിനാൽ, മാറ്റത്തിന് ശേഷം ഫലം പരിശോധിച്ച് ആവശ്യാനുസരണം തിരുത്തേണ്ടതുണ്ട്.

Oklab: ലാബിനേക്കാൾ ഒരു മെച്ചപ്പെടുത്തൽ

ലാബിന്റെ ചില പോരായ്മകൾ പരിഹരിക്കുന്നതിനായി രൂപകൽപ്പന ചെയ്ത താരതമ്യേന പുതിയൊരു കളർ സ്പേസാണ് Oklab. ഇത് കൂടുതൽ മികച്ച പെർസെപ്ച്വൽ യൂണിഫോർമിറ്റി ലക്ഷ്യമിടുന്നു, ഇത് നിറങ്ങളുടെ മൂല്യങ്ങളിലെ മാറ്റങ്ങൾ കാഴ്ചയിൽ എങ്ങനെ ബാധിക്കുമെന്ന് പ്രവചിക്കുന്നത് എളുപ്പമാക്കുന്നു. പല സാഹചര്യങ്ങളിലും, സാച്ചുറേഷനും ലൈറ്റ്‌നെസ്സും കൈകാര്യം ചെയ്യുമ്പോൾ, ലാബിനേക്കാൾ സുഗമവും സ്വാഭാവികവുമായ രീതിയിൽ നിറങ്ങൾ ക്രമീകരിക്കാൻ Oklab സഹായിക്കുന്നു.

റിലേറ്റീവ് കളർ സിന്റാക്സിനൊപ്പം Oklab ഉപയോഗിക്കുന്നത് ലാബ് ഉപയോഗിക്കുന്നതിന് സമാനമാണ്. നിങ്ങൾ കളർ സ്പേസായി oklab എന്ന് വ്യക്തമാക്കിയാൽ മതി:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*നിറത്തിന് 10% തെളിച്ചം കൂട്ടുന്നു*/
}

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

എച്ച്എസ്എൽ, ലാബ് എന്നിവയുമായി ചേർന്നുള്ള റിലേറ്റീവ് കളർ സിന്റാക്സ് വെബ് ഡിസൈനിനായി നിരവധി സാധ്യതകൾ തുറക്കുന്നു. ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ ഇതാ:

കളർ പാലറ്റുകൾ നിർമ്മിക്കൽ: ഒരു അടിസ്ഥാന നിറം ഉണ്ടാക്കി, എച്ച്എസ്എൽ ഉപയോഗിച്ച് കോംപ്ലിമെന്ററി, അനലോഗസ്, അല്ലെങ്കിൽ ട്രയാഡിക് നിറങ്ങളുടെ ഒരു പാലറ്റ് നിർമ്മിക്കുക.
എലമെന്റുകൾ ഹൈലൈറ്റ് ചെയ്യൽ: ഒരു എലമെന്റിന്റെ ഹോവർ അല്ലെങ്കിൽ ഫോക്കസ് സമയത്ത് പശ്ചാത്തല നിറം തെളിച്ചമുള്ളതാക്കുകയോ ഇരുണ്ടതാക്കുകയോ ചെയ്ത് വിഷ്വൽ ഫീഡ്‌ബാക്ക് നൽകുക.
സൂക്ഷ്മമായ വ്യതിയാനങ്ങൾ സൃഷ്ടിക്കൽ: ആഴവും കാഴ്ചയിലെ താൽപ്പര്യവും സൃഷ്ടിക്കുന്നതിനായി ഹ്യൂവിലോ സാച്ചുറേഷനിലോ ചെറിയ വ്യത്യാസം ചേർക്കുക.
ഡൈനാമിക് തീമിംഗ്: ലൈറ്റ്, ഡാർക്ക് മോഡുകൾ നടപ്പിലാക്കുക, അല്ലെങ്കിൽ ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ കളർ സ്കീം ഇഷ്ടാനുസൃതമാക്കാൻ അനുവദിക്കുക.
ആക്സസിബിലിറ്റി മെച്ചപ്പെടുത്തലുകൾ: കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് മതിയായ കോൺട്രാസ്റ്റ് ഉറപ്പാക്കാൻ നിറങ്ങൾ ക്രമീകരിക്കുക.

ഉദാഹരണം: എച്ച്എസ്എൽ ഉപയോഗിച്ച് ഒരു കളർ പാലറ്റ് നിർമ്മിക്കുന്നു

:root {
 --base-color: #29abe2; /* ഒരു ഇളം നീല */
 --complementary-color: color(hsl var(--base-color) calc(h + 180) s l);
 --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l);
 --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l);
 --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l);
 --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l);
}

.base {
 background-color: var(--base-color);
}

.complementary {
 background-color: var(--complementary-color);
}

.analogous-1 {
 background-color: var(--analogous-color-1);
}

.analogous-2 {
 background-color: var(--analogous-color-2);
}

.triadic-1 {
 background-color: var(--triadic-color-1);
}

.triadic-2 {
 background-color: var(--triadic-color-2);
}

ഈ ഉദാഹരണം എച്ച്എസ്എൽ ഉപയോഗിച്ച് ഒരൊറ്റ അടിസ്ഥാന നിറത്തിൽ നിന്ന് ഒരു കൂട്ടം നിറങ്ങൾ എങ്ങനെ നിർമ്മിക്കാമെന്ന് കാണിക്കുന്നു. നിങ്ങളുടെ ഡിസൈൻ ആവശ്യങ്ങൾക്കനുസരിച്ച് വ്യത്യസ്ത കളർ ഹാർമണികൾ സൃഷ്ടിക്കാൻ ഈ കോഡ് എളുപ്പത്തിൽ മാറ്റം വരുത്താവുന്നതാണ്.

ഉദാഹരണം: ലാബ് ഉപയോഗിച്ച് ഒരു ഹോവർ ഇഫക്റ്റ് സൃഷ്ടിക്കുന്നു

.button {
 background-color: #4caf50; /* ഒരു പച്ച നിറം */
 color: #fff;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.button:hover {
 background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* അല്പം തെളിച്ചം കൂട്ടി a, b എന്നിവ വർദ്ധിപ്പിക്കുന്നു */
}

ഇവിടെ, ഹോവർ ചെയ്യുമ്പോൾ നിറം അല്പം തെളിച്ചമുള്ളതാക്കാനും ചുവപ്പിലേക്കും മഞ്ഞയിലേക്കും മാറ്റാനും ഞങ്ങൾ ലാബ് ഉപയോഗിക്കുന്നു, ഇത് ഉപയോക്താവിന് സൂക്ഷ്മവും എന്നാൽ ശ്രദ്ധേയവുമായ ഒരു വിഷ്വൽ ഫീഡ്‌ബാക്ക് നൽകുന്നു.

ബ്രൗസർ കോംപാറ്റിബിലിറ്റിയും ഫാൾബാക്കുകളും

ഏതൊരു പുതിയ സിഎസ്എസ് ഫീച്ചറിനെയും പോലെ, ബ്രൗസർ കോംപാറ്റിബിലിറ്റി ഒരു പ്രധാന പരിഗണനയാണ്. ക്രോം, ഫയർഫോക്സ്, സഫാരി, എഡ്ജ് എന്നിവയുൾപ്പെടെ മിക്ക ആധുനിക ബ്രൗസറുകളിലും റിലേറ്റീവ് കളർ സിന്റാക്സ് പിന്തുണയ്ക്കുന്നു. എന്നിരുന്നാലും, പഴയ ബ്രൗസറുകൾ ഇത് പിന്തുണച്ചേക്കില്ല.

നിങ്ങളുടെ വെബ്സൈറ്റ് എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ, റിലേറ്റീവ് കളർ സിന്റാക്സ് പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്ക് ഫാൾബാക്കുകൾ നൽകേണ്ടത് അത്യാവശ്യമാണ്. സിഎസ്എസ് വേരിയബിളുകളും @supports അറ്റ്-റൂളും ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* ഫാൾബാക്ക് നിറം */
}

@supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) {
 :root {
 --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* പിന്തുണയ്ക്കുന്നുവെങ്കിൽ റിലേറ്റീവ് കളർ സിന്റാക്സ് ഉപയോഗിക്കുക */
 }
}

.highlight {
 background-color: var(--highlight-color);
}

ഈ ഉദാഹരണത്തിൽ, ഞങ്ങൾ ഒരു ഫാൾബാക്ക് നിറം (#33b5e5) നിർവചിക്കുകയും, തുടർന്ന് ബ്രൗസർ റിലേറ്റീവ് കളർ സിന്റാക്സ് പിന്തുണയ്ക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കാൻ @supports അറ്റ്-റൂൾ ഉപയോഗിക്കുകയും ചെയ്യുന്നു. പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ, റിലേറ്റീവ് കളർ സിന്റാക്സ് ഉപയോഗിച്ച് സൃഷ്ടിച്ച നിറം ഉപയോഗിച്ച് ഞങ്ങൾ --highlight-color വേരിയബിൾ അപ്ഡേറ്റ് ചെയ്യുന്നു. പുതിയ ബ്രൗസറുകളിലെ പോലെ കൃത്യമായ നിറമല്ലെങ്കിലും, പഴയ ബ്രൗസറുകളിലെ ഉപയോക്താക്കൾക്കും ഹൈലൈറ്റ് ചെയ്ത ഒരു എലമെന്റ് കാണാൻ കഴിയുമെന്ന് ഇത് ഉറപ്പാക്കുന്നു.

ആക്സസിബിലിറ്റി പരിഗണനകൾ

കാഴ്ചയിൽ ആകർഷകമായ ഡിസൈനുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ശക്തമായ ഒരു ഉപകരണമാണ് റിലേറ്റീവ് കളർ സിന്റാക്സ് എങ്കിലും, ആക്സസിബിലിറ്റി പരിഗണിക്കേണ്ടത് നിർണായകമാണ്. നിങ്ങൾ സൃഷ്ടിക്കുന്ന വർണ്ണ കോമ്പിനേഷനുകൾ കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് മതിയായ കോൺട്രാസ്റ്റ് നൽകുന്നുവെന്ന് ഉറപ്പാക്കുക. നിങ്ങളുടെ വർണ്ണ കോമ്പിനേഷനുകൾ WCAG AA അല്ലെങ്കിൽ AAA കോൺട്രാസ്റ്റ് അനുപാത ആവശ്യകതകൾ പാലിക്കുന്നുണ്ടോയെന്ന് പരിശോധിക്കാൻ WebAIM കോൺട്രാസ്റ്റ് ചെക്കർ പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക.

ഓർക്കുക, നിറങ്ങൾ മനസ്സിലാക്കുന്ന രീതി ഓരോ വ്യക്തിയിലും കാര്യമായി വ്യത്യാസപ്പെട്ടിരിക്കാം. വിവിധതരം വർണ്ണാന്ധതയോ കാഴ്ച വൈകല്യമോ ഉള്ള ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ വെബ്സൈറ്റ് എളുപ്പത്തിൽ കാണാനും ഉപയോഗിക്കാനും കഴിയുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ അവരുമായി നിങ്ങളുടെ ഡിസൈനുകൾ പരീക്ഷിക്കുന്നത് പരിഗണിക്കുക.

ഉപസംഹാരം

സിഎസ്എസ് റിലേറ്റീവ് കളർ സിന്റാക്സ്, പ്രത്യേകിച്ചും എച്ച്എസ്എൽ, ലാബ് കളർ സ്പേസുകളുമായി ചേർക്കുമ്പോൾ, വെബ് ഡിസൈനർമാർക്ക് ഒരു വഴിത്തിരിവാണ്. ഇത് ഡൈനാമിക് തീമുകൾ, സൂക്ഷ്മമായ വ്യതിയാനങ്ങൾ, ആക്സസിബിൾ ഡിസൈനുകൾ എന്നിവ കൂടുതൽ എളുപ്പത്തിലും വഴക്കത്തിലും സൃഷ്ടിക്കാൻ നിങ്ങളെ പ്രാപ്തരാക്കുന്നു. എച്ച്എസ്എൽ, ലാബ് എന്നിവയുടെ തത്വങ്ങൾ മനസ്സിലാക്കുന്നതിലൂടെയും പഴയ ബ്രൗസറുകൾക്ക് ഫാൾബാക്കുകൾ നൽകുന്നതിലൂടെയും, ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്കായി കാഴ്ചയിൽ അതിശയകരവും എല്ലാവരെയും ഉൾക്കൊള്ളുന്നതുമായ അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ ഈ ശക്തമായ ഫീച്ചർ നിങ്ങൾക്ക് പ്രയോജനപ്പെടുത്താം.

റിലേറ്റീവ് കളർ സിന്റാക്സിന്റെ ശക്തി സ്വീകരിക്കുകയും നിങ്ങളുടെ വെബ് ഡിസൈൻ കഴിവുകളെ അടുത്ത ഘട്ടത്തിലേക്ക് ഉയർത്തുകയും ചെയ്യുക. എല്ലാവർക്കും മനോഹരവും ഉൾക്കൊള്ളുന്നതുമായ വെബ്സൈറ്റുകൾ സൃഷ്ടിക്കുന്നതിന് വ്യത്യസ്ത കളർ സ്പേസുകൾ, ഗണിതശാസ്ത്രപരമായ പ്രവർത്തനങ്ങൾ, ആക്സസിബിലിറ്റി പരിഗണനകൾ എന്നിവ ഉപയോഗിച്ച് പരീക്ഷിക്കുക.

കൂടുതൽ പഠിക്കാൻ

സിഎസ്എസ് റിലേറ്റീവ് കളർ സിന്റാക്സ് മനസ്സിലാക്കുകയും ഉപയോഗിക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് ആഗോള പ്രേക്ഷകർക്ക് അനുയോജ്യമായ, കൂടുതൽ ഡൈനാമിക്, ആക്സസിബിൾ, കാഴ്ചയിൽ ആകർഷകമായ വെബ്സൈറ്റുകൾ സൃഷ്ടിക്കാൻ കഴിയും. നിറങ്ങൾ ഉപയോഗിച്ച് ഡിസൈൻ ചെയ്യുമ്പോൾ എല്ലായ്പ്പോഴും ആക്സസിബിലിറ്റിക്കും ഉപയോക്തൃ അനുഭവത്തിനും മുൻഗണന നൽകാൻ ഓർക്കുക.