കളർ പേരുകൾ കേസ് സെൻസിറ്റീവ് അല്ല.

വാക്യഘടന

നിറം: ടീൽ;

2.2 സംഖ്യാ വർണ്ണ മൂല്യങ്ങൾ

2.2.1. RGB മോഡൽ നിറങ്ങൾ

ഒരു RGB മൂല്യത്തിൻ്റെ ഹെക്സാഡെസിമൽ ഫോർമാറ്റ് ഒരു # ചിഹ്നമാണ്, തൊട്ടുപിന്നാലെ മൂന്നോ ആറോ ഹെക്സാഡെസിമൽ പ്രതീകങ്ങൾ. പൂജ്യങ്ങൾ ചേർക്കുന്നതിനുപകരം അക്കങ്ങൾ പകർത്തി #rgb എന്ന മൂന്നക്ക RGB നൊട്ടേഷൻ #rrggbb എന്ന ആറക്ക രൂപത്തിലേക്ക് പരിവർത്തനം ചെയ്യപ്പെടുന്നു. ഉദാഹരണത്തിന്, #fb0 #ffbb00 ലേക്ക് വികസിക്കുന്നു. ഷോർട്ട് #fff എൻട്രിയിൽ വെള്ള #ffffff വ്യക്തമാക്കാനാകുമെന്ന് ഇത് ഉറപ്പാക്കുന്നു, കൂടാതെ ഡിസ്‌പ്ലേ കളർ ഡെപ്‌ത്യിലെ ഏതെങ്കിലും ഡിപൻഡൻസികൾ നീക്കം ചെയ്യുന്നു.

ഫങ്ഷണൽ നൊട്ടേഷനിലെ ഒരു RGB മൂല്യത്തിൻ്റെ ഫോർമാറ്റ് rgb ആണ് (അതിന് ശേഷം മൂന്ന് സംഖ്യാ മൂല്യങ്ങളുടെ (മൂന്ന് പൂർണ്ണ മൂല്യങ്ങൾ അല്ലെങ്കിൽ മൂന്ന് ശതമാനം മൂല്യങ്ങൾ) കോമ കൊണ്ട് വേർതിരിച്ച ലിസ്റ്റ് ഒരു ചിഹ്നത്തിന് ശേഷം). പൂർണ്ണസംഖ്യ മൂല്യം 255 ഹെക്സാഡെസിമൽ നൊട്ടേഷനിൽ 100%, F അല്ലെങ്കിൽ FF എന്നിവയുമായി യോജിക്കുന്നു:

Rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF

സംഖ്യാ മൂല്യങ്ങൾക്ക് ചുറ്റും സ്പേസ് പ്രതീകങ്ങൾ അനുവദനീയമാണ്.

പുസ്തകത്തിൻ്റെ ആദ്യ ഭാഗത്ത്, CSS-ൽ ടെക്സ്റ്റ് കളർ എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് ചില ഉദാഹരണങ്ങളിൽ ഞങ്ങൾ ഇതിനകം തന്നെ പ്രദർശിപ്പിച്ചിട്ടുണ്ട്. ഇവിടെ സങ്കീർണ്ണമായ ഒന്നും തന്നെയില്ല: നിങ്ങൾക്ക് കളർ പ്രോപ്പർട്ടിയും വാചകം വർണ്ണമാക്കാൻ ആഗ്രഹിക്കുന്ന നിറത്തിൻ്റെ മൂല്യവും ആവശ്യമാണ്.

പി (നിറം: #211C18;)

ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, #211C18 മൂല്യം ഹെക്സാഡെസിമൽ കളർ കോഡിനെ പ്രതിനിധീകരിക്കുന്നു. നിങ്ങൾക്ക് ഇതിനകം ഹെക്സാഡെസിമൽ നമ്പർ സിസ്റ്റം പരിചയമുണ്ടെങ്കിൽ, അടുത്ത ഖണ്ഡിക വായിക്കുന്നത് ഒഴിവാക്കാം. കളർ മോഡലുകളും (RGB, HSL) കീവേഡുകളും ഉപയോഗിച്ച് - വെബിൽ നിറങ്ങളെ പ്രതിനിധീകരിക്കുന്നതിനുള്ള മറ്റ് വഴികളെക്കുറിച്ചും ഞങ്ങൾ കൂടുതൽ സംസാരിക്കും. ഈ വിവരങ്ങൾ തുടക്കക്കാർക്ക് ഉപയോഗപ്രദമാകും കൂടാതെ വായിക്കാൻ ശുപാർശ ചെയ്യുന്നു.

ഹെക്സാഡെസിമൽ നിറങ്ങൾ (ഹെക്സ്)

ഹെക്സാഡെസിമൽ നമ്പർ സിസ്റ്റം ( ഹെക്സാഡെസിമൽ, ഹെക്സ്) 16 എന്ന സംഖ്യയെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. ഒരു ഹെക്സാഡെസിമൽ മൂല്യം എഴുതാൻ, 16 പ്രതീകങ്ങൾ ഉപയോഗിക്കുന്നു: 0 മുതൽ 9 വരെയുള്ള അറബി അക്കങ്ങളും ലാറ്റിൻ അക്ഷരമാലയുടെ ആദ്യ അക്ഷരങ്ങളും (A, B, C, D, E, F). ഹെക്സാഡെസിമൽ ഫോർമാറ്റിലുള്ള വർണ്ണം 00 മുതൽ FF വരെയുള്ള മൂന്ന് രണ്ടക്ക സംഖ്യകളായി എഴുതിയിരിക്കുന്നു (അവയ്ക്ക് മുമ്പായി ഒരു ഹാഷ് ചിഹ്നം # ഉണ്ടായിരിക്കണം), ഇത് മൂന്ന് ഘടകങ്ങളുമായി യോജിക്കുന്നു: ചുവപ്പ്, പച്ച, നീല (RGB കളർ മോഡൽ). മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ഒരു കളർ എൻട്രിയെ #RRGGBB ആയി പ്രതിനിധീകരിക്കാം, അവിടെ ആദ്യ ജോടി പ്രതീകങ്ങൾ ചുവപ്പ് നിലയും രണ്ടാമത്തേത് - പച്ച ലെവലും മൂന്നാമത്തേത് - നീല നിലയും നിർണ്ണയിക്കുന്നു. തത്ഫലമായുണ്ടാകുന്ന നിറം ഈ മൂന്ന് നിറങ്ങളുടെ സംയോജനമാണ്.

ഹെക്‌സ് നിറങ്ങൾക്കുള്ള ചുരുക്കെഴുത്ത്

ചില ഹെക്സാഡെസിമൽ വർണ്ണ മൂല്യങ്ങൾ ചുരുക്കത്തിൽ എഴുതാം. ഇത് ചെയ്യുന്നതിന്, #RRGGBB പോലെയുള്ള എൻട്രി #RGB ആക്കുക. ഹെക്‌സ് നമ്പറിൽ മൂന്ന് ജോഡി സമാന പ്രതീകങ്ങൾ അടങ്ങിയിരിക്കുമ്പോൾ ഇത് ചെയ്യാൻ കഴിയും.

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

ഹെക്‌സ് നിറങ്ങൾക്കായുള്ള സംക്ഷിപ്‌ത നൊട്ടേഷൻ്റെ ഉദാഹരണങ്ങൾ:

RGB കളർ മോഡൽ

CSS-ൽ നിറങ്ങൾ വ്യക്തമാക്കുന്നതിനുള്ള രണ്ടാമത്തെ മാർഗ്ഗം ദശാംശ RGB മൂല്യങ്ങൾ (ചുവപ്പ്, നീല, പച്ച) ഉപയോഗിക്കുക എന്നതാണ്. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ കളർ പ്രോപ്പർട്ടിക്ക് ശേഷം rgb എന്ന കീവേഡ് എഴുതേണ്ടതുണ്ട്, തുടർന്ന് പരാൻതീസിസിലും കോമകളാൽ വേർതിരിക്കുകയും വേണം - 0 മുതൽ 255 വരെയുള്ള ശ്രേണിയിലുള്ള മൂന്ന് സംഖ്യകൾ, ഓരോന്നിനും ചുവപ്പ്, പച്ച, നീല നിറങ്ങളുടെ തീവ്രത എന്നാണ് അർത്ഥമാക്കുന്നത്. , g, b). ഉയർന്ന സംഖ്യ, കൂടുതൽ തീവ്രമായ നിറം. ഉദാഹരണത്തിന്, തിളക്കമുള്ള പച്ച നിറം ലഭിക്കാൻ, നിങ്ങൾ എഴുതേണ്ടതുണ്ട്:

പി (നിറം: rgb(0, 255, 0); )

എന്നാൽ മഞ്ഞകലർന്ന കടുക് നിറത്തിന് ഇനിപ്പറയുന്ന അർത്ഥമുണ്ട്:

നിറം: rgb(94, 81, 3); /* താഴെ ഒരേ നിറമാണ്, ഹെക്സാഡെസിമലിൽ എഴുതിയിരിക്കുന്നു: */ നിറം: #5E5103;

കറുപ്പിൻ്റെ മൂല്യം (0, 0, 0) എന്നും വെള്ളയ്ക്ക് (255, 255, 255) എന്നും എഴുതിയിരിക്കുന്നു. ഈ മൂല്യങ്ങൾ ശതമാനമായി സൂചിപ്പിക്കാനും കഴിയും. അതിനാൽ, 255 എന്ന നമ്പർ 100% മായി യോജിക്കുന്നു, അതിനാൽ, വെള്ള നിറം ഇനിപ്പറയുന്ന രീതിയിൽ ക്രമീകരിക്കാം:

നിറം: rgb(100%, 100%, 100%);

വർണ്ണ അർത്ഥങ്ങൾ എവിടെയാണ് തിരയേണ്ടത്

ഒരുപക്ഷേ നിങ്ങൾക്ക് ഒരു ചോദ്യമുണ്ട്: ഈ വർണ്ണ അർത്ഥങ്ങളെല്ലാം നിങ്ങൾക്ക് എവിടെ നിന്ന് ലഭിക്കും? നിങ്ങൾക്ക് നിറങ്ങൾ തിരഞ്ഞെടുക്കാനും വർണ്ണ സ്കീമുകൾ നിർമ്മിക്കാനും കഴിയുന്ന നിരവധി ഗ്രാഫിക് എഡിറ്റർമാരും ഓൺലൈൻ സേവനങ്ങളും ഉണ്ട്. നിങ്ങൾക്ക് അനുയോജ്യമായ നിറം തിരഞ്ഞെടുത്ത് അതിൻ്റെ RGB, ഹെക്സ് മൂല്യങ്ങൾ എന്നിവയും അതിലേറെയും നേടാനാകുന്ന ഏറ്റവും ജനപ്രിയമായ പ്രോഗ്രാമുകളിലൊന്നാണ് അഡോബ് ഫോട്ടോഷോപ്പ്. ഒരു ബദലായി, നിങ്ങൾക്ക് ഒരു നിറം മാത്രമല്ല, മുഴുവൻ വർണ്ണ സ്കീമും എളുപ്പത്തിൽ തിരഞ്ഞെടുക്കാൻ കഴിയുന്ന പ്രത്യേക സൈറ്റുകളുണ്ട്. അഡോബ് കളർ സിസി സേവനം ഒരു മികച്ച ഉദാഹരണമാണ്.

RGBA കളർ മോഡൽ

RGB-യിലെ പോലെ തന്നെ നിങ്ങൾക്ക് RGBA ഫോർമാറ്റിൽ ഒരു നിറം സജ്ജമാക്കാൻ കഴിയും. ആർജിബിഎയും ആർജിബിയും തമ്മിലുള്ള വ്യത്യാസം ഒരു ആൽഫ ചാനലിൻ്റെ സാന്നിധ്യമാണ്, ഇത് നിറത്തിൻ്റെ സുതാര്യതയ്ക്ക് ഉത്തരവാദിയാണ്. 0 മുതൽ 1 വരെയുള്ള ശ്രേണിയിലുള്ള ഒരു സംഖ്യ ഉപയോഗിച്ചാണ് സുതാര്യത സജ്ജീകരിച്ചിരിക്കുന്നത്, ഇവിടെ 0 എന്നാൽ പൂർണ്ണ സുതാര്യത എന്നാണ് അർത്ഥമാക്കുന്നത്, 1, നേരെമറിച്ച്, പൂർണ്ണമായും അതാര്യമാണ്. 0.5 പോലെയുള്ള ഇൻ്റർമീഡിയറ്റ് മൂല്യങ്ങൾ ഒരു അർദ്ധസുതാര്യ രൂപം സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു (ഹ്രസ്വരൂപം അനുവദനീയമാണ്, പൂജ്യമില്ലാതെ, പക്ഷേ ഒരു ഡോട്ട് ഉപയോഗിച്ച് - .5). ഉദാഹരണത്തിന്, വാചകം നിറമുള്ളതും ചെറുതായി സുതാര്യവുമാക്കുന്നതിന്, നിങ്ങൾ rgba കീവേഡും കളർ പ്രോപ്പർട്ടിക്ക് ശേഷം വർണ്ണ മൂല്യവും എഴുതേണ്ടതുണ്ട്:

പി (നിറം: rgba(94, 81, 3, .9); )

ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ പതിപ്പ് 8-ഉം അതിനുമുമ്പും പിന്തുണയ്ക്കുന്നില്ല എന്നതാണ് RGBA-യുടെ പോരായ്മ. പ്രത്യേകിച്ച് IE8-ന്, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന പരിഹാരം പ്രയോഗിക്കാൻ കഴിയും:

പി (നിറം: rgb(94, 81, 3); നിറം: rgba(94, 81, 3, .9); )

ഉദാഹരണത്തിലെ ആദ്യ പ്രോപ്പർട്ടി IE8 ബ്രൗസറിനായി ഉദ്ദേശിച്ചുള്ളതാണ്, അത് ആവശ്യമുള്ള നിറത്തിൽ ടെക്സ്റ്റ് പ്രദർശിപ്പിക്കും, പക്ഷേ സുതാര്യത ഇല്ലാതെ. RGBA മനസ്സിലാക്കുന്ന ആ ബ്രൗസറുകൾ സുതാര്യതയോടെ രണ്ടാമത്തെ പ്രോപ്പർട്ടി എലമെൻ്റിന് ബാധകമാക്കും.

HSL (HSLA) കളർ മോഡലുകൾ

HSL കളർ മോഡലിൻ്റെ (Hue, Saturation, Lightness) കോർഡിനേറ്റുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് CSS-ൽ നിറം സജ്ജീകരിക്കാനും കഴിയും. അതിൽ ഇങ്ങനെ എഴുതിയിരിക്കുന്നു:

പി (നിറം: hsl(165, 100%, 50%); )

ബ്രാക്കറ്റുകളിലെ ആദ്യ സംഖ്യ നിറം എന്നാണ് അർത്ഥമാക്കുന്നത്, അത് ഡിഗ്രിയിൽ നൽകിയിരിക്കുന്നു (സംഖ്യാ ശ്രേണി 0 മുതൽ 359 വരെ). കളർ വീൽ എങ്ങനെയുണ്ടെന്ന് നിങ്ങൾ ഓർക്കുകയാണെങ്കിൽ, ഡിഗ്രികൾ ഉപയോഗിക്കുന്നത് എന്തുകൊണ്ടാണെന്ന് മനസിലാക്കാൻ എളുപ്പമാണ്:

ബ്രാക്കറ്റിലെ രണ്ടാമത്തെയും മൂന്നാമത്തെയും അക്കങ്ങൾ യഥാക്രമം സാച്ചുറേഷൻ, ലാഘവത്വം എന്നിവ അർത്ഥമാക്കുന്നു. അവയുടെ മൂല്യങ്ങൾ 0 മുതൽ 100 ​​വരെയുള്ള ശതമാനത്തിൽ സജ്ജീകരിച്ചിരിക്കുന്നു. സാച്ചുറേഷൻ മൂല്യം കുറയുന്തോറും നിറം കൂടുതൽ നിശബ്ദമാകും. പൂജ്യത്തിൻ്റെ ഒരു സാച്ചുറേഷൻ മൂല്യം ചാരനിറത്തിൽ കലാശിക്കും, ഏത് നിറത്തിലുള്ള മൂല്യമാണെങ്കിലും. നിറത്തിൻ്റെ തെളിച്ചം വ്യക്തമാക്കാൻ ലൈറ്റ്നെസ് മൂല്യം നിങ്ങളെ അനുവദിക്കുന്നു. കുറഞ്ഞ മൂല്യങ്ങൾ ഇരുണ്ട നിറത്തിലുള്ള ഷേഡുകളിൽ കലാശിക്കുന്നു, ഉയർന്ന മൂല്യങ്ങൾ ഇളം ഷേഡുകളിൽ കലാശിക്കുന്നു. ലഘുത്വത്തിന് 100% മൂല്യം എന്നാൽ വെളുപ്പ്, 0% എന്നാൽ കറുപ്പ് എന്നാണ് അർത്ഥമാക്കുന്നത്.

എച്ച്എസ്എൽഎ കളർ മോഡൽ എച്ച്എസ്എൽ പോലെ തന്നെ പ്രവർത്തിക്കുന്നു, പക്ഷേ, ആർജിബിഎയ്ക്ക് സമാനമായി, 0 മുതൽ 1 വരെയുള്ള ശ്രേണിയിൽ ആവശ്യമുള്ള മൂല്യം വ്യക്തമാക്കുന്ന, നിങ്ങൾക്ക് നിറത്തിൻ്റെ സുതാര്യത സജ്ജമാക്കാൻ കഴിയുന്ന ഒരു ആൽഫ ചാനൽ ഉണ്ട്:

പി (നിറം: hsla(165, 100%, 50%, .6); )

Internet Explorer പതിപ്പ് 8-ഉം അതിനുമുമ്പും ഒഴികെയുള്ള എല്ലാ ബ്രൗസറുകളും HSL, HSLA എന്നിവയെ പിന്തുണയ്ക്കുന്നു.

സാധാരണ HTML നിറങ്ങൾ

വെബിൽ വർണ്ണങ്ങളെ പ്രതിനിധീകരിക്കുന്നതിനുള്ള മറ്റൊരു മാർഗ്ഗം കീവേഡുകളിലൂടെയാണ്, ഒരു ഘടകത്തിന് ഒരു നിറം വ്യക്തമാക്കാൻ ഇത് ഉപയോഗിക്കാം. ഉദാഹരണം:

പി (നിറം: കറുപ്പ്;)

കളർ പ്രോപ്പർട്ടി മൂല്യത്തിൽ എഴുതാൻ കഴിയുന്ന 16 സ്റ്റാൻഡേർഡ് നിറങ്ങളുണ്ട്:

ഈ നിറങ്ങൾ എല്ലാ ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നു. ഇവ കൂടാതെ, വർണ്ണങ്ങളുടെ വ്യത്യസ്ത ഷേഡുകൾക്കായി ഏകദേശം 130 അധിക കീവേഡുകൾ ഉണ്ട്. ഈ നിറങ്ങളുടെ പൂർണ്ണമായ പട്ടിക W3C റഫറൻസ് പുസ്തകത്തിൽ കാണാം.

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

ഫലം

CSS-ൽ, കളർ പ്രോപ്പർട്ടി ഉപയോഗിച്ചാണ് ടെക്‌സ്‌റ്റിൻ്റെ നിറം വ്യക്തമാക്കുന്നത്, അതിൻ്റെ മൂല്യം പല തരത്തിൽ എഴുതാം - ഹെക്‌സാഡെസിമൽ (ഹെക്‌സ്) ഫോർമാറ്റിൽ, RGB അല്ലെങ്കിൽ HSL ഫോർമാറ്റിൽ അല്ലെങ്കിൽ ഒരു കീവേഡ് വ്യക്തമാക്കുന്നതിലൂടെ. ഒരു കീവേഡ് ഉപയോഗിച്ച് വ്യക്തമാക്കിയ വർണ്ണത്തിൻ്റെ തെറ്റായ പ്രദർശനം ഒഴിവാക്കാൻ, അതിൻ്റെ ഹെക്സ് മൂല്യം വ്യക്തമാക്കുന്നതാണ് നല്ലത്.

ഒരു ആൽഫ ചാനൽ (RGBA, HSLA ഫോർമാറ്റുകൾ) ഉപയോഗിച്ച് മൂലകത്തിൻ്റെ സുതാര്യത സജ്ജമാക്കാനും സാധിക്കും. IE8 ബ്രൗസറും അതിൻ്റെ മുൻ പതിപ്പുകളും RGBA, HSL, HSLA ഫോർമാറ്റുകളെ പിന്തുണയ്ക്കുന്നില്ല എന്നത് പരിഗണിക്കേണ്ടതാണ്.

ഈ ട്യൂട്ടോറിയലിൽ നമ്മൾ അവസാനത്തെ ടാഗ് ആട്രിബ്യൂട്ട് നോക്കും , ഇത് വാചകത്തിൻ്റെ നിറം സജ്ജമാക്കുന്നു. സ്ഥിരസ്ഥിതിയായി, ടെക്സ്റ്റ് കറുപ്പാണ്, അത് വെളുത്ത പശ്ചാത്തലത്തിൽ പ്രദർശിപ്പിക്കും. ഇതിനായി html-ൽ ടെക്സ്റ്റ് നിറം മാറ്റുക, നിങ്ങൾ ടാഗിൻ്റെ വർണ്ണ ആട്രിബ്യൂട്ട് പ്രയോഗിക്കേണ്ടതുണ്ട് :