നിറങ്ങൾ വ്യക്തമാക്കാൻ 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 |
വ്ലാഡ് മെർഷെവിച്ച്
HTML-ൽ, വർണ്ണം രണ്ട് വഴികളിൽ ഒന്നിൽ സൂചിപ്പിച്ചിരിക്കുന്നു: ഹെക്സാഡെസിമൽ കോഡ് ഉപയോഗിച്ചും ചില നിറങ്ങളുടെ പേരിലും. ഹെക്സാഡെസിമൽ നമ്പർ സിസ്റ്റത്തെ അടിസ്ഥാനമാക്കിയുള്ള രീതിയാണ് പ്രധാനമായും ഉപയോഗിക്കുന്നത്, കാരണം ഇത് ഏറ്റവും സാർവത്രികമാണ്.
ഹെക്സാഡെസിമൽ നിറങ്ങൾ
നിറങ്ങൾ വ്യക്തമാക്കാൻ HTML ഹെക്സാഡെസിമൽ നമ്പറുകൾ ഉപയോഗിക്കുന്നു. ഹെക്സാഡെസിമൽ സിസ്റ്റം, ഡെസിമൽ സിസ്റ്റത്തിൽ നിന്ന് വ്യത്യസ്തമായി, അതിൻ്റെ പേര് സൂചിപ്പിക്കുന്നത് പോലെ, 16 എന്ന സംഖ്യയെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. സംഖ്യകൾ ഇനിപ്പറയുന്നതായിരിക്കും: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, എ , B, C , D, E, F. 10 മുതൽ 15 വരെയുള്ള സംഖ്യകൾ ലാറ്റിൻ അക്ഷരങ്ങൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു. പട്ടികയിൽ 6.1 ദശാംശവും ഹെക്സാഡെസിമലും തമ്മിലുള്ള കത്തിടപാടുകൾ കാണിക്കുന്നു.
ഹെക്സാഡെസിമൽ സിസ്റ്റത്തിൽ 15-ൽ കൂടുതലുള്ള സംഖ്യകൾ രണ്ട് സംഖ്യകൾ ഒന്നായി സംയോജിപ്പിച്ചാണ് രൂപപ്പെടുന്നത് (പട്ടിക 6.2). ഉദാഹരണത്തിന്, ദശാംശത്തിലെ 255 എന്ന സംഖ്യ ഹെക്സാഡെസിമലിലെ FF എന്ന സംഖ്യയുമായി യോജിക്കുന്നു.
നമ്പർ സിസ്റ്റം നിർവചിക്കുന്നതിലെ ആശയക്കുഴപ്പം ഒഴിവാക്കാൻ, ഒരു ഹെക്സാഡെസിമൽ സംഖ്യയ്ക്ക് മുമ്പായി ഒരു ഹാഷ് ചിഹ്നം #, ഉദാഹരണത്തിന് #aa69cc. ഈ സാഹചര്യത്തിൽ, കേസ് പ്രശ്നമല്ല, അതിനാൽ #F0F0F0 അല്ലെങ്കിൽ #f0f0f0 എന്ന് എഴുതുന്നത് അനുവദനീയമാണ്.
HTML-ൽ ഉപയോഗിക്കുന്ന ഒരു സാധാരണ നിറം ഇതുപോലെ കാണപ്പെടുന്നു.
ഇവിടെ വെബ് പേജിൻ്റെ പശ്ചാത്തല നിറം #FA8E47 ആയി സജ്ജീകരിച്ചിരിക്കുന്നു. ഒരു സംഖ്യയുടെ മുന്നിലുള്ള # എന്ന ഹാഷ് ചിഹ്നം അർത്ഥമാക്കുന്നത് അത് ഹെക്സാഡെസിമൽ എന്നാണ്. ആദ്യത്തെ രണ്ട് അക്കങ്ങൾ (എഫ്എ) നിറത്തിൻ്റെ ചുവപ്പ് ഘടകത്തെ നിർവചിക്കുന്നു, മൂന്നാമത്തേത് മുതൽ നാലാമത്തെ അക്കങ്ങൾ വരെ (8E) പച്ച ഘടകത്തെ നിർവചിക്കുന്നു, അവസാന രണ്ട് അക്കങ്ങൾ (47) നീല ഘടകത്തെ നിർവചിക്കുന്നു. അന്തിമഫലം ഈ നിറമായിരിക്കും.
| എഫ്.എ. | + | 8E | + | 47 | = | FA8E47 |
മൂന്ന് നിറങ്ങളിൽ ഓരോന്നിനും - ചുവപ്പ്, പച്ച, നീല - 00 മുതൽ FF വരെയുള്ള മൂല്യങ്ങൾ എടുക്കാം, അതിൻ്റെ ഫലമായി ആകെ 256 ഷേഡുകൾ ലഭിക്കും. അങ്ങനെ, നിറങ്ങളുടെ ആകെ എണ്ണം 256x256x256 = 16,777,216 കോമ്പിനേഷനുകൾ ആകാം. ചുവപ്പ്, പച്ച, നീല ഘടകങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ള ഒരു വർണ്ണ മോഡലിനെ RGB (ചുവപ്പ്, പച്ച, നീല; ചുവപ്പ്, പച്ച, നീല) എന്ന് വിളിക്കുന്നു. ഈ മോഡൽ അഡിറ്റീവാണ് (ആഡ് - ആഡിൽ നിന്ന്), അതിൽ മൂന്ന് ഘടകങ്ങളുടെയും കൂട്ടിച്ചേർക്കൽ വെളുത്ത നിറം ഉണ്ടാക്കുന്നു.
ഹെക്സാഡെസിമൽ നിറങ്ങൾ നാവിഗേറ്റ് ചെയ്യുന്നത് എളുപ്പമാക്കുന്നതിന്, ചില നിയമങ്ങൾ കണക്കിലെടുക്കുക.
- വർണ്ണ ഘടകങ്ങളുടെ മൂല്യങ്ങൾ ഒന്നുതന്നെയാണെങ്കിൽ (ഉദാഹരണത്തിന്: #D6D6D6), അപ്പോൾ ഫലം ചാരനിറമായിരിക്കും. സംഖ്യ കൂടുന്തോറും ഇളം നിറവും, #000000 (കറുപ്പ്) മുതൽ #FFFFFF (വെളുപ്പ്) വരെയുള്ള മൂല്യങ്ങൾ.
- ചുവന്ന ഘടകം പരമാവധി (എഫ്എഫ്) ആക്കുകയും ശേഷിക്കുന്ന ഘടകങ്ങൾ പൂജ്യമായി സജ്ജമാക്കുകയും ചെയ്താൽ ഒരു കടും ചുവപ്പ് നിറം രൂപം കൊള്ളുന്നു. #FF0000 മൂല്യമുള്ള ഒരു നിറമാണ് സാധ്യമായ ഏറ്റവും ചുവപ്പ് നിറത്തിലുള്ള ഷേഡ്. പച്ച (#00FF00), നീല (#0000FF) എന്നിവയ്‌ക്കും ഇത് ബാധകമാണ്.
- ചുവപ്പും പച്ചയും ചേർത്താണ് മഞ്ഞ (#FFFF00) ഉണ്ടാക്കുന്നത്. ഇത് കളർ വീലിൽ (ചിത്രം 6.1) വ്യക്തമായി കാണാം, ഇത് പ്രാഥമിക നിറങ്ങളും (ചുവപ്പ്, പച്ച, നീല) പൂരകമോ അധികമോ അവതരിപ്പിക്കുന്നു. മഞ്ഞ, സിയാൻ, വയലറ്റ് (മജന്ത എന്നും അറിയപ്പെടുന്നു) എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു. പൊതുവേ, ഏത് നിറവും അതിനോട് ചേർന്നുള്ള നിറങ്ങൾ കലർത്തി ലഭിക്കും. അങ്ങനെ, നീലയും പച്ചയും സംയോജിപ്പിച്ച് സിയാൻ (#00FFFF) ലഭിക്കും.
അരി. 6.1 വർണ്ണ വൃത്തം
ഹെക്സാഡെസിമൽ മൂല്യങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ള നിറങ്ങൾ അനുഭവപരമായി തിരഞ്ഞെടുക്കേണ്ടതില്ല. ഈ ആവശ്യത്തിനായി, വ്യത്യസ്ത വർണ്ണ മോഡലുകളിൽ പ്രവർത്തിക്കാൻ കഴിയുന്ന ഒരു ഗ്രാഫിക് എഡിറ്റർ അനുയോജ്യമാണ്, ഉദാഹരണത്തിന്, അഡോബ് ഫോട്ടോഷോപ്പ്. ചിത്രത്തിൽ. ഈ പ്രോഗ്രാമിൽ ഒരു വർണ്ണം തിരഞ്ഞെടുക്കുന്നതിനുള്ള വിൻഡോ ചിത്രം 6.2 കാണിക്കുന്നു; നിലവിലെ വർണ്ണത്തിൻ്റെ ഫലമായുണ്ടാകുന്ന ഹെക്സാഡെസിമൽ മൂല്യം ഒരു ലൈൻ ഉപയോഗിച്ച് വിവരിച്ചിരിക്കുന്നു. നിങ്ങൾക്ക് ഇത് നിങ്ങളുടെ കോഡിലേക്ക് പകർത്തി ഒട്ടിക്കാം.
അരി. 6.2 ഫോട്ടോഷോപ്പിൽ നിറങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിനുള്ള വിൻഡോ
വെബ് നിറങ്ങൾ
നിങ്ങൾ മോണിറ്ററിൻ്റെ വർണ്ണ റെൻഡറിംഗ് നിലവാരം 8 ബിറ്റുകളായി (256 നിറങ്ങൾ) സജ്ജമാക്കുകയാണെങ്കിൽ, വ്യത്യസ്ത ബ്രൗസറുകളിൽ ഒരേ നിറം വ്യത്യസ്തമായി പ്രദർശിപ്പിക്കാൻ കഴിയും. ബ്രൗസർ സ്വന്തം പാലറ്റിൽ പ്രവർത്തിക്കുകയും അതിൻ്റെ പാലറ്റിൽ ഇല്ലാത്ത നിറം കാണിക്കാതിരിക്കുകയും ചെയ്യുമ്പോൾ ഗ്രാഫിക്സ് പ്രദർശിപ്പിക്കുന്ന രീതിയാണ് ഇതിന് കാരണം. ഈ സാഹചര്യത്തിൽ, നിറം മാറ്റി പകരം മറ്റൊന്നിൻ്റെ പിക്സലുകൾ, അതിനടുത്തുള്ള, തന്നിരിക്കുന്നവയെ അനുകരിക്കുന്ന നിറങ്ങൾ. വ്യത്യസ്ത ബ്രൗസറുകളിലുടനീളം നിറം ഒരേപോലെ നിലനിൽക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ, വെബ് നിറങ്ങൾ എന്ന് വിളിക്കപ്പെടുന്ന ഒരു പാലറ്റ് അവതരിപ്പിച്ചു. ഓരോ ഘടകത്തിനും - ചുവപ്പ്, പച്ച, നീല - ആറ് മൂല്യങ്ങളിൽ ഒന്നായി സജ്ജീകരിച്ചിരിക്കുന്ന നിറങ്ങളാണ് വെബ് നിറങ്ങൾ - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). ഈ ഘടകത്തിൻ്റെ ഹെക്സാഡെസിമൽ മൂല്യം ബ്രാക്കറ്റുകളിൽ സൂചിപ്പിച്ചിരിക്കുന്നു. സാധ്യമായ എല്ലാ കോമ്പിനേഷനുകളിൽ നിന്നുമുള്ള ആകെ നിറങ്ങളുടെ എണ്ണം 6x6x6 - 216 നിറങ്ങൾ നൽകുന്നു. ഒരു ഉദാഹരണ വെബ് നിറം #33FF66 ആണ്.
എല്ലാ ബ്രൗസറുകളിലും ഒരേ പോലെ കാണപ്പെടുന്നു എന്നതാണ് വെബ് കളറിൻ്റെ പ്രധാന സവിശേഷത. ഇപ്പോൾ, മോണിറ്ററുകളുടെ ഗുണനിലവാരവും അവയുടെ കഴിവുകളുടെ വികാസവും കാരണം വെബ് നിറങ്ങളുടെ പ്രസക്തി വളരെ ചെറുതാണ്.
പേരിനനുസരിച്ച് നിറങ്ങൾ
ഒരു കൂട്ടം അക്കങ്ങൾ ഓർത്തുവയ്ക്കുന്നത് ഒഴിവാക്കാൻ, പകരം സാധാരണയായി ഉപയോഗിക്കുന്ന നിറങ്ങളുടെ പേരുകൾ ഉപയോഗിക്കാം. പട്ടികയിൽ 6.3 ജനപ്രിയ വർണ്ണ നാമങ്ങളുടെ പേരുകൾ കാണിക്കുന്നു.
| നിറത്തിൻ്റെ പേര് | നിറം | വിവരണം | ഹെക്സാഡെസിമൽ മൂല്യം |
|---|---|---|---|
| കറുപ്പ് | കറുപ്പ് | #000000 | |
| നീല | നീല | #0000FF | |
| ഫ്യൂഷിയ | ഇളം പർപ്പിൾ | #FF00FF | |
| ചാരനിറം | ഇരുണ്ട ചാരനിറം | #808080 | |
| പച്ച | പച്ച | #008000 | |
| നാരങ്ങ | ഇളം പച്ച | #00FF00 | |
| മെറൂൺ | കടും ചുവപ്പ് | #800000 | |
| നാവികസേന | കടും നീല | #000080 | |
| ഒലിവ് | ഒലിവ് | #808000 | |
| ധൂമ്രനൂൽ | ഇരുണ്ട പർപ്പിൾ | #800080 | |
| ചുവപ്പ് | ചുവപ്പ് | #FF0000 | |
| വെള്ളി | ഇളം ചാര നിറം | #C0C0C0 | |
| ടീൽ | നീല പച്ച | #008080 | |
| വെള്ള | വെള്ള | #FFFFFF | |
| മഞ്ഞ | മഞ്ഞ | #FFFF00 |
നിങ്ങൾ ഒരു നിറം അതിൻ്റെ പേരിൽ അല്ലെങ്കിൽ ഹെക്സാഡെസിമൽ സംഖ്യകൾ ഉപയോഗിച്ചാണോ വ്യക്തമാക്കുന്നത് എന്നത് പ്രശ്നമല്ല. ഈ രീതികൾ അവയുടെ ഫലത്തിൽ തുല്യമാണ്. ഉദാഹരണം 6.1 ഒരു വെബ് പേജിൻ്റെ പശ്ചാത്തലവും ടെക്സ്റ്റ് നിറങ്ങളും എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് കാണിക്കുന്നു.
ഉദാഹരണം 6.1. പശ്ചാത്തലവും വാചക നിറവും
ഉദാഹരണ വാചകം
ഈ ഉദാഹരണത്തിൽ, ടാഗിൻ്റെ bgcolor ആട്രിബ്യൂട്ട് ഉപയോഗിച്ചാണ് പശ്ചാത്തല നിറം സജ്ജീകരിച്ചിരിക്കുന്നത്
, ടെക്സ്റ്റ് ആട്രിബ്യൂട്ട് വഴി ടെക്സ്റ്റ് നിറം. വൈവിധ്യത്തിന്, ടെക്സ്റ്റ് ആട്രിബ്യൂട്ട് ഒരു ഹെക്സാഡെസിമൽ സംഖ്യയായി സജ്ജീകരിച്ചിരിക്കുന്നു, കൂടാതെ bgcolor ആട്രിബ്യൂട്ട് റിസർവ് ചെയ്‌ത കീവേഡ് Teal ലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നു.നിറങ്ങൾ വ്യക്തമാക്കാൻ ഹെക്സാഡെസിമൽ സംഖ്യകൾ ഉപയോഗിക്കുന്നു. ഹെക്സാഡെസിമൽ സിസ്റ്റം, ഡെസിമൽ സിസ്റ്റത്തിൽ നിന്ന് വ്യത്യസ്തമായി, അതിൻ്റെ പേര് സൂചിപ്പിക്കുന്നത് പോലെ, 16 എന്ന സംഖ്യയെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. സംഖ്യകൾ ഇനിപ്പറയുന്നതായിരിക്കും: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, എ , B, C , D, E, F. 10 മുതൽ 15 വരെയുള്ള സംഖ്യകൾ ലാറ്റിൻ അക്ഷരങ്ങൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു. ഹെക്സാഡെസിമൽ സമ്പ്രദായത്തിൽ 15-ൽ കൂടുതലുള്ള സംഖ്യകൾ രണ്ട് സംഖ്യകൾ ഒന്നായി സംയോജിപ്പിച്ചാണ് രൂപപ്പെടുന്നത്. ഉദാഹരണത്തിന്, ദശാംശത്തിലെ 255 എന്ന സംഖ്യ ഹെക്സാഡെസിമലിലെ FF എന്ന സംഖ്യയുമായി യോജിക്കുന്നു. നമ്പർ സിസ്റ്റം നിർണ്ണയിക്കുന്നതിൽ ആശയക്കുഴപ്പം ഒഴിവാക്കാൻ, ഹെക്സാഡെസിമൽ നമ്പറിന് മുന്നിൽ ഒരു ഹാഷ് ചിഹ്നം # സ്ഥാപിച്ചിരിക്കുന്നു, ഉദാഹരണത്തിന് #666999. മൂന്ന് നിറങ്ങളിൽ ഓരോന്നിനും - ചുവപ്പ്, പച്ച, നീല - 00 മുതൽ FF വരെയുള്ള മൂല്യങ്ങൾ എടുക്കാം. അങ്ങനെ, വർണ്ണ ചിഹ്നത്തെ മൂന്ന് ഘടകങ്ങളായി തിരിച്ചിരിക്കുന്നു #rrggbb, അവിടെ ആദ്യത്തെ രണ്ട് ചിഹ്നങ്ങൾ നിറത്തിൻ്റെ ചുവന്ന ഘടകത്തെ സൂചിപ്പിക്കുന്നു, മധ്യ രണ്ട് - പച്ച, അവസാന രണ്ട് - നീല. #rgb എന്ന ചുരുക്കരൂപം ഉപയോഗിക്കാൻ ഇത് അനുവദിച്ചിരിക്കുന്നു, അവിടെ ഓരോ പ്രതീകവും ഇരട്ടിയാക്കണം. അതിനാൽ, #fe0 എന്ന എൻട്രിയെ #ffee00 ആയി കണക്കാക്കണം.
പേരുകൊണ്ട്
| ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ | ക്രോം | ഓപ്പറ | സഫാരി | ഫയർഫോക്സ് | ആൻഡ്രോയിഡ് | ഐഒഎസ് |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
ബ്രൗസറുകൾ ചില നിറങ്ങളെ അവയുടെ പേരിൽ പിന്തുണയ്ക്കുന്നു. പട്ടികയിൽ 1 പേരുകൾ, ഹെക്സാഡെസിമൽ കോഡ്, RGB, HSL മൂല്യങ്ങൾ, വിവരണം എന്നിവ കാണിക്കുന്നു.
| പേര് | നിറം | കോഡ് | RGB | എച്ച്എസ്എൽ | വിവരണം |
|---|---|---|---|---|---|
| വെള്ള | #ffffff അല്ലെങ്കിൽ #fff | rgb(255,255,255) | hsl(0.0%,100%) | വെള്ള | |
| വെള്ളി | #c0c0c0 | rgb(192,192,192) | hsl(0.0%,75%) | ചാരനിറം | |
| ചാരനിറം | #808080 | rgb(128,128,128) | hsl(0.0%,50%) | ഇരുണ്ട ചാരനിറം | |
| കറുപ്പ് | #000000 അല്ലെങ്കിൽ #000 | rgb(0,0,0) | hsl(0.0%,0%) | കറുപ്പ് | |
| മെറൂൺ | #800000 | rgb(128,0,0) | hsl(0.100%,25%) | കടും ചുവപ്പ് | |
| ചുവപ്പ് | #ff0000 അല്ലെങ്കിൽ #f00 | rgb(255,0,0) | hsl(0,100%,50%) | ചുവപ്പ് | |
| ഓറഞ്ച് | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | ഓറഞ്ച് | |
| മഞ്ഞ | #ffff00 അല്ലെങ്കിൽ #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | മഞ്ഞ | |
| ഒലിവ് | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | ഒലിവ് | |
| നാരങ്ങ | #00ff00 അല്ലെങ്കിൽ #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | ഇളം പച്ച | |
| പച്ച | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | പച്ച | |
| അക്വാ | #00ffff അല്ലെങ്കിൽ #0ff | rgb(0,255,255) | hsl(180,100%,50%) | നീല | |
| നീല | #0000ff അല്ലെങ്കിൽ #00f | rgb(0,0,255) | hsl(240,100%,50%) | നീല | |
| നാവികസേന | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | കടും നീല | |
| ടീൽ | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | നീല പച്ച | |
| ഫ്യൂഷിയ | #ff00ff അല്ലെങ്കിൽ #f0f | rgb(255,0,255) | hsl(300,100%,50%) | പിങ്ക് | |
| ധൂമ്രനൂൽ | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | വയലറ്റ് |
RGB ഉപയോഗിക്കുന്നു
| ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ | ക്രോം | ഓപ്പറ | സഫാരി | ഫയർഫോക്സ് | ആൻഡ്രോയിഡ് | ഐഒഎസ് |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
ചുവപ്പ്, പച്ച, നീല മൂല്യങ്ങൾ ഉപയോഗിച്ച് ദശാംശ പദങ്ങളിൽ നിങ്ങൾക്ക് നിറം നിർവചിക്കാം. മൂന്ന് വർണ്ണ ഘടകങ്ങളിൽ ഓരോന്നും 0 മുതൽ 255 വരെയുള്ള മൂല്യം എടുക്കുന്നു. 255 എന്ന സംഖ്യയുമായി 100% അനുസരിച്ചുള്ള നിറം ഒരു ശതമാനമായി വ്യക്തമാക്കുന്നതും അനുവദനീയമാണ്. ആദ്യം, rgb കീവേഡ് വ്യക്തമാക്കുക, തുടർന്ന് പരാൻതീസിസിൽ വർണ്ണ ഘടകങ്ങൾ വ്യക്തമാക്കുക. , കോമകളാൽ വേർതിരിച്ചിരിക്കുന്നു, ഉദാഹരണത്തിന് rgb(255 , 128, 128) അല്ലെങ്കിൽ rgb(100%, 50%, 50%).
ആർജിബിഎ
| ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ | ക്രോം | ഓപ്പറ | സഫാരി | ഫയർഫോക്സ് | ആൻഡ്രോയിഡ് | ഐഒഎസ് |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA ഫോർമാറ്റ് RGB യുടെ വാക്യഘടനയിൽ സമാനമാണ്, എന്നാൽ മൂലകത്തിൻ്റെ സുതാര്യത വ്യക്തമാക്കുന്ന ഒരു ആൽഫ ചാനൽ ഉൾപ്പെടുന്നു. 0 ൻ്റെ മൂല്യം പൂർണ്ണമായും സുതാര്യമാണ്, 1 അതാര്യമാണ്, 0.5 പോലെയുള്ള ഒരു ഇൻ്റർമീഡിയറ്റ് മൂല്യം അർദ്ധ സുതാര്യമാണ്.
RGBA CSS3-ലേക്ക് ചേർത്തു, അതിനാൽ ഈ പതിപ്പിനെതിരെ CSS കോഡ് സാധൂകരിക്കണം. CSS3 നിലവാരം ഇപ്പോഴും വികസിപ്പിച്ചുകൊണ്ടിരിക്കുകയാണെന്നും ചില സവിശേഷതകൾ മാറിയേക്കാമെന്നും ശ്രദ്ധിക്കേണ്ടതാണ്. ഉദാഹരണത്തിന്, പശ്ചാത്തല-വർണ്ണ പ്രോപ്പർട്ടിയിലേക്ക് ചേർത്ത RGB ഫോർമാറ്റിലുള്ള ഒരു വർണ്ണം സാധുതയുള്ളതാണ്, എന്നാൽ പശ്ചാത്തല പ്രോപ്പർട്ടിയിലേക്ക് ചേർത്ത ഒന്ന് ഇനി സാധുതയുള്ളതല്ല. അതേ സമയം, ബ്രൗസറുകൾ രണ്ട് പ്രോപ്പർട്ടികളുടെയും നിറം ശരിയായി മനസ്സിലാക്കുന്നു.
എച്ച്എസ്എൽ
| ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ | ക്രോം | ഓപ്പറ | സഫാരി | ഫയർഫോക്സ് | ആൻഡ്രോയിഡ് | ഐഒഎസ് |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL ഫോർമാറ്റിൻ്റെ പേര് ഹ്യൂ (ഹ്യൂ), സാച്ചുറേറ്റ് (സാച്ചുറേഷൻ), ലൈറ്റ്നസ് (ലൈറ്റ്നസ്) എന്നിവയുടെ ആദ്യ അക്ഷരങ്ങളുടെ സംയോജനത്തിൽ നിന്നാണ് ഉരുത്തിരിഞ്ഞത്. ഹ്യൂ എന്നത് കളർ വീലിലെ വർണ്ണ മൂല്യമാണ് (ചിത്രം 1) അത് ഡിഗ്രിയിൽ നൽകിയിരിക്കുന്നു. 0° ചുവപ്പിനോടും 120° പച്ചയോടും 240° നീലയോടും യോജിക്കുന്നു. ഹ്യൂ മൂല്യം 0 മുതൽ 359 വരെ വ്യത്യാസപ്പെടാം.
അരി. 1. കളർ വീൽ
സാച്ചുറേഷൻ എന്നത് ഒരു നിറത്തിൻ്റെ തീവ്രതയാണ്, ഇത് 0% മുതൽ 100% വരെയുള്ള ശതമാനമായി കണക്കാക്കുന്നു. 0% മൂല്യം നിറവും ചാരനിറത്തിലുള്ള ഷേഡും സൂചിപ്പിക്കുന്നു, 100% സാച്ചുറേഷൻ പരമാവധി മൂല്യമാണ്.
പ്രകാശം നിറം എത്ര തെളിച്ചമുള്ളതാണെന്നും 0% മുതൽ 100% വരെയുള്ള ശതമാനമായി വ്യക്തമാക്കുന്നു. കുറഞ്ഞ മൂല്യങ്ങൾ നിറത്തെ ഇരുണ്ടതാക്കുന്നു, ഉയർന്ന മൂല്യങ്ങൾ വർണ്ണത്തെ ഭാരം കുറഞ്ഞതാക്കുന്നു; 0%, 100% എന്നിവയുടെ അങ്ങേയറ്റത്തെ മൂല്യങ്ങൾ കറുപ്പും വെളുപ്പും തമ്മിൽ യോജിക്കുന്നു.
എച്ച്.എസ്.എൽ.എ
| ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ | ക്രോം | ഓപ്പറ | സഫാരി | ഫയർഫോക്സ് | ആൻഡ്രോയിഡ് | ഐഒഎസ് |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA ഫോർമാറ്റ് വാക്യഘടനയിൽ HSL-ന് സമാനമാണ്, എന്നാൽ മൂലകത്തിൻ്റെ സുതാര്യത വ്യക്തമാക്കുന്നതിന് ഒരു ആൽഫ ചാനൽ ഉൾപ്പെടുന്നു. 0 ൻ്റെ മൂല്യം പൂർണ്ണമായും സുതാര്യമാണ്, 1 അതാര്യമാണ്, 0.5 പോലെയുള്ള ഒരു ഇൻ്റർമീഡിയറ്റ് മൂല്യം അർദ്ധ സുതാര്യമാണ്.
RGBA, HSL, HSLA വർണ്ണ മൂല്യങ്ങൾ CSS3-ലേക്ക് ചേർത്തിരിക്കുന്നു, അതിനാൽ ഈ ഫോർമാറ്റുകൾ ഉപയോഗിക്കുമ്പോൾ പതിപ്പിൻ്റെ സാധുതയ്ക്കായി നിങ്ങളുടെ കോഡ് പരിശോധിക്കുക.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
മുന്നറിയിപ്പ്
സൈറ്റിൽ ലിസ്‌റ്റ് ചെയ്‌തിരിക്കുന്ന എല്ലാ ലയൺ ക്യാച്ചിംഗ് രീതികളും സൈദ്ധാന്തികവും കമ്പ്യൂട്ടേഷണൽ രീതികളെ അടിസ്ഥാനമാക്കിയുള്ളതുമാണ്. അവ ഉപയോഗിക്കുമ്പോൾ രചയിതാക്കൾ നിങ്ങളുടെ സുരക്ഷ ഉറപ്പുനൽകുന്നില്ല കൂടാതെ ഫലങ്ങളുടെ ഉത്തരവാദിത്തം നിരാകരിക്കുന്നു. ഓർക്കുക, സിംഹം ഒരു വേട്ടക്കാരനും അപകടകരമായ മൃഗവുമാണ്!
ഈ ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 2.
അരി. 2. വെബ് പേജിലെ നിറങ്ങൾ
