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

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

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

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

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

മുകളിലുള്ള ഈ പേജിലെ "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 ഫോർമാറ്റിൽ പ്രദർശിപ്പിക്കും.

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(നിറം, സാച്ചുറേഷൻ, പ്രകാശം, ആൽഫ). ആൽഫ പാരാമീറ്റർ 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 നെ അപേക്ഷിച്ച്) വർണ്ണ മാറ്റങ്ങൾ കൂടുതൽ രേഖീയമായിരിക്കും, അതായത്, വർണ്ണ സ്ഥലത്തിന്റെ വിവിധ പ്രദേശങ്ങളിലെ വർണ്ണ കോർഡിനേറ്റ് മൂല്യങ്ങളിൽ ഒരേ മാറ്റം സംഭവിക്കും. നിറം മാറ്റത്തിന്റെ അതേ സംവേദനം ഉണ്ടാക്കുക.

വെബ് ഡിസൈനിൽ നിറത്തെ പ്രതിനിധീകരിക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്.

ബേസ് 16 അടിസ്ഥാനമാക്കിയുള്ള ഒരു ഹെക്സാഡെസിമൽ വർണ്ണ പ്രാതിനിധ്യ സംവിധാനമാണ് HEX. ഈ സിസ്റ്റത്തിന്, 0 മുതൽ 9 വരെയുള്ള അറബി ദശാംശ അക്കങ്ങളും A മുതൽ F വരെയുള്ള ലാറ്റിൻ അക്ഷരങ്ങളും ഡിജിറ്റൽ സംഖ്യയെ 16 ആയി പൂരകമാക്കാൻ ഉപയോഗിക്കുന്നു. വെബ് ഡിസൈനിനായി, 16 പ്രാഥമിക (കീ) നിറങ്ങൾ ഹെക്സാഡെസിമൽ കളർ കോഡ് #RRGGBB എന്ന് വിളിക്കപ്പെടുന്നവയാണ് ഉപയോഗിക്കുന്നത്, ഇവിടെ ഓരോ ജോഡിയും അതിന്റെ നിറത്തിന്റെ വിഹിതത്തിന് ഉത്തരവാദികളാണ്: RR - ചുവപ്പ്, GG - പച്ച, BB - നീല. ഓരോ വർണ്ണ ഭിന്നസംഖ്യയും 00 മുതൽ FF വരെയാണ്.

വെബ് ഡിസൈനിലെ വർണ്ണത്തിന്റെ മറ്റ് രണ്ട് പ്രതിനിധാനങ്ങൾ ഇവയാണ്: RGB(*,*,*) രൂപത്തിൽ, ഒരു വർണ്ണത്തിന്റെ ഓരോ "*" അംശവും 0 മുതൽ 255 വരെയുള്ള ദശാംശ അക്കങ്ങളാലും ഇംഗ്ലീഷിലെ വർണ്ണ നാമങ്ങളാലും പ്രതിനിധീകരിക്കുന്നു.

ഒരു കളർ ഇമേജ് സൃഷ്ടിക്കുമ്പോൾ, വ്യത്യസ്ത തരം കമ്പ്യൂട്ടറുകളിലും മോണിറ്ററുകളിലും ബ്രൗസറുകളിലും നിറങ്ങളുടെ ശരിയായ പുനർനിർമ്മാണമാണ് പ്രധാന പ്രശ്നം. ബ്രൗസറിന് ഒരു നിറം ശരിയായി പ്രദർശിപ്പിക്കാൻ കഴിയുന്നില്ലെങ്കിൽ, അത് സമാനമായ ഒന്ന് തിരഞ്ഞെടുക്കുന്നു അല്ലെങ്കിൽ നിരവധി നിറങ്ങൾ മിക്സ് ചെയ്യുന്നു. ചിലപ്പോൾ ഇത് തികച്ചും വ്യത്യസ്തമായ നിറങ്ങൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാം.

മേശ 16 പ്രാഥമിക നിറങ്ങൾ, ഇത് എല്ലാ ബ്രൗസറുകളിലും ഉപയോഗിക്കുന്നു

പേര്	നിറം	ഹെക്സ്	(RGB)
അക്വാ (കടൽ തിരമാല)		#00FFFF	(000,255,255)
കറുപ്പ്		#000000	(000,000,000)
നീല		#0000FF	(000,000,255)
ഫ്യൂഷിയ (മജന്ത)		#FF00FF	(255,000,255)
ചാരനിറം		#808080	(128,128,128)
പച്ച		#008000	(000,128,000)
നാരങ്ങ (തിളക്കമുള്ള പച്ച)		#00FF00	(000,255,000)
മെറൂൺ (ഇരുണ്ട ബർഗണ്ടി)		#800000	(128,000,000)
നേവി (കടും നീല)		#000080	(000,000,128)
ഒലിവ്		#808000	(128,128,000)
പർപ്പിൾ		#800080	(128,000,128)
ചുവപ്പ്		#FF0000	(255,000,000)
വെള്ളി		#C0C0C0	(192,192,192)
ടീൽ (ചാര-പച്ച)		#008080	(000,128,128)
വെള്ള		#FFFFFF	(255,255,255)
മഞ്ഞ		#FFFF00	(255,255,000)

മേശ ധൂമ്രനൂൽനിറങ്ങളും അതിന്റെ ഷേഡുകളും

പേര്	നിറം	ഹെക്സ്	(RGB)
മജന്ത (മജന്ത)		#FFCBDB	(255,203,219)
മജന്ത (മജന്ത)		#FF0099	(255,000,153)
മജന്ത (മജന്ത)		#F95A61	(249,090,097)
ഫ്യൂഷിയ (ഫ്യൂഷിയ)		#FF00FF	(255,000,255)
മൗവിൻ (അനിലൈൻ പർപ്പിൾ)		#EF0097	(239,000,151)
സാൽമൺ പിങ്ക് (ഓറഞ്ച് പിങ്ക്)		#FF91A4	(255,145,164)
സെനിസ് (പർപ്പിൾ നിറത്തിലുള്ള ഒരു നിഴൽ)		#DE3163	(153,149,140)
വഴുതന വഴുതന (വഴുതന)		#990066	(153,000,132)
ലാവെൻഡർ ബ്ലഷ് (പിങ്ക്-ലാവെൻഡർ)		#FFF0F5	(255,240,245)
ലിലാക്ക് (ലിലാക്ക്)		#C8A2C8	(200,162,200)
മജന്ത (മജന്ത)		#FF008F	(255,000,143)
ഓർക്കിഡ് (ഓർക്കിഡ്)		#DA70D6	(218,112,214)
ചുവപ്പ്-വയലറ്റ് (പർപ്പിൾ-ചുവപ്പ്)		#C71585	(199,021,133)
സാങ്കുയിൻ (സങ്കുയിൻ)		#92000A	(146,000,010)
മുൾപടർപ്പു (പർപ്പിൾ നിഴൽ)		#D8BFD8	(185,211,238)
വയലറ്റ്-വഴുതന (പർപ്പിൾ നിഴൽ)		#991199	(153,017,153)
റോസ വിവോ (ആഴത്തിലുള്ള പിങ്ക്)		#FF007F	(255,000,127)
ലാവെൻഡർ-റോസ് (പർപ്പിൾ നിഴൽ)		#FBA0E3	(108,123,139)
മൗണ്ട് ബാറ്റൺ പിങ്ക്		#997ABD	(153,122,141)

മേശ ചാരനിറംനിറങ്ങളും അതിന്റെ ഷേഡുകളും

പേര്	നിറം	ഹെക്സ്	(RGB)
ചാരനിറം		#808080	(128,128,128)
ചാരനിറം		#ബെബെബെ	(190,190,190)
(ഗ്രേ ഷേഡ്)		#858585	(133,133,133)
ഗ്രേ33		#545454	(084,084,084)
(ഗ്രേ സ്ലേറ്റ്)		#708090	(112,128,144)
(ക്വാർട്സ്)		#99958സെ	(153,149,140)
(ഇളം ചാര നിറം)		#bbbbbb	(187,187,187)
(വെള്ളി)		#c0c0c0	(192,192,192)
(ചാര-വെളുപ്പ്)		#f0f0f0	(240,240,240)
(അബ്ദുൽ-കെരിമിന്റെ താടി)		#e0e0e0	(224,224,224)
ഇളം ചാരനിറം (ഇളം ചാരനിറം)		#d3d3d3	(211,211,211)
ലൈറ്റ്സ്റ്റേറ്റ് ഗ്രേ()		#778899	(119,136,153)
സ്റ്റേറ്റ് ഗ്രേ-1 (ഇളം കോൺഫ്ലവർ നീല1)		#c6e2ff	(198,226,255)
സ്റ്റേറ്റ് ഗ്രേ-2 (ഇളം കോൺഫ്ലവർ നീല2)		#b9d3ee	(185,211,238)
StateGray3()		#9fb6cd	(159,182,205)
StateGray4()		#6c7b8b	(108,123,139)

ഡ്രോയിംഗ് ശ്രദ്ധാപൂർവ്വം നോക്കുക. ഡ്രോപ്പ്-ഡൗൺ വിൻഡോയുടെ പശ്ചാത്തലം അർദ്ധസുതാര്യമാക്കിയിരിക്കുന്നു. ഇത് തികച്ചും സാധാരണമായ ഒരു ഡിസൈൻ ടെക്നിക്കാണ്. ഇത് എങ്ങനെ നടപ്പിലാക്കാം എന്ന് നമുക്ക് ചിന്തിക്കാം.

ടാസ്ക്

നിറം ക്രോസ്-ബ്രൗസർ അർദ്ധസുതാര്യമാക്കുക.

പരിഹാരം

ഈ സാഹചര്യത്തിൽ ആദ്യം ചിന്തിക്കുന്നത് പശ്ചാത്തലത്തിനായി മുൻകൂട്ടി സജ്ജമാക്കിയ അർദ്ധസുതാര്യതയുള്ള ഒരു png24 ഇമേജ് ഉപയോഗിക്കുക എന്നതാണ്. എന്നാൽ ഈ ചിത്രം തികച്ചും അനാവശ്യമാണ്. ഇത് കൂടാതെ നിങ്ങൾക്ക് നന്നായി ചെയ്യാൻ കഴിയും (അതിനാൽ സെർവറിലേക്കുള്ള ഒരു അധിക അഭ്യർത്ഥന കൂടാതെ). ഒപ്റ്റിമൽ പരിഹാരം കണ്ടെത്താൻ ഇനിയും ശ്രമിക്കാം.

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

തീർച്ചയായും, നിങ്ങൾക്ക് ഒരു അധിക കണ്ടെയ്നർ ചേർക്കാനും അതിലേക്ക് മാത്രം അതാര്യത പ്രയോഗിക്കാനും ശ്രമിക്കാം, എന്നാൽ ഈ HTML ഘടകം അലങ്കാരത്തിന് വേണ്ടി മാത്രമുള്ളതായിരിക്കും, അത് അനാവശ്യമായിരിക്കും. അതില്ലാതെ ചെയ്യാൻ പറ്റുമോ?

തീർച്ചയായും നിങ്ങൾക്ക് കഴിയും! നിങ്ങൾ RGBA ഉപയോഗിക്കുകയാണെങ്കിൽ.

RGBA വർണ്ണ വിവരണ ഫോർമാറ്റ്

RGB, RGBA ഫംഗ്‌ഷനുകൾ ഉപയോഗിച്ച് നിറം വ്യക്തമാക്കാൻ CSS3 നിങ്ങളെ അനുവദിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, ഒരു ബൈറ്റ് അനുവദിച്ചിരിക്കുന്ന ഓരോ വർണ്ണ ഘടകത്തിന്റെയും അനുപാതം ഞങ്ങൾ സൂചിപ്പിക്കണം (ആർക്കെങ്കിലും അറിയില്ലെങ്കിൽ 0 മുതൽ 255 വരെ).

ഈ കേസിന്റെ വാക്യഘടന വളരെ ലളിതമാണ്:

പശ്ചാത്തലം: rgb(0, 255, 0); /* ശുദ്ധമായ പച്ച */

RGBA-യ്ക്ക്, നാലാമത്തെ പാരാമീറ്റർ ചേർത്തിരിക്കുന്നു - ആൽഫ സുതാര്യത (0 മുതൽ 1 വരെ).

പശ്ചാത്തലം: rgba(255, 0, 0, 0.5); /* 50% സുതാര്യതയോടെ ശുദ്ധമായ ചുവപ്പ് */

ഇതാ, നമ്മുടെ പ്രശ്നത്തിനുള്ള പരിഹാരം. rgba ഉപയോഗിച്ച് പശ്ചാത്തല നിറം സജ്ജീകരിക്കുക, എല്ലാം നമ്മൾ ആഗ്രഹിക്കുന്ന രീതിയിൽ കാണപ്പെടും. അനാവശ്യ ചിത്രങ്ങളും ഘടകങ്ങളും ഇല്ലാതെ!

എനിക്ക് ഈ നമ്പറുകൾ എവിടെ നിന്ന് ലഭിക്കും?

ഫോട്ടോഷോപ്പിന്റെ ഐഡ്രോപ്പർ ടൂൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് നിറത്തിന്റെ ഘടകങ്ങൾ നോക്കാം.

ക്രോസ് ബ്രൗസർ അനുയോജ്യതയെക്കുറിച്ച്

RGB ഫംഗ്‌ഷൻ RGBA നേക്കാൾ വളരെ പഴക്കമുള്ളതും CSS2 സ്റ്റാൻഡേർഡിന്റെ കാലം മുതൽ നിലവിലുള്ളതുമായതിനാൽ, ഏറ്റവും പുരാതന ബ്രൗസറുകളിൽ നിന്ന് പരിരക്ഷിക്കുന്നതിന്, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന തനിപ്പകർപ്പ് നിർമ്മാണം ഉപയോഗിക്കാം:

SomeBlock (പശ്ചാത്തലം: rgb(255, 0, 0); പശ്ചാത്തലം: rgba(255, 0, 0, 0.5); )

ഈ സമീപനത്തിലൂടെ, ആധുനിക ബ്രൗസറുകളുടെ മുത്തച്ഛന്മാർക്ക് അർദ്ധസുതാര്യത ഉണ്ടാകില്ല, പക്ഷേ നിറം തന്നെ ശരിയായി തുടരും.

നിങ്ങൾ ഐഇ പ്രത്യേകം ശ്രദ്ധിക്കേണ്ടതുണ്ട്. പതിപ്പ് 8 ഉൾപ്പെടെ കഴുതകൾക്ക് RGBA മനസ്സിലാകുന്നില്ല.

എല്ലായ്പ്പോഴും എന്നപോലെ: കർഷകർക്ക് ഭൂമി, തൊഴിലാളികൾക്ക് ഫാക്ടറികൾ, കഴുതകൾക്ക് ഊന്നുവടി! പോലെ .

തീർച്ചയായും, പോരാട്ട സാഹചര്യങ്ങളിൽ ഞങ്ങൾ ഈ നിയമം ഒരു പ്രത്യേക സിഎസ്എസിലേക്ക് ഇടുന്നു, അത് ഞങ്ങൾ ബന്ധിപ്പിക്കുന്നു.

SomeBlock (പശ്ചാത്തലം:സുതാര്യം; ഫിൽട്ടർ:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); സൂം: 1; )

ആരംഭിക്കുന്നതും അവസാനിക്കുന്നതുമായ നിറങ്ങൾ ഒരേപോലെ (ff0000 - ചുവപ്പ്) വ്യക്തമാക്കുകയും ഈ ഫിൽട്ടറിലെ ഗ്രേഡിയന്റിനായി നിങ്ങൾക്ക് ആൽഫ ചാനൽ സജ്ജീകരിക്കാമെന്ന വസ്തുത പ്രയോജനപ്പെടുത്തുകയും ചെയ്യുക (ഉദാഹരണത്തിൽ, മൂല്യം 80 ആണ്).

റഫറൻസിനായി: ഫിൽട്ടർ ഹെക്സാഡെസിമൽ സിസ്റ്റം ഉപയോഗിക്കുന്നു, പൂർണ്ണമായും അതാര്യമായ നിറത്തിനുള്ള കോഡ് FF ആണ് (ദശാംശത്തിൽ ഇത് 255 ആണ്). അതനുസരിച്ച്, ഹെക്സാഡെസിമൽ 80 ദശാംശം 128 ആണ്, അതായത് 50% സുതാര്യത.

പരീക്ഷിച്ചത്:

• IE 6-9
• Firefox 3+
• ഓപ്പറ 10+
• സഫാരി 4
• ക്രോം