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

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

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

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

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

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

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

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

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

RGB കളർ മോഡൽ

CSS-ൽ നിറങ്ങൾ വ്യക്തമാക്കുന്നതിനുള്ള രണ്ടാമത്തെ മാർഗ്ഗം ദശാംശ RGB മൂല്യങ്ങൾ (ചുവപ്പ്, നീല, പച്ച) ഉപയോഗിക്കുക എന്നതാണ്. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ കളർ പ്രോപ്പർട്ടിക്ക് ശേഷം rgb എന്ന കീവേഡ് എഴുതേണ്ടതുണ്ട്, തുടർന്ന് പരാൻതീസിസിലും കോമകളാൽ വേർതിരിക്കുകയും വേണം - 0 മുതൽ 255 വരെയുള്ള ശ്രേണിയിലുള്ള മൂന്ന് സംഖ്യകൾ, ഓരോന്നിനും ചുവപ്പ്, പച്ച, എന്നിവയുടെ തീവ്രത എന്നാണ് അർത്ഥമാക്കുന്നത്. നീല നിറങ്ങൾ(r, 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); )

ബ്രൗസർ പിന്തുണയ്ക്കുന്നില്ല എന്നതാണ് RGBA-യുടെ പോരായ്മ ഇന്റർനെറ്റ് എക്സ്പ്ലോറർപതിപ്പുകൾ 8 ഉം അതിനുമുമ്പും. പ്രത്യേകിച്ച് 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); )

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

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

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

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

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

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

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

ഫലം

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

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

കമ്പ്യൂട്ടർ മോണിറ്ററുകൾ, അതുപോലെ സ്ക്രീനുകൾ മൊബൈൽ ഫോണുകൾ, സ്‌മാർട്ട്‌ഫോണുകളും ടാബ്‌ലെറ്റുകളും, പിക്‌സലുകൾ എന്ന് വിളിക്കുന്ന ആയിരക്കണക്കിന് ചെറിയ സ്‌ക്വയറുകൾ ഉൾക്കൊള്ളുന്നു (നിങ്ങൾ മോണിറ്ററിൽ സൂക്ഷ്മമായി നോക്കിയാൽ, നിങ്ങൾക്ക് അവ കാണാൻ കഴിയും). സ്‌ക്രീൻ ഓഫായിരിക്കുമ്പോൾ, അത് പ്രകാശം പുറപ്പെടുവിക്കാത്തതിനാൽ അത് കറുപ്പാണ്; അത് ഓണായിരിക്കുമ്പോൾ, ഓരോ പിക്സലും വ്യത്യസ്ത നിറം എടുക്കുന്നു, ഇത് സ്ക്രീനിൽ നോക്കുമ്പോൾ നമ്മൾ കാണുന്ന ചിത്രം സൃഷ്ടിക്കുന്നു.

ഒരു ഘടകത്തിന്റെയോ പശ്ചാത്തലത്തിന്റെയോ വാചകത്തിന്റെയോ ഫ്രെയിമിനായി ഞങ്ങൾ ഒരു നിറം സജ്ജീകരിക്കുമ്പോൾ, അവ രചിച്ചിരിക്കുന്ന പിക്സലുകൾക്കായി ഞങ്ങൾ നിറം സജ്ജീകരിക്കുന്നു. CSS-ൽ നിറങ്ങൾ വ്യക്തമാക്കുന്നതിന് രണ്ട് പൊതു സമീപനങ്ങളുണ്ട്: പേര് അല്ലെങ്കിൽ മൂല്യം. ഒരു പേര് വ്യക്തമാക്കുക എന്നതാണ് ഏറ്റവും ലളിതമായത്: ചുവപ്പ് ചുവപ്പ്, നീല നീല, അങ്ങനെ പലതും, എന്നാൽ തിരഞ്ഞെടുക്കേണ്ട പല വർണ്ണ പേരുകൾ CSS നൽകുന്നില്ല. മറുവശത്ത്, ഒരു വർണ്ണ മൂല്യം വ്യക്തമാക്കുന്നത് ഷേഡുകളുടെ വളരെ വലിയ തിരഞ്ഞെടുപ്പിനെ സൂചിപ്പിക്കുന്നു. ഒരു വർണ്ണ മൂല്യം വ്യക്തമാക്കുന്നതിന് നിരവധി മാർഗങ്ങളുണ്ട്, ഏറ്റവും സാധാരണമായത് RGB, ഹെക്സാഡെസിമൽ മൂല്യങ്ങൾ എന്നിവയാണ്. ആദ്യ പതിപ്പ് മുതൽ അവർ CSS-ന്റെ ഭാഗമാണ്, എല്ലാ വെബ് ബ്രൗസറും അവരെ പിന്തുണയ്ക്കുന്നു. CSS3 നിറം നിർവചിക്കുന്നതിന് നിരവധി ഓപ്ഷനുകൾ അവതരിപ്പിച്ചു: RGBA, HSL, HSLA, അവ ക്രോസ്-ബ്രൗസർ സൗഹൃദം കുറവാണ്, എന്നാൽ ഏറ്റവും കൂടുതൽ ഏറ്റവും പുതിയ പതിപ്പുകൾബ്രൗസറുകൾ ഇതിനകം അവരെ പിന്തുണയ്ക്കുന്നു.

പൂക്കളുടെ പേരുകൾ

ഏറ്റവും ലളിതവും ഏറ്റവും വ്യക്തമായ വഴി CSS-ൽ ഒരു നിറം വ്യക്തമാക്കുക എന്നതിനർത്ഥം ഒരു കൂട്ടം കീവേഡുകളിൽ നിന്ന് ഒരു മുൻ നിർവചിച്ച നിറത്തിന്റെ പേര് തിരഞ്ഞെടുക്കുക എന്നാണ്. വർണ്ണ നാമങ്ങളുള്ള മൊത്തം 147 കീവേഡുകൾ ലഭ്യമാണ്: 17 പേരുകൾ തുടക്കത്തിൽ അവതരിപ്പിച്ച സാധാരണ നിറങ്ങളാണ് HTML പതിപ്പുകൾ(വെള്ള, കറുപ്പ്, ചുവപ്പ്, മഞ്ഞ, നീല, പച്ച, ഓറഞ്ച്, ധൂമ്രനൂൽ, ചാരനിറം, വെള്ളി, അക്വാ, ഫ്യൂഷിയ, നാരങ്ങ, മെറൂൺ, നേവി, ഒലിവ്, ടീൽ), കൂടാതെ 130 അധികമായി CSS2-ൽ ചേർത്തു. ഞങ്ങളുടെ കളർ ടേബിളിന്റെ HTML വിഭാഗത്തിൽ നിങ്ങൾക്ക് ലഭ്യമായ വർണ്ണ നാമങ്ങളുടെ മുഴുവൻ പട്ടികയും കാണാൻ കഴിയും.

RGB, RGBA

RGB സിസ്റ്റം, ചുവപ്പ്, പച്ച, നീല എന്നിവയുടെ ആപേക്ഷിക അളവുകൾ വിവരിക്കുന്ന മൂന്ന് സംഖ്യകൾ ഉപയോഗിക്കുന്നു, അവ ഏതെങ്കിലും വർണ്ണം ഉണ്ടാക്കാൻ ഒരുമിച്ച് ചേർക്കുന്നു. സംഖ്യകൾ 0 മുതൽ 255 വരെയാകാം. ഇരുണ്ട പർപ്പിൾ നിറത്തിനുള്ള RGB കോഡ് പരിഗണിക്കുക: rgb(204, 51, 255), ഉദാഹരണത്തിന് ഇത് പ്രയോഗിക്കാവുന്നതാണ് CSS പ്രോപ്പർട്ടിഫോണ്ട് നിറത്തിന് ഉത്തരവാദി:

നിറം: rgb(205, 51, 255);

RGBA സിസ്റ്റം നിറത്തിന്റെ സുതാര്യത വിവരിക്കുന്ന മറ്റൊരു നമ്പർ ചേർക്കുന്നു, മൂല്യം 0 (പൂർണ്ണമായും സുതാര്യം) മുതൽ 1 (പൂർണ്ണമായും അതാര്യമായത്) വരെയാകാം. 0.5 എന്ന മൂല്യം നിറത്തെ അർദ്ധ സുതാര്യമാക്കുന്നു, ഇരുണ്ട പർപ്പിൾ കളർ സെറ്റിന്റെ അർദ്ധ സുതാര്യമായ പതിപ്പ് പരിഗണിക്കുക RGB ഉപയോഗിക്കുന്നുഎ സിസ്റ്റങ്ങൾ:

നിറം: rgba(204, 51, 255, 0.5);

ചുവപ്പ്, പച്ച, നീല നിറങ്ങളുടെ മൂല്യങ്ങൾ സമാനമാണെന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും RGB സിസ്റ്റം. നാലാമത്തെ നമ്പർ - 0.5 ആണ് സുതാര്യതയുടെ അളവ്. RGBA ലെ "A" എന്ന അക്ഷരം ആൽഫ ചാനലിനെ സൂചിപ്പിക്കുന്നു, ഇത് ഒരു പദമാണ് ഗ്രാഫിക് ഡിസൈൻസുതാര്യത എന്നർത്ഥം.

RGBA നിറങ്ങൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കാൻ സൗകര്യപ്രദമാണ് അർദ്ധസുതാര്യ ഘടകങ്ങൾ, അവയ്ക്ക് താഴെയുള്ള മൂലകങ്ങളുടെ ദൃശ്യപരത നൽകുന്നു.

എച്ച്എസ്എൽ, എച്ച്എസ്എൽഎ

HSL (ഹ്യൂ, സാച്ചുറേഷൻ, ലൈറ്റ്നസ്) സിസ്റ്റം നിറം, സാച്ചുറേഷൻ, ലൈറ്റ്നസ് എന്നിവയെ അടിസ്ഥാനമാക്കിയുള്ള നിറങ്ങളെ വിവരിക്കുന്നു. ഇവിടെ കാണിച്ചിരിക്കുന്ന അതേ ഇരുണ്ട പർപ്പിൾ നിറമാണ് HSL ഫോർമാറ്റ്:

നിറം: hsl(285, 100%, 60%);

0 മുതൽ 360 വരെയുള്ള ഡിഗ്രികളിൽ പ്രകടിപ്പിക്കുന്ന നിറമാണ് ആദ്യ സംഖ്യ, ഇത് കളർ വീലിലെ നിറത്തിന്റെ സ്ഥാനം നിർണ്ണയിക്കുന്നു. രണ്ടാമത്തെ സംഖ്യ, സാച്ചുറേഷൻ, 0% മുതൽ 100% വരെയുള്ള ശതമാനമായി നിർവചിച്ചിരിക്കുന്നത്, നിറം എത്രത്തോളം പൂരിതമാകുമെന്ന് (തെളിച്ചമുള്ളത്) സൂചിപ്പിക്കുന്നു. മൂന്നാമത്തെ സംഖ്യ ഭാരം കുറഞ്ഞതാണ്, ഇത് സാച്ചുറേഷൻ പോലെ ഒരു ശതമാനമായി നിർവചിക്കപ്പെടുന്നു, പ്രകാശം എന്നത് നിറം എത്ര പ്രകാശമോ ഇരുണ്ടതോ ആയിരിക്കുമെന്ന് സൂചിപ്പിക്കുന്നു.

RGBA പോലെയുള്ള HSLA സിസ്റ്റം, 0 മുതൽ 1 വരെയുള്ള നാലാമത്തെ നമ്പർ ചേർക്കുന്നു, അത് നിറം എത്ര സുതാര്യമായിരിക്കണമെന്ന് നിർണ്ണയിക്കുന്നു. 0.5 മൂല്യം നിറത്തെ അർദ്ധ സുതാര്യമാക്കുന്നു, HSLA സിസ്റ്റം ഉപയോഗിച്ച് നിർവചിച്ചിരിക്കുന്ന ഇരുണ്ട പർപ്പിളിന്റെ അർദ്ധ സുതാര്യമായ പതിപ്പ് പരിഗണിക്കുക:

നിറം: hsla(285, 100%, 60%, 0.5);

ഹെക്സാഡെസിമൽ വർണ്ണ മൂല്യങ്ങൾ

# ചിഹ്നത്തെ പിന്തുടരുന്ന ആറ് പ്രതീകങ്ങളാണ് ഹെക്സാഡെസിമൽ വർണ്ണ കോഡ്:

രണ്ട് പ്രതീകങ്ങളുടെ ഓരോ സെറ്റും 0 മുതൽ 255 വരെയുള്ള ഒരു സംഖ്യയെ പ്രതിനിധീകരിക്കുന്നു. അതിനാൽ ആദ്യത്തെ രണ്ട് പ്രതീകങ്ങൾ ചുവപ്പ് നിറത്തെയും അടുത്ത രണ്ടെണ്ണം പച്ചയെയും അവസാനത്തെ രണ്ട് നീലയെയും പ്രതിനിധീകരിക്കുന്നു. ഈ ഹെക്‌സാഡെസിമൽ കോഡ് RGB-യുമായി വളരെ സാമ്യമുള്ളതാണ്, ഇവിടെ ഓരോ വർണ്ണവും വ്യക്തമാക്കിയിരിക്കുന്ന വ്യത്യാസമുണ്ട് ഹെക്സാഡെസിമൽ സിസ്റ്റംദശാംശത്തിന് പകരം നൊട്ടേഷൻ.

ഓരോ ജോഡി അക്കങ്ങളും ഒരേ ചിഹ്നങ്ങൾ ഉൾക്കൊള്ളുന്നുവെങ്കിൽ, വർണ്ണ മൂല്യം ചെറുതാക്കാം. എന്നിരുന്നാലും, ഹെക്സാഡെസിമൽ കോഡ് ഇതുപോലെയാണെങ്കിൽ, ഉദാഹരണത്തിന്, #bbff10, അത്തരമൊരു എൻട്രി ചെറുതാക്കാൻ കഴിയില്ല.

നിറം: #f00; നിറം: #ff0000;

കുറിപ്പ്: ഈ വർണ്ണ മൂല്യങ്ങളെ (rgba, hsl, hsla) പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾ, പ്രഖ്യാപനത്തെ പൂർണ്ണമായും അവഗണിച്ച് പശ്ചാത്തലവുമായോ ഫോണ്ടുമായോ ഒരു വർണ്ണവും ബന്ധപ്പെടുത്തുന്നില്ല. ഈ സാഹചര്യത്തിൽ, മൂലകത്തിന്റെ പശ്ചാത്തലം ഡിഫോൾട്ട് മൂല്യം ഉപയോഗിക്കുന്നു (അത് പൂർണ്ണമായും സുതാര്യമാകും), കൂടാതെ ടെക്സ്റ്റ് സ്ഥിര മൂല്യം (കറുപ്പ് നിറം) അല്ലെങ്കിൽ പാരന്റ് എലമെന്റിൽ നിന്ന് പാരമ്പര്യമായി ലഭിച്ച ഒരു നിറം ഉപയോഗിക്കുന്നു.

ബ്രൗസറുകളുടെ പഴയ പതിപ്പുകൾക്കായി നിങ്ങൾ ചേർക്കണം അധിക നിയമം RGB ഫോർമാറ്റിൽ ഒരു വർണ്ണം, ഒരു ഹെക്സാഡെസിമൽ മൂല്യം അല്ലെങ്കിൽ ഒരു പേര് എന്നിവ വ്യക്തമാക്കുന്ന ഒരു നിറം. RGBA, HSL അല്ലെങ്കിൽ HSLA ഫോർമാറ്റിൽ ഒരു നിറം വ്യക്തമാക്കുന്ന ഒരു നിയമത്തിന് മുമ്പായി ഈ നിയമം ദൃശ്യമാകണം. ഇത് വർണ്ണത്തിന് ഒരു സുരക്ഷാ വല നൽകും, കാരണം CSS-ൽ ഒരേ പ്രോപ്പർട്ടിക്ക് മൂല്യം നിശ്ചയിക്കുന്ന രണ്ട് നിയമങ്ങളുണ്ടെങ്കിൽ, കോഡിൽ താഴെ സജ്ജീകരിച്ചിരിക്കുന്ന റൂൾ എപ്പോഴും മുൻഗണന നൽകുന്നു. ഇതിനർത്ഥം ബ്രൗസർ RGBA, HSL അല്ലെങ്കിൽ HSLA ഫോർമാറ്റുകൾ പിന്തുണയ്ക്കുന്നുവെങ്കിൽ, അത് രണ്ടാമത്തെ നിയമം ഉപയോഗിക്കും, ഇല്ലെങ്കിൽ, അത് ആദ്യത്തേത് ഉപയോഗിക്കും.

കളർ ഇൻ ചെയ്യുക CSS ഭാഷവ്യത്യസ്ത രീതികളിൽ വ്യക്തമാക്കാം:

• പേരുകൊണ്ട്,
• എഴുതിയത് ഹെക്സാഡെസിമൽ മൂല്യം,
• RGB, RGBA ഫോർമാറ്റുകളിൽ,
• HSL, HSLA ഫോർമാറ്റുകളിൽ.

പേര് അനുസരിച്ച് നിറം സജ്ജമാക്കുക

മൂലകങ്ങൾക്ക് പേരിനനുസരിച്ച് ചില നിറങ്ങൾ വ്യക്തമാക്കുന്നതിന് ബ്രൗസറുകൾ പിന്തുണയ്ക്കുന്നു. ഈ പട്ടികയിൽ കളർ പ്രോപ്പർട്ടികൾ, RGB കോഡ്, ഹെക്സാഡെസിമൽ കോഡ് (HEX), HSL കോഡ് എന്നിവ വ്യക്തമാക്കാൻ ഉപയോഗിക്കുന്ന ചില കീവേഡുകൾ (ഇംഗ്ലീഷ് വർണ്ണ നാമങ്ങൾ) അടങ്ങിയിരിക്കുന്നു.

വർണ്ണ നാമങ്ങളുടെ ഉപയോഗത്തിന്റെ ഒരു ഉദാഹരണമാണിത്, വർണ്ണ നാമങ്ങൾ വിപുലീകരിച്ച പട്ടികയിൽ നിന്ന് എടുത്തതാണ്.

ഈ കോഡ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നത് ഇതാ:

RGB ഉപയോഗിച്ച് നിറം ക്രമീകരിക്കുന്നു

RGB ഒരു അഡിറ്റീവ് കളർ മോഡലാണ്. ഓൺ ആംഗലേയ ഭാഷ കൂട്ടിച്ചേർക്കൽ- കൂട്ടിച്ചേർക്കൽ. RGB എന്നത് ഇംഗ്ലീഷ് വാക്കുകളുടെ ചുരുക്കമാണ്: ചുവപ്പ്, പച്ച, നീല - ചുവപ്പ്, പച്ച, നീല). ഇതിൽ നിന്ന് RGB മോഡലിൽ നിറങ്ങൾ സമന്വയിപ്പിച്ചതായി വ്യക്തമാണ് മൂന്ന് ചേർക്കുന്നുനിറങ്ങൾ (ചുവപ്പ്, പച്ച, നീല) വിവിധ അളവുകളിൽ.

ചുവപ്പ്, പച്ച, എന്നിവ കലർത്തുന്നു നീല നിറങ്ങൾനിങ്ങൾക്ക് നിരവധി ദശലക്ഷം ഷേഡുകൾ ലഭിക്കും. സാധ്യമായ എല്ലാ കോമ്പിനേഷനുകളും കമ്പ്യൂട്ടർ മെമ്മറിയിൽ സംഭരിച്ചിരിക്കുന്നു.

കാര്യത്തിലേക്ക് വരൂ.

ഈ ഫോർമാറ്റിൽ പ്രോപ്പർട്ടികൾ സജ്ജീകരിക്കുന്നതിന്, rgb(r, g, b) എന്ന നൊട്ടേഷൻ ഉപയോഗിക്കുക, ഇവിടെ r, g, b എന്നിവയാണ് ഓരോ നിറത്തിനും (ചുവപ്പ്, പച്ച, നീല) മൂന്ന് ചാനലുകൾ. ഓരോ ചാനലിനുമുള്ള മൂല്യങ്ങൾ 0 മുതൽ 255 വരെയുള്ള ശ്രേണിയിൽ സജ്ജീകരിച്ചിരിക്കുന്നു.

ഉദാഹരണ കോഡ്.

എല്ലാം വ്യക്തമാക്കുന്നതിന്, ഒരു കോഡ് ഉദാഹരണം ഇതാ:

ഈ ഉദാഹരണം ഇങ്ങനെയാണ് പ്രവർത്തിക്കേണ്ടത്:

ഉദാഹരണമായി വിശദീകരണങ്ങൾ.

പേജിന്റെ തുടക്കത്തിൽ ഞങ്ങൾ div.rgb ക്ലാസ് സൃഷ്ടിക്കുന്നു, ടാഗ് സൃഷ്ടിച്ച ബ്ലോക്കുകൾക്ക് ഇത് ആവശ്യമാണ്.

പ്രദർശിപ്പിച്ചിരുന്നു ശരിയായ വലിപ്പം: 240px 40px. ലൈൻ-ഹൈറ്റ് പ്രോപ്പർട്ടിക്ക് ഞങ്ങൾ 40px മൂല്യം നൽകുന്നു, അതായത് ഉയരത്തിന് തുല്യമാണ്ബ്ലോക്ക്, ഇത് ബ്ലോക്കിൽ ടെക്സ്റ്റ് പ്രദർശിപ്പിക്കാൻ അനുവദിക്കും

ലംബ കേന്ദ്രത്തിൽ. റൂൾ ഉപയോഗിച്ച് ഞങ്ങൾ വാചകം തിരശ്ചീനമായി കേന്ദ്രീകരിക്കുന്നു ( text-align : മധ്യഭാഗം ;).

അടുത്തതായി, ഞങ്ങൾ സജ്ജമാക്കിയ കോഡിൽ പശ്ചാത്തല നിറംതടയുക

ശൈലി ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് പശ്ചാത്തല സ്വത്ത്, കൂടാതെ rgb(255, 0, 0) , rgb(0, 255, 0), rgb(0, 0, 255) എന്നിവയ്ക്ക് മൂല്യങ്ങൾ നൽകുക. അതായത്, ഞങ്ങൾ മാറിമാറി ഒരു ചാനൽ കഴിയുന്നത്ര പൂരിതമാക്കുന്നു, ശേഷിക്കുന്ന ചാനലുകൾ അവയുടെ മൂല്യം പൂജ്യമായതിനാൽ അവ സമന്വയത്തിനായി ഉപയോഗിക്കുന്നില്ല.

ഈ ഉദാഹരണം എഡിറ്റ് ചെയ്ത് നിങ്ങളുടെ സ്വന്തം മൂല്യങ്ങൾ വ്യക്തമാക്കാൻ ശ്രമിക്കുക, ഉദാഹരണത്തിന് rgb(100, 100, 100) .

RGBA ഉപയോഗിച്ച് നിറം ക്രമീകരിക്കുന്നു

CSS3-ൽ പ്രത്യക്ഷപ്പെട്ടു പുതിയ ഉപകരണംനിറവുമായി പ്രവർത്തിക്കാൻ - RGBA ഫോർമാറ്റ്. ഇതിനെ RGB മോഡലിന്റെ പരിണാമം എന്ന് വിളിക്കാം, എന്നാൽ ഒരു പുതിയ ചാനൽ കൂടിച്ചേർന്ന് - A അല്ലെങ്കിൽ ആൽഫ ചാനൽ. ഈ ചാനൽ നിറത്തിന്റെ സുതാര്യത സജ്ജമാക്കുന്നു. അതിന്റെ മൂല്യങ്ങൾ 0 മുതൽ 1 വരെയുള്ള ശ്രേണിയിൽ സജ്ജീകരിച്ചിരിക്കുന്നു. 0 ന്റെ മൂല്യം പൂർണ്ണ സുതാര്യതയുമായി യോജിക്കുന്നു, 1 - പൂർണ്ണ അതാര്യത (നിറം ആദ്യം സജ്ജീകരിച്ചതിന് സമാനമായിരിക്കും മൂന്ന് ചാനലുകൾ RGB), കൂടാതെ 0.4 അല്ലെങ്കിൽ 0.6 പോലുള്ള ഇന്റർമീഡിയറ്റ് മൂല്യങ്ങൾ - വ്യത്യസ്ത ഡിഗ്രികളിലേക്കുള്ള അർദ്ധസുതാര്യത.

ഉദാഹരണ കോഡ്.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുമെന്ന് ഇതാ:

ഈ കോഡ് അതിന്റേതായ രീതിയിൽ വിഷ്വൽ പ്രാതിനിധ്യംവർണ്ണ മൂല്യം സജ്ജമാക്കാൻ RGB മോഡൽ ഉപയോഗിച്ച് ഇനിപ്പറയുന്നതിന് സമാനമാണ്:

അവന്റെ ഫലം ഇതാ:

പൂജ്യത്തിന് തുല്യമായ ഒരു ആൽഫ ചാനൽ മൂല്യം ഏത് നിറത്തെയും അദൃശ്യമാക്കുന്നു - തികച്ചും സുതാര്യമാണ്; ഒന്നിന് തുല്യമായ മൂല്യം RGB കോഡിലെ നിറത്തെ മാറ്റങ്ങളില്ലാതെ വിവർത്തനം ചെയ്യുന്നു. rgba(255,0,0,1.0) പ്രോപ്പർട്ടി ചുവപ്പ് നിറം കാണിക്കുന്നു rgb(255, 0, 0) .

ഹെക്സാഡെസിമൽ മൂല്യം അനുസരിച്ച് (HEX കോഡ്)

ദൈനംദിന ജീവിതത്തിൽ, ഞങ്ങൾ ദശാംശ എണ്ണൽ സംവിധാനം ഉപയോഗിക്കുന്നു. അതിന്റെ ഉത്ഭവം വളരെ ലളിതമാണ് - നമ്മുടെ കൈകളിൽ പത്ത് വിരലുകൾ ഉണ്ട്, നമ്മുടെ വിരലുകളിൽ എണ്ണുന്നത് ജീവിതത്തിൽ സൗകര്യപ്രദമാണ്. അകത്തുണ്ടെങ്കിൽ ദശാംശ വ്യവസ്ഥപത്ത് അക്കങ്ങൾ: 0 മുതൽ 9 വരെ, കൂടാതെ നമ്പർ 10 അടുത്ത അക്കമാണ്, തുടർന്ന് ഹെക്സാഡെസിമൽ നമ്പർ സിസ്റ്റത്തിന് 16 അക്കങ്ങളുണ്ട്, അടുത്ത അക്കം 16 ആയിരിക്കും.

വർണ്ണ കോഡുകൾ ഹെക്സാഡെസിമൽ അക്കങ്ങളായി വ്യക്തമാക്കാൻ, സാധാരണ ഉപയോഗിക്കുക ദശാംശ അക്കങ്ങൾ 0 മുതൽ 9 വരെയും 10 മുതൽ 15 വരെയുള്ള സംഖ്യകളെ സൂചിപ്പിക്കാൻ A മുതൽ F വരെയുള്ള ലാറ്റിൻ അക്ഷരങ്ങൾ ഉപയോഗിക്കുക, അതായത് (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D , ഇ, എഫ്). വ്യക്തതയ്ക്കായി, നമുക്ക് ഇത് ഒരു പട്ടികയിൽ ഇടാം:

റെക്കോർഡിംഗിനായി ഹെക്സാഡെസിമൽ സംഖ്യകൾഎഫ് (ദശാംശ സമ്പ്രദായത്തിൽ 15), ദശാംശ സമ്പ്രദായത്തിലെന്നപോലെ, രണ്ട് അക്കങ്ങളുടെ യൂണിയൻ ഉപയോഗിക്കുന്നു, എന്നാൽ ഹെക്സാഡെസിമലിൽ, ഇത് വ്യക്തമാണ്. അതെ, റെക്കോർഡിനായി ദശാംശ സംഖ്യഹെക്സാഡെസിമൽ നൊട്ടേഷനിൽ 255 FF ആണ്.

ഹെക്സാഡെസിമൽ സിസ്റ്റം കമ്പ്യൂട്ടറിന് കൂടുതൽ മനസ്സിലാക്കാവുന്നതേയുള്ളൂ, ഇത് ഹെക്സാഡെസിമൽ മൂല്യം ഉപയോഗിച്ച് സജ്ജീകരിച്ച മൂല്യങ്ങൾ വേഗത്തിൽ പ്രോസസ്സ് ചെയ്യുന്നു.

ഹെക്സാഡെസിമലിൽ ഒരു നിറം വ്യക്തമാക്കുന്നതിന്, മുമ്പ് സംഖ്യാ മൂല്യംനിങ്ങൾ ഒരു "#" ചിഹ്നം ഇടേണ്ടതുണ്ട്, ഉദാഹരണത്തിന്: #FFC0CB. #FFC0CB എന്ന മൂല്യത്തിൽ തന്നെ FF, C0, CB എന്നീ മൂന്ന് ഹെക്‌സാഡെസിമൽ അക്കങ്ങൾ അടങ്ങിയിരിക്കുന്നു. ഈ എൻട്രിയുടെ അർത്ഥം RGB ഫോർമാറ്റിൽ നിറം സജ്ജീകരിക്കുന്നതിന് തുല്യമാണ് (rgb(r, g, b)) - HEX കോഡിലെ ഓരോ ഹെക്സാഡെസിമൽ അക്കവും RGB മോഡലിന്റെ അതിന്റെ ചാനലിലെ വർണ്ണ സാച്ചുറേഷൻ സൂചിപ്പിക്കുന്നു.

#FF0000

#00FF00

#0000FF

ഈ കോഡ് ഇനിപ്പറയുന്ന ഘടകങ്ങൾ പ്രദർശിപ്പിക്കും:

മുകളിലുള്ള ഈ പേജിലെ "RGB ഉപയോഗിച്ച് നിറങ്ങൾ സജ്ജീകരിക്കുക" എന്ന വിഭാഗത്തിൽ നിന്നുള്ള ഫലമുള്ള ഒരു ചിത്രം ഇതാ.

ചിത്രം.1. RGB-യിലെ നിറങ്ങൾ.

നിറങ്ങൾ സമാനമാണെന്ന് ഞങ്ങൾ കാണുന്നു.

HEX കളർ കോഡിന്റെ ചുരുക്കിയ നൊട്ടേഷൻ അനുവദനീയമാണ്: 6 അക്ക നമ്പർ 3 അക്ക സംഖ്യയായി എഴുതാം. ഒരു ചാനലിന്റെ വർണ്ണ മൂല്യത്തിൽ രണ്ട് അക്കങ്ങൾ ആവർത്തിക്കുമ്പോൾ മാത്രമേ ഇത് സാധുതയുള്ളൂ.

അതായത്, ഇനിപ്പറയുന്ന ചുരുക്കെഴുത്ത് സ്വീകാര്യമാണ്:

ഉദാഹരണത്തിന്, #ff22aa എന്ന നിറം #f2a എന്നും #44aa22 എന്ന നിറം #4a2 എന്നും എഴുതാം.

എച്ച്എസ്എൽ ഉപയോഗിച്ച് നിറം സജ്ജീകരിക്കുന്നു

CSS3-ൽ പ്രത്യക്ഷപ്പെട്ടു പുതിയ ഫോർമാറ്റ്നിറം സൂചിപ്പിക്കാൻ.

HSL ഫോർമാറ്റ് ഇംഗ്ലീഷ് വാക്കുകളുടെ ചുരുക്കമാണ്: ഹ്യൂ (ഹ്യൂ), സാച്ചുറേറ്റ് (സാച്ചുറേഷൻ), ലൈറ്റ്‌നെസ് (ലൈറ്റ്നസ്).

HSL-ലെ ഹ്യൂ എന്നത് ഒരു പ്രത്യേക കളർ വീലിലെ ഒരു നിറത്തിന്റെ മൂല്യമാണ് (ചിത്രം 2) അത് ഡിഗ്രിയിൽ വ്യക്തമാക്കിയിരിക്കുന്നു. നമ്മൾ RGB മോഡലുമായി സാമ്യം വരയ്ക്കുകയാണെങ്കിൽ, 0° ചുവപ്പിനോടും 120° പച്ചയോടും 240° നീലയോടും യോജിക്കുന്നു.

ഹ്യൂ മൂല്യം 0-ൽ നിന്ന് 359-ലേക്ക് മാറും.

ചിത്രം 2. HSL കളർ വീൽ.

രണ്ടാമത്തെ മൂല്യം - സാച്ചുറേഷൻ (സാച്ചുറേറ്റ്) ഒരു ശതമാനമായി സജ്ജീകരിച്ചിരിക്കുന്നു. 100% സാച്ചുറേഷനിൽ, നിറം കഴിയുന്നത്ര "ചുരുണ്ടതാണ്"; സാച്ചുറേഷൻ സൂചകം 0% ലേക്ക് നീങ്ങുമ്പോൾ, നിറം മങ്ങുകയും ചാരനിറത്തിലേക്ക് ഉരുളുകയും ചെയ്യുന്നു.

മൂന്നാമത്തെ മൂല്യമായ ലൈറ്റ്‌നെസും ഒരു ശതമാനമായി സജ്ജീകരിച്ചിരിക്കുന്നു. ഉയർന്ന ശതമാനം, നിറം തിളക്കമുള്ളതായിരിക്കും. 0%, 100% എന്നിവയുടെ അങ്ങേയറ്റത്തെ മൂല്യങ്ങൾ യഥാക്രമം കറുപ്പ് (വെളിച്ചം ഇല്ല), വെള്ള (അമിതമായി തുറന്നിരിക്കുന്ന) നിറങ്ങളെ സൂചിപ്പിക്കും, കൂടാതെ ആദ്യ ചാനലിൽ കളർ വീലിൽ നിന്ന് ഏത് നിറമാണ് തിരഞ്ഞെടുത്തത് എന്നത് പ്രശ്നമല്ല. ഒപ്റ്റിമൽ വർണ്ണ തെളിച്ച മൂല്യം 50% ആണ്.

എച്ച്എസ്എൽഎ ഉപയോഗിച്ച് നിറം സജ്ജീകരിക്കുന്നു

എച്ച്എസ്എൽഎ ഫോർമാറ്റ് എച്ച്എസ്എല്ലുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു, ആർജിബി ആർജിബിഎയുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. എച്ച്എസ്എൽഎ ഫോർമാറ്റിൽ, ആർജിബിഎയിലെന്നപോലെ, ഒരു ആൽഫ ചാനൽ ചേർത്തിരിക്കുന്നു, ഇത് വർണ്ണ സുതാര്യതയ്ക്ക് ഉത്തരവാദിയാണ്.

HSL ഫോർമാറ്റിൽ വ്യക്തമാക്കിയ നിറം വായിക്കാൻ എളുപ്പമാണ്. അത് അവബോധജന്യമാണെന്ന് നമുക്ക് പറയാം. ഉദാഹരണത്തിന്, മെമ്മറിയിൽ HSL കളർ വീലിന്റെ ഒരു ചിത്രമുണ്ടെങ്കിൽ hsl(120,60%,50%) എന്ന കോഡിന് അവസാന വർണ്ണത്തെ പ്രതിനിധീകരിക്കാൻ കഴിയും. RGB, HEX ഫോർമാറ്റുകളെക്കുറിച്ചും ഇതുതന്നെ പറയാനാവില്ല; ഈ ഫോർമാറ്റുകളിൽ വ്യക്തമാക്കിയ വർണ്ണ കോഡ് മോണിറ്ററിൽ ദൃശ്യമാക്കിയതിനുശേഷം മാത്രമേ വ്യക്തമാകൂ.

CSS3 (HSL, HSLA, RGBA) ലെ പുതിയ ഫോർമാറ്റുകൾ ബ്രൗസറുകളിൽ പ്രവർത്തിക്കുന്നു: IE 9.0, Opera 10.0 Firefox 3.0. പഴയ ബ്രൗസറുകളിൽ എനിക്ക് എങ്ങനെ ശൈലികൾ പ്രവർത്തിക്കാനാകും?

Someblosk (പശ്ചാത്തല നിറം: rgb(255,50,50); പശ്ചാത്തല നിറം: rgba(255,50,50,0.85) )

പഴയ ബ്രൗസറുകളിൽ ഈ കോഡ് ഉപയോഗിക്കുമ്പോൾ, .somebloсk ക്ലാസിന്റെ പശ്ചാത്തല നിറം, അത് ഒരു ആൽഫ ചാനൽ ഉപയോഗിക്കില്ലെങ്കിലും, RGB ഫോർമാറ്റിൽ പ്രദർശിപ്പിക്കും.

CSS-ലെ കളർ കോഡുകൾ നിറങ്ങൾ വ്യക്തമാക്കാൻ ഉപയോഗിക്കുന്നു. സാധാരണഗതിയിൽ, വർണ്ണ കോഡുകളോ വർണ്ണ മൂല്യങ്ങളോ ഒരു മൂലകത്തിന്റെ മുൻവശത്തെ വർണ്ണത്തിനോ (ഉദാ. വാചക നിറം, ലിങ്ക് നിറം) അല്ലെങ്കിൽ ഒരു ഘടകത്തിന്റെ പശ്ചാത്തല വർണ്ണത്തിനോ (പശ്ചാത്തല വർണ്ണം, ബ്ലോക്ക് നിറം) നിറം സജ്ജമാക്കാൻ ഉപയോഗിക്കുന്നു. ഒരു ബട്ടൺ, ബോർഡർ, മാർക്കർ, ഹോവർ, മറ്റ് അലങ്കാര ഇഫക്റ്റുകൾ എന്നിവയുടെ നിറം മാറ്റാനും അവ ഉപയോഗിക്കാം.

നിങ്ങളുടെ വർണ്ണ മൂല്യങ്ങൾ നിങ്ങൾക്ക് സജ്ജമാക്കാൻ കഴിയും വിവിധ ഫോർമാറ്റുകൾ. ഇനിപ്പറയുന്ന പട്ടിക സാധ്യമായ എല്ലാ ഫോർമാറ്റുകളും പട്ടികപ്പെടുത്തുന്നു:

ലിസ്റ്റുചെയ്ത ഫോർമാറ്റുകൾ കൂടുതൽ വിശദമായി ചുവടെ വിവരിച്ചിരിക്കുന്നു.

CSS നിറങ്ങൾ - ഹെക്സ് കോഡുകൾ

ഹെക്സാഡെസിമൽ വർണ്ണ കോഡ്നിറത്തിന്റെ ആറ് അക്ക പ്രതിനിധാനമാണ്. ആദ്യത്തെ രണ്ട് അക്കങ്ങൾ (RR) ചുവന്ന മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു, അടുത്ത രണ്ടെണ്ണം പച്ച മൂല്യം(GG), രണ്ടാമത്തേത് നീല മൂല്യമാണ് (BB).

CSS നിറങ്ങൾ - ഹ്രസ്വ ഹെക്സ് കോഡുകൾ

ഹ്രസ്വ ഹെക്സ് കളർ കോഡ്ആറ് പ്രതീകങ്ങളുള്ള നൊട്ടേഷന്റെ ഒരു ചെറിയ രൂപമാണ്. ഈ ഫോർമാറ്റിൽ, തത്തുല്യമായ ആറ് അക്ക വർണ്ണ മൂല്യം സൃഷ്ടിക്കുന്നതിന് ഓരോ അക്കവും ആവർത്തിക്കുന്നു. ഉദാഹരണത്തിന്: #0F0 #00FF00 ആയി മാറുന്നു.

ഏത് ഗ്രാഫിക്കിൽ നിന്നും ഹെക്സാഡെസിമൽ മൂല്യം എടുക്കാം സോഫ്റ്റ്വെയർ, അഡോബ് ഫോട്ടോഷോപ്പ്, കോർ ഡ്രോ മുതലായവ.

CSS-ലെ ഓരോ ഹെക്സാഡെസിമൽ വർണ്ണ കോഡിനും മുമ്പായി "#" എന്ന ഹാഷ് ചിഹ്നം ഉണ്ടായിരിക്കും. ഹെക്സാഡെസിമൽ നൊട്ടേഷനുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഉദാഹരണങ്ങൾ ചുവടെയുണ്ട്.

CSS നിറങ്ങൾ - RGB മൂല്യങ്ങൾ

RGB മൂല്യം rgb() പ്രോപ്പർട്ടി ഉപയോഗിച്ച് സജ്ജീകരിച്ചിരിക്കുന്ന ഒരു കളർ കോഡാണ്. ഈ പ്രോപ്പർട്ടി മൂന്ന് മൂല്യങ്ങൾ എടുക്കുന്നു: ചുവപ്പ്, പച്ച, നീല എന്നിവയ്ക്ക് ഓരോന്നും. മൂല്യം 0 മുതൽ 255 വരെയുള്ള ഒരു പൂർണ്ണസംഖ്യയോ ഒരു ശതമാനമോ ആകാം.

കുറിപ്പ്:എല്ലാ ബ്രൗസറുകളും rgb() കളർ പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്നില്ല, അതിനാൽ ഇത് ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നില്ല.

RGB മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഒന്നിലധികം നിറങ്ങൾ കാണിക്കുന്ന ഒരു ഉദാഹരണം ചുവടെയുണ്ട്.

കളർ കോഡ് ജനറേറ്റർ

ഞങ്ങളുടെ സേവനം ഉപയോഗിച്ച് നിങ്ങൾക്ക് ദശലക്ഷക്കണക്കിന് കളർ കോഡുകൾ സൃഷ്ടിക്കാൻ കഴിയും.

ബ്രൗസർ സുരക്ഷിത നിറങ്ങൾ

ഏറ്റവും സുരക്ഷിതവും കമ്പ്യൂട്ടർ-സ്വതന്ത്രവുമായ 216 നിറങ്ങളുടെ പട്ടിക ചുവടെയുണ്ട്. CSS-ലെ ഈ നിറങ്ങൾ 000000 മുതൽ FFFFFF വരെയാണ് ഹെക്സാഡെസിമൽ കോഡ്. 256 വർണ്ണ പാലറ്റിൽ പ്രവർത്തിക്കുമ്പോൾ എല്ലാ കമ്പ്യൂട്ടറുകളും നിറം ശരിയായി പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നതിനാൽ അവ ഉപയോഗിക്കാൻ സുരക്ഷിതമാണ്.

CSS-ലെ "സുരക്ഷിത" നിറങ്ങളുടെ പട്ടിക
#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300സിസി	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900സിസി	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

HEX/HTML

HEX നിറം RGB-യുടെ ഒരു ഹെക്സാഡെസിമൽ പ്രാതിനിധ്യമല്ലാതെ മറ്റൊന്നുമല്ല.

നിറങ്ങൾ ഇങ്ങനെ പ്രതിനിധീകരിക്കുന്നു മൂന്ന് ഗ്രൂപ്പുകൾഹെക്സാഡെസിമൽ അക്കങ്ങൾ, ഓരോ ഗ്രൂപ്പിനും അതിന്റേതായ നിറത്തിന് ഉത്തരവാദിത്തമുണ്ട്: #112233, ഇവിടെ 11 ചുവപ്പും 22 പച്ചയും 33 നീലയുമാണ്. എല്ലാ മൂല്യങ്ങളും 00-നും FF-നും ഇടയിലായിരിക്കണം.

പല ആപ്ലിക്കേഷനുകളും ഹെക്സാഡെസിമൽ വർണ്ണ നൊട്ടേഷന്റെ ഒരു ഹ്രസ്വ രൂപം അനുവദിക്കുന്നു. മൂന്ന് ഗ്രൂപ്പുകളിലും ഒരേ പ്രതീകങ്ങൾ അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, ഉദാഹരണത്തിന് #112233, അവ #123 എന്ന് എഴുതാം.

1. h1 (നിറം: #ff0000; ) /* ചുവപ്പ് */
2. h2 (നിറം: #00ff00; ) /* പച്ച */
3. h3 (നിറം: #0000ff; ) /* നീല */
4. h4 (നിറം: #00f; ) /* അതേ നീല, ഷോർട്ട്‌ഹാൻഡ് */

RGB

നിറം RGB ഇടം(ചുവപ്പ്, പച്ച, നീല) ചുവപ്പ്, പച്ച, നീല എന്നിവ കലർത്തി സാധ്യമായ എല്ലാ നിറങ്ങളും ഉൾക്കൊള്ളുന്നു. ഫോട്ടോഗ്രാഫി, ടെലിവിഷൻ, കമ്പ്യൂട്ടർ ഗ്രാഫിക്സ് എന്നിവയിൽ ഈ മോഡൽ ജനപ്രിയമാണ്.

RGB മൂല്യങ്ങൾ 0 മുതൽ 255 വരെയുള്ള പൂർണ്ണസംഖ്യയായി വ്യക്തമാക്കുന്നു. ഉദാഹരണത്തിന്, നീല പരാമീറ്റർ അതിന്റെ ഉയർന്ന മൂല്യമായ (255) ആയി സജ്ജീകരിച്ചിരിക്കുന്നതിനാൽ rgb (0,0,255) നീലയായി പ്രദർശിപ്പിക്കും, മറ്റുള്ളവ 0 ആയും സജ്ജീകരിച്ചിരിക്കുന്നു.

ചില ആപ്ലിക്കേഷനുകൾ (പ്രത്യേകിച്ച് വെബ് ബ്രൗസറുകൾ) RGB മൂല്യങ്ങളുടെ ശതമാനം റെക്കോർഡിംഗിനെ പിന്തുണയ്ക്കുന്നു (0% മുതൽ 100% വരെ).

1. h1 (നിറം: rgb(255, 0, 0); ) /* ചുവപ്പ് */
2. h2 (നിറം: rgb(0, 255, 0); ) /* പച്ച */
3. h3 (നിറം: rgb(0, 0, 255); ) /* നീല */
4. h4 (നിറം: rgb(0%, 0%, 100%); ) /* അതേ നീല, ശതമാനം എൻട്രി */

എല്ലാ പ്രധാന ബ്രൗസറുകളിലും RGB വർണ്ണ മൂല്യങ്ങൾ പിന്തുണയ്ക്കുന്നു.

ആർജിബിഎ

അടുത്തിടെ ആധുനിക ബ്രൗസറുകൾ RGBA വർണ്ണ മോഡലുമായി പ്രവർത്തിക്കാൻ പഠിച്ചു - ഒരു ആൽഫ ചാനലിനുള്ള പിന്തുണയുള്ള RGB-യുടെ ഒരു വിപുലീകരണം, അത് ഒരു വസ്തുവിന്റെ അതാര്യത നിർണ്ണയിക്കുന്നു.

RGBA വർണ്ണ മൂല്യം ഇതായി വ്യക്തമാക്കിയിരിക്കുന്നു: rgba (ചുവപ്പ്, പച്ച, നീല, ആൽഫ). ആൽഫ പാരാമീറ്റർ 0.0 (പൂർണ്ണമായും സുതാര്യം) മുതൽ 1.0 (പൂർണ്ണമായ അതാര്യമായത്) വരെയുള്ള ഒരു സംഖ്യയാണ്.

1. h1 (നിറം: rgb(0, 0, 255); ) /* സാധാരണ RGB-യിൽ നീല */
2. h2 (നിറം: rgba(0, 0, 255, 1); ) /* RGBA-യിലെ അതേ നീല, കാരണം അതാര്യത: 100% */
3. h3 (നിറം: rgba(0, 0, 255, 0.5); ) /* അതാര്യത: 50% */
4. h4 (നിറം: rgba(0, 0, 255, .155); ) /* അതാര്യത: 15.5% */
5. h5 (നിറം: rgba(0, 0, 255, 0); ) /* പൂർണ്ണമായും സുതാര്യം */

IE9+, Firefox 3+, Chrome, Safari, Opera 10+ എന്നിവയിൽ RGBA പിന്തുണയ്ക്കുന്നു.

എച്ച്എസ്എൽ

ഒരു സിലിണ്ടർ കോർഡിനേറ്റ് സിസ്റ്റത്തിലെ RGB മോഡലിന്റെ പ്രതിനിധാനമാണ് HSL കളർ മോഡൽ. സാധാരണ RGB-യെക്കാൾ കൂടുതൽ അവബോധജന്യവും മനുഷ്യർക്ക് വായിക്കാൻ കഴിയുന്നതുമായ രീതിയിൽ HSL നിറങ്ങളെ പ്രതിനിധീകരിക്കുന്നു. മോഡൽ പലപ്പോഴും ഉപയോഗിക്കുന്നു ഗ്രാഫിക്സ് ആപ്ലിക്കേഷനുകൾ, വർണ്ണ പാലറ്റുകളിലും ഇമേജ് വിശകലനത്തിനും.

HSL എന്നത് ഹ്യൂ (നിറം/നിറം), സാച്ചുറേഷൻ (സാച്ചുറേഷൻ), ലൈറ്റ്‌നസ്/ലുമിനൻസ് (ലൈറ്റ്നസ്/ലൈറ്റ്നസ്/ ലുമിനോസിറ്റി, തെളിച്ചവുമായി തെറ്റിദ്ധരിക്കരുത്).

ഹ്യൂ കളർ വീലിലെ നിറത്തിന്റെ സ്ഥാനം വ്യക്തമാക്കുന്നു (0 മുതൽ 360 വരെ). സാച്ചുറേഷൻ എന്നത് സാച്ചുറേഷന്റെ ശതമാനം മൂല്യമാണ് (0% മുതൽ 100% വരെ). ഭാരം കുറഞ്ഞതിന്റെ ഒരു ശതമാനമാണ് (0% മുതൽ 100% വരെ).

1. h1 (നിറം: hsl(120, 100%, 50%); ) /* പച്ച */
2. h2 (നിറം: hsl(120, 100%, 75%); ) /* ഇളം പച്ച */
3. h3 (നിറം: hsl(120, 100%, 25%); ) /* കടും പച്ച */
4. h4 (നിറം: hsl(120, 60%, 70%); ) /* പാസ്തൽ പച്ച */

IE9+, Firefox, Chrome, Safari, Opera 10+ എന്നിവയിൽ HSL പിന്തുണയ്ക്കുന്നു.

എച്ച്.എസ്.എൽ.എ

RGB/RGBA പോലെ, HSL-ന് ഒരു HSLA മോഡ് ഉണ്ട്, അത് ഒരു വസ്തുവിന്റെ അതാര്യത സൂചിപ്പിക്കാൻ ആൽഫ ചാനലിനെ പിന്തുണയ്ക്കുന്നു.

അർത്ഥം HSLA നിറങ്ങൾഫോമിൽ നൽകിയിരിക്കുന്നു: hsla(നിറം, സാച്ചുറേഷൻ, ലഘുത്വം, ആൽഫ). ആൽഫ പാരാമീറ്റർ 0.0 (പൂർണ്ണമായും സുതാര്യം) മുതൽ 1.0 (പൂർണ്ണമായ അതാര്യമായത്) വരെയുള്ള ഒരു സംഖ്യയാണ്.

1. h1 (നിറം: hsl(120, 100%, 50%); ) /* സാധാരണ HSLൽ */
2. h2 (നിറം: hsla(120, 100%, 50%, 1); ) /* HSLA-യിലെ അതേ പച്ച, കാരണം അതാര്യത: 100% */
3. h3 (നിറം: hsla(120, 100%, 50%, 0.5); ) /* അതാര്യത: 50% */
4. h4 (നിറം: hsla(120, 100%, 50%, .155); ) /* അതാര്യത: 15.5% */
5. h5 (നിറം: hsla(120, 100%, 50%, 0); ) /* പൂർണ്ണമായും സുതാര്യം */

CMYK

CMYK കളർ മോഡൽ പലപ്പോഴും കളർ പ്രിന്റിംഗും പ്രിന്റിംഗുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. CMYK (RGB-യിൽ നിന്ന് വ്യത്യസ്തമായി) ഒരു കുറയ്ക്കൽ മോഡലാണ്, അതായത് ഉയർന്ന മൂല്യങ്ങൾ ഇരുണ്ട നിറങ്ങളുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു.

സിയാൻ (സിയാൻ), മജന്ത (മജന്ത), മഞ്ഞ (മഞ്ഞ), കറുപ്പ് (കീ/കറുപ്പ്) എന്നിവയുടെ അനുപാതത്തിലാണ് നിറങ്ങൾ നിർണ്ണയിക്കുന്നത്.

CMYK-യിൽ ഒരു നിറം നിർവചിക്കുന്ന ഓരോ അക്കങ്ങളും ആ നിറത്തിന്റെ മഷിയുടെ ശതമാനത്തെ പ്രതിനിധീകരിക്കുന്നു. വർണ്ണ സംയോജനം, അല്ലെങ്കിൽ, നൽകിയിരിക്കുന്ന നിറത്തിലുള്ള ഒരു ഫിലിമിൽ (അല്ലെങ്കിൽ സിടിപിയുടെ കാര്യത്തിൽ നേരിട്ട് ഒരു പ്രിന്റിംഗ് ഫോമിൽ) ഫോട്ടോടൈപ്പ്സെറ്റിംഗ് മെഷീനിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന റാസ്റ്റർ ഡോട്ടിന്റെ വലുപ്പം.

ഉദാഹരണത്തിന്, PANTONE 7526 നിറം ലഭിക്കുന്നതിന്, നിങ്ങൾ 9 ഭാഗങ്ങൾ സിയാൻ, 83 ഭാഗങ്ങൾ മജന്ത, 100 ഭാഗങ്ങൾ മഞ്ഞ, 46 ഭാഗങ്ങൾ കറുപ്പ് എന്നിവ കലർത്തണം. ഇത് ഇനിപ്പറയുന്ന രീതിയിൽ സൂചിപ്പിക്കാം: (9,83,100,46). ചിലപ്പോൾ ഇനിപ്പറയുന്ന പദവികൾ ഉപയോഗിക്കുന്നു: C9M83Y100K46, അല്ലെങ്കിൽ (9%, 83%, 100%, 46%), അല്ലെങ്കിൽ (0.09/0.83/1.0/0.46).

എച്ച്എസ്ബി/എച്ച്എസ്വി

HSB (HSV എന്നും അറിയപ്പെടുന്നു) HSL-ന് സമാനമാണ്, എന്നാൽ അവ രണ്ട് വ്യത്യസ്ത വർണ്ണ മോഡലുകളാണ്. അവ രണ്ടും സിലിണ്ടർ ജ്യാമിതിയെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്, എന്നാൽ എച്ച്എസ്ബി/എച്ച്എസ്വി "ഹെക്സ്കോൺ" മോഡലിനെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്, അതേസമയം എച്ച്എസ്എൽ "ബൈ-ഹെക്സ്കോൺ" മോഡലിനെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. കലാകാരന്മാർ പലപ്പോഴും ഈ മോഡൽ ഉപയോഗിക്കാൻ ഇഷ്ടപ്പെടുന്നു, എച്ച്എസ്ബി / എച്ച്എസ്വി ഉപകരണം നിറങ്ങളുടെ സ്വാഭാവിക ധാരണയോട് കൂടുതൽ അടുക്കുന്നുവെന്ന് പൊതുവെ അംഗീകരിക്കപ്പെടുന്നു. പ്രത്യേകിച്ച്, നിറം മോഡൽ എച്ച്എസ്ബിഅഡോബ് ഫോട്ടോഷോപ്പിൽ ഉപയോഗിക്കുന്നു.

HSB/HSV എന്നാൽ നിറം (നിറം/നിറം), സാച്ചുറേഷൻ (സാച്ചുറേഷൻ), തെളിച്ചം/മൂല്യം (തെളിച്ചം/മൂല്യം).

ഹ്യൂ കളർ വീലിലെ നിറത്തിന്റെ സ്ഥാനം വ്യക്തമാക്കുന്നു (0 മുതൽ 360 വരെ). സാച്ചുറേഷൻ എന്നത് സാച്ചുറേഷന്റെ ശതമാനം മൂല്യമാണ് (0% മുതൽ 100% വരെ). തെളിച്ചത്തിന്റെ ഒരു ശതമാനമാണ് തെളിച്ചം (0% മുതൽ 100% വരെ).

XYZ

XYZ കളർ മോഡൽ (CIE 1931 XYZ) പൂർണ്ണമായും ഗണിതശാസ്ത്രപരമായ ഇടമാണ്. RGB, CMYK, മറ്റ് മോഡലുകൾ എന്നിവയിൽ നിന്ന് വ്യത്യസ്തമായി, XYZ-ലെ പ്രധാന ഘടകങ്ങൾ "സാങ്കൽപ്പികം" ആണ്, അതായത് നിങ്ങൾക്ക് X, Y, Z എന്നിവ മിശ്രണം ചെയ്യുന്നതിനുള്ള ഒരു കൂട്ടം നിറങ്ങളുമായി ബന്ധപ്പെടുത്താൻ കഴിയില്ല. സാങ്കേതിക മേഖലകളിൽ ഉപയോഗിക്കുന്ന മിക്കവാറും എല്ലാ വർണ്ണ മോഡലുകളുടെയും മാസ്റ്റർ മോഡലാണ് XYZ.

ലാബ്

LAB കളർ മോഡൽ (CIELAB, “CIE 1976 L*a*b*”) CIE XYZ സ്‌പെയ്‌സിൽ നിന്നാണ് കണക്കാക്കുന്നത്. ലാബ് വികസിപ്പിക്കുമ്പോൾ, മനുഷ്യന്റെ ധാരണയുടെ (XYZ നെ അപേക്ഷിച്ച്) വർണ്ണ മാറ്റം കൂടുതൽ രേഖീയമായ ഒരു വർണ്ണ ഇടം സൃഷ്ടിക്കുക എന്നതായിരുന്നു ലക്ഷ്യം. വ്യത്യസ്ത മേഖലകൾകളർ സ്പേസ് വർണ്ണ മാറ്റത്തിന്റെ അതേ സംവേദനം ഉണ്ടാക്കി.