നിറം തിരഞ്ഞെടുക്കൽ ഉപകരണം - RGB, ഹെക്സ്, CMYK & HSV നിറ കോഡുകൾ പരിവർത്തനം ചെയ്യുക
ഉടനടി RGB, ഹെക്സ്, CMYK, HSV പരിവർത്തനത്തിനുള്ള സൗജന്യ ഓൺലൈൻ നിറം തിരഞ്ഞെടുക്കൽ. വെബ് ഡിസൈൻ, പ്രിന്റ്, ഡിജിറ്റൽ പദ്ധതികൾക്കായി നിറങ്ങൾ ദृശ്യമായി തിരഞ്ഞെടുക്കുകയോ കൃത്യമായ മൂല്യങ്ങൾ നൽകുകയോ ചെയ്യുക. ഒരു ക്ലിക്കിൽ ഏത് ഫോർമാറ്റും പകർപ്പെടുക.
നിറം തിരഞ്ഞെടുക്കുന്നവൻ
RGB (0-255)
CMYK (0-100)
നിറം തിരഞ്ഞെടുക്കൽ
വിവരണം
നിങ്ങൾക്ക് ഈ കളർ പിക്കർ കൊണ്ട് ചെയ്യാവുന്ന കാര്യങ്ങൾ
നിങ്ങളുടെ പ്രൊജക്റ്റിനുള്ള പരിപൂർണ്ണ നിറം തേടുകയാണോ? ഈ കളർ പിക്കർ നിങ്ങളെ RGB, ഹെക്സ്, CMYK, HSV എന്നിവ തമ്മിൽ നിറങ്ങൾ തിരഞ്ഞെടുക്കാനും പ്രിവ്യൂ ചെയ്യാനും പരിവർത്തനം ചെയ്യാനും സഹായിക്കുന്നു. വെബ്സൈറ്റ് കോഡ് ചെയ്യുന്നതിനോ, ലോഗോ ഡിസൈൻ ചെയ്യുന്നതിനോ, അച്ചടി ഫയലുകൾ തയ്യാറാക്കുന്നതിനോ, നിങ്ങൾക്ക് വേണ്ട കൃത്യമായ നിറ മൂല്യങ്ങൾ ഇവിടെ കണ്ടെത്താം - യാതൊരു അനുമാനവും, ഉപകരണങ്ങൾ തമ്മിൽ മാറ്റം വരുത്തുന്നതിനുമില്ല.
നിറ സ്പെക്ട്രത്തിൽ ഏതൊരു സ്ഥലത്തും ക്ലിക്ക് ചെയ്ത് ഒരു നിറം തിരഞ്ഞെടുക്കാം, സ്ലൈഡർ ഉപയോഗിച്ച് തെളിച്ചം സമന്വയിപ്പിക്കാം, അല്ലെങ്കിൽ കൃത്യമായ മൂല്യങ്ങൾ നേരിട്ട് നൽകാം. എല്ലാ ഫോർമാറ്റുകളും റിയൽ-ടൈമിൽ അപ്ഡേറ്റ് ചെയ്യപ്പെടുന്നു, ഒരു ക്ലിക്കിൽ ഏതൊരു നിറ കോഡും പകർത്താം.
നിറ മോഡലുകൾ മനസ്സിലാക്കൽ
വ്യത്യസ്ത പ്രൊജക്റ്റുകൾക്ക് വ്യത്യസ്ത നിറ ഫോർമാറ്റുകൾ ആവശ്യമാണ്. ഇവിടെ ഓരോന്നിന്റെയും ഉപയോഗവും വ്യാഖ്യാനവും കൊടുത്തിരിക്കുന്നു:
RGB (റെഡ്, ഗ്രീൻ, ബ്ലൂ)
RGB വർണ്ണം ചെയ്യുന്നത് റെഡ്, ഗ്രീൻ, ബ്ലൂ വെളിച്ചം മിശ്രിതമാക്കിയാണ്—നിങ്ങളുടെ സ്ക്രീൻ നിറങ്ങൾ കാണിക്കുന്ന രീതിയിൽ. ഓരോ ഘടകവും 0 മുതൽ 255 വരെ പരിധിയിൽ:
- RGB(255, 0, 0) = പുറംതിരിഞ്ഞ റെഡ്
- RGB(0, 255, 0) = പുറംതിരിഞ്ഞ ഗ്രീൻ
- RGB(0, 0, 255) = പുറംതിരിഞ്ഞ ബ്ലൂ
- RGB(255, 255, 255) = വെളുത്ത്
- RGB(0, 0, 0) = കറുപ്പ്
RGB വേണ്ട സമയം: ഏതൊരു ഡിജിറ്റൽ പ്രവൃത്തിക്കും—വെബ്സൈറ്റുകൾ, മൊബൈൽ അപ്ലിക്കേഷനുകൾ, വീഡിയോ എഡിറ്റിംഗ്, അല്ലെങ്കിൽ സ്ക്രീൻ അടിസ്ഥാനമുള്ള ഗ്രാഫിക്സ്. ഇത് ഡിസ്പ്ലേകളുടെ മൂലഭാഷയാണ്, അതുകൊണ്ട് CSS പോലുള്ള ഉപകരണങ്ങൾ rgb() and rgba() ഫംഗ്ഷനുകൾ നേരിട്ട് പിന്തുണയ്ക്കുന്നു. W3C CSS നിറ മൊഡ്യൂൾ നിർദ്ദേശത്തിൽ പ്രകാരം, RGB വെബ് സ്റ്റാൻഡേർഡുകളുടെ അടിസ്ഥാന നിറ മോഡലാണ്.
ഹെക്സാഡെസിമൽ (ഹെക്സ്)
ഹെക്സ് കോഡുകൾ RGB മൂല്യങ്ങൾ ബേസ്-10 പകരം ബേസ്-16 ൽ എഴുതിയതാണ്. ഒരു ഹെക്സ് നിറം #FF5733 പോലെ കാണപ്പെടുന്നു, അവിടെ:
#ചിഹ്നം ഹെക്സ് കോഡാണെന്ന് അടയാളപ്പെടുത്തുന്നു- ആദ്യ രണ്ട് അക്ഷരങ്ങൾ = റെഡ് (00-FF)
- മധ്യ രണ്ട് = ഗ്രീൻ (00-FF)
- അവസാന രണ്ട് = ബ്ലൂ (00-FF)
#FF0000= റെഡ്,#00FF00= ഗ്രീൻ,#0000FF= ബ്ലൂ
3-അക്ഷര ഷോർട്ട്ഹാൻഡ് #F00 പോലെ #FF0000 പകരം ഉപയോഗിക്കാം—ഇത് ഓരോ നിറ ചാനലിലും ഒരേ അക്ഷരം ആവർത്തിക്കുമ്പോൾ പ്രവർത്തിക്കുന്നു.
ഹെക്സ് വേണ്ട സമയം: വെബ് വികസനം പ്രാഥമിക ഉപയോഗ മേഖലയാണ്. CSS ഹെക്സ് നൊട്ടേഷൻ എല്ലായ്പ്പോഴും പിന്തുണയ്ക്കുന്നു, കൂടാതെ മിക്ക വികസകർക്കും rgb() കാൾ വേഗത്തിൽ ടൈപ്പ് ചെയ്യാൻ കഴിയും. സാധാരണ തെറ്റ്: # ചിഹ്നം മറക്കുന്നത് നിങ്ങളുടെ സ്റ്റൈലുകൾ മൗനമായി തകർക്കും, കാരണം ബ്രൗസറുകൾ അത് സാധുവായ നിറമായി തിരിച്ചറിയില്ല.
CMYK (സയൻ, മാഗ്നെറ്റ, യെലോ, കീ/കറുപ്പ്)
CMYK പ്രിന്റർ ഉപയോഗിക്കുന്ന നിറ മോഡലാണ്. RGB (വെളിച്ചം കൂട്ടുന്ന) പോലെ അല്ലാതെ, CMYK അത് കുറയ്ക്കുന്നു—വെള്ള കടലാസിൽ മഷിയുടെ മിശ്രിതം വഴി നിറങ്ങൾ സൃഷ്ടിക്കുന്നു:
- ഓരോ ഘടകവും 0% മുതൽ 100% വരെ
- CMYK(0, 100, 100, 0) = റെഡ്
- CMYK(100, 0, 100, 0) = ഗ്രീൻ
- CMYK(0, 0, 0, 100) = പുറംതിരിഞ്ഞ കറുപ്പ് മഷി
- CMYK(0, 0, 0, 0) = മഷിയില്ല (വെള്ള കടലാസ് വഴി)
CMYK വേണ്ട സമയം: പ്രിന്റിംഗിനുള്ള രൂപകൽപ്പന—ബിസിനസ് കാർഡുകൾ, ബ്രൊഷറുകൾ, മാഗസിനുകൾ, പാക്കേജിംഗ്. യാഥാർഥ്യം ഇതാണ്: പല തീക്ഷ്ണ RGB നിറങ്ങളും CMYK മഷിയിൽ പ്രതിനിധീകരിക്കാൻ കഴിയില്ല. സ്ക്രീനിൽ കാണുന്ന ആ തിളക്കമുള്ള നീല നിറം? പ്രിന്റ് ചെയ്യുമ്പോൾ അത് കുറഞ്ഞ വർണ്ണത്തിൽ കാണപ്പെടും. പ്രൊഫഷണൽ ഡിസൈനർമാർ എല്ലായ്പ്പോഴും പ്രിന്റർിലേക്ക് ഫയലുകൾ അയയ്ക്കുന്നതിനുമുമ്പ് CMYK പരിവർത്തനങ്ങൾ പ്രിവ്യൂ ചെയ്യുന്നു.
HSV (ഹ്യൂ, സാച്ചുറേഷൻ, വാല്യൂ)
HSV നിറത്തെ മൂന്ന് സ്വാഭാവിക ഘടകങ്ങളായി തിരിക്കുന്നു:
- ഹ്യൂ: ഏത് നിറ വിഭാഗം (0-360°)—0° റെഡ്, 120° ഗ്രീൻ, 240° ബ്ലൂ
- സാച്ചുറേഷൻ: എത്ര വിവിധമായി അല്ലെങ്കിൽ ഗ്രേ (0-100%)—0% ഗ്രേസ്കെയിൽ, 100% പൂർണ്ണ സാച്ചുറേഷൻ
- വാല്യൂ: എത്ര തെളിഞ്ഞതോ അല്ലെങ്കിൽ കൂടുതൽ കറുത്തതോ (0-100%)—0% കറുപ്പ്, 100% പൂർണ്ണ തെളിച്ചം
HSV എന്തുകൊണ്ട് പ്രധാനം: ഇത് മനുഷ്യർ സ്വാഭാവികമായി നിറത്തെ കുറിച്ച് ചിന്തിക്കുന്ന രീതിയെ പ്രതിഫലിപ്പിക്കുന്നു. കൂടുതൽ കറുത്ത നീല വേണമോ? വാല്യൂ കുറയ്ക്കുക. കുറഞ്ഞ തീക്ഷ്ണതയുള്ള നീല വേണമോ? സാച്ചുറേഷൻ കുറയ്ക്കുക. ഇതുകൊണ്ട് HSV ഇന്റർആക്ടീവ് നിറ പിക്കർ പോലുള്ള സ്ഥലങ്ങൾക്ക് അനുയോജ്യമാണ്, അവിടെ നിങ്ങൾ സ്പെക്ട്രത്തിൽ ഒരു ഹ്യൂ തിരഞ്ഞെടുക്കുകയും സ്ലൈഡർ വഴി തെളിച്ചം നിയന്ത്രിക്കുകയും ചെയ്യുന്നു.
നിറ പരിവർത്തന സൂത്രങ്ങൾ
നിറ തിരഞ്ഞെടുക്കൽ സംവിധാനം സ്വയമേവ വ്യത്യസ്ത നിറ മോഡലുകൾ തമ്മിൽ ഈ ഗണിത സൂത്രങ്ങൾ ഉപയോഗിച്ച് പരിവർത്തനം നടത്തുന്നു:
RGB മുതൽ ഹെക്സ് പരിവർത്തനം
RGB മുതൽ ഹെക്സഡെസിമലിലേക്ക് പരിവർത്തനം:
- ഓരോ RGB ഘടകവും (0-255) രണ്ട് അക്ഷര ഹെക്സഡെസിമൽ സംഖ്യയിലേക്ക് പരിവർത്തനം ചെയ്യുക
- മൂന്ന് ഹെക്സഡെസിമൽ മൂല്യങ്ങളെ # പ്രിഫിക്സ്സുമായി കൂട്ടിച്ചേർക്കുക
toHex() ഒരു ദശാംശ സംഖ്യയെ അതിന്റെ ഹെക്സഡെസിമൽ പ്രതിനിധാനത്തിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു.
RGB മുതൽ CMYK പരിവർത്തനം
RGB മുതൽ CMYK പരിവർത്തനം ഈ ഘട്ടങ്ങളിലൂടെ നടക്കുന്നു:
- RGB മൂല്യങ്ങളെ 0-1 പരിധിയിലേക്ക് സാധാരണീകരിക്കുക
- കറുത്ത കീ (K) ഘടകം കണക്കാക്കുക
- K അടിസ്ഥാനത്തിൽ C, M, Y കണക്കാക്കുക
RGB മുതൽ HSV പരിവർത്തനം
RGB മുതൽ HSV പരിവർത്തനം:
ഹ്യൂ (H) സംബന്ധിച്ച്:
0° & \text{if } \Delta = 0 \\ 60° \times (\frac{G' - B'}{\Delta} \mod 6) & \text{if } C_{max} = R' \\ 60° \times (\frac{B' - R'}{\Delta} + 2) & \text{if } C_{max} = G' \\ 60° \times (\frac{R' - G'}{\Delta} + 4) & \text{if } C_{max} = B' \end{cases}$$ സാച്ചുറേഷൻ (S) സംബന്ധിച്ച്: $$S = \begin{cases} 0 & \text{if } C_{max} = 0 \\ \frac{\Delta}{C_{max}} \times 100\% & \text{otherwise} \end{cases}$$ വാല്യൂ (V) സംബന്ധിച്ച്: $$V = C_{max} \times 100\%$$ ## നിറ പിക്കർ ഉപയോഗിക്കുന്ന വിധം നിറങ്ങളുമായി പ്രവർത്തിക്കുന്നതിന് മൂന്ന് മാർഗ്ഗങ്ങൾ: സ്പെക്ട്രം ക്ലിക്ക് ചെയ്യുക, കൃത്യമായ മൂല്യങ്ങൾ ടൈപ്പ് ചെയ്യുക, അല്ലെങ്കിൽ സ്ലൈഡർ ഉപയോഗിച്ച് സമന്വയിപ്പിക്കുക. നിങ്ങളുടെ വർക്ക്ഫ്ലോയ്ക്ക് സ്വാഭാവിക്മായി തോന്നുന്നത് തിരഞ്ഞെടുക്കുക. ### നിറങ്ങൾ വിഷുവലി തിരഞ്ഞെടുക്കുക **നിറ സ്പെക്ട്രത്തിൽ** ഏതെങ്കിലും സ്ഥലത്ത് ക്ലിക്ക് ചെയ്ത് ഒരു നിറം തിരഞ്ഞെടുക്കുക. തിരശ്ചീന സ്ഥാനം ഹ്യൂ (ചുവപ്പ്, പച്ച, നീല, മുതലായവ) തിരഞ്ഞെടുക്കുന്നു, അതേസമയം വാർഷിക സ്ഥാനം സാച്ചുറേഷൻ (വിവിഡ് vs. വാഷ്ഡ് ഔട്ട്) നിയന്ത്രിക്കുന്നു. പ്രിവ്യൂ ഉടനടി അപ്ഡേറ്റ് ചെയ്യുന്നു അതിനാൽ നിങ്ങൾ കൃത്യമായി എന്ത് നേടുന്നുവെന്ന് കാണാം. സ്പെക്ട്രത്തിനു കീഴിലുള്ള **പ്രകാശ സ്ലൈഡർ** വലിച്ചുകൊണ്ട് നിങ്ങളുടെ നിറം കൂടുതൽ വെളുത്തതോ കൂടുതൽ കറുത്തതോ ആക്കുക. ഇത് HSV നിബന്ധനകളിൽ "മൂല്യ" ഘടകം സമന്വയിപ്പിക്കുന്നു—ഇടത്തേക്ക് കറുപ്പിക്കുന്നു, വലത്തേക്ക് വെളുപ്പിക്കുന്നു. ### കൃത്യമായ നിറ മൂല്യങ്ങൾ നൽകുക നിങ്ങൾക്ക് വേണ്ട നിറം മുൻകൂട്ടി അറിയാമോ? നേരിട്ട് ടൈപ്പ് ചെയ്യുക: **ഹെക്സ് ഫോർമാറ്റ്:** `#FF5733` പോലുള്ള കോഡുകൾ നൽകുക. `#` ഉൾപ്പെടുത്തുകയോ ഒഴിവാക്കുകയോ ചെയ്യാം—ടൂൾ രണ്ടും കൈകാര്യം ചെയ്യും. 3-അക്ഷര ഷോർട്ട്ഹാൻഡ് (`#F37`) വർക്ക് ചെയ്യുന്നു. **RGB ഫോർമാറ്റ്:** ചുവപ്പ്, പച്ച, നീല എന്നിവയ്ക്ക് 0-255 വരെയുള്ള മൂല്യങ്ങൾ ടൈപ്പ് ചെയ്യുക. നിങ്ങൾ അനിയന്ത്രിതമായി 300 നൽകിയാൽ, അത് സ്വയമേവ 255-ൽ പരിമിതപ്പെടുത്തും. **CMYK ഫോർമാറ്റ്:** ഓരോ മഷി ഘടകത്തിനും 0-100 ശതമാനം നൽകുക. പ്രിന്റ് ഡിസൈനർുടെ നിർദ്ദേശങ്ങൾ പൊരുത്തപ്പെടുത്തുമ്പോൾ ഉപകാരപ്രദം. ഓരോ ഫോർമാറ്റവും വാസ്തവിക സമയത്ത് മറ്റുള്ളവ അപ്ഡേറ്റ് ചെയ്യുന്നു. ഹെക്സ് കോഡ് മാറ്റുക, RGB/CMYK സ്വയമേവ സമന്വയിപ്പിക്കുന്നു. ### നിറ കോഡുകൾ പകർത്തുക ഏതെങ്കിലും നിറ ഫോർമാറ്റിനു സമീപമുള്ള പകർപ്പ് ബട്ടൺ (ക്ലിപ്പ്ബോർഡ് ഐകൺ) ക്ലിക്ക് ചെയ്യുക. ഒരു പെട്ടെന്നുള്ള "പകർത്തി!" സ്ഥിരീകരണം കാണുന്നതിനുശേഷം, നിങ്ങൾക്ക് വേണ്ട ഏതെങ്കിലും സ്ഥലത്ത്—CSS ഫയലുകൾ, ഡിസൈൻ സോഫ്റ്റ്വെയർ, പ്രമാണീകരണം, ഏതെങ്കിലും—പേസ്റ്റ് ചെയ്യാം. **പ്രൊ ടിപ്പ്:** വിവിധ ഫയലുകൾ അല്ലെങ്കിൽ അപ്ലിക്കേഷനുകൾ വഴി പ്രവർത്തിക്കുമ്പോൾ, ഒരു ബ്രൗസർ ടാബിൽ ഈ ടൂൾ തുറന്നിട്ടുവെക്കുക. കൺടെക്സ്റ്റ് മാറ്റാതെ നിറ മൂല്യങ്ങൾ പെട്ടെന്ന് അന്വേഷിക്കുകയും പകർത്തുകയും ചെയ്യാം. ## യഥാർഥ വൾഡ് ഉപയോഗ കേസുകൾ ### വെബ് വികസനം നിങ്ങൾ ഒരു ഡാർക് മോഡ് ടോഗിൾ നിർമ്മിക്കുകയാണ് കളർ വേരിയേഷനുകൾ ആവശ്യമുണ്ട്. നിങ്ങളുടെ ബ്രാൻഡിന്റെ പ്രാഥമിക നിറത്തിൽ (ഉദാഹരണം, `#3B82F6`) തുടങ്ങി, ബ്രൈറ്റ്നസ് സ്ലൈഡർ ഉപയോഗിച്ച് പശ്ചാത്തലങ്ങൾക്കുള്ള കൂടുതൽ കറുത്ത വേർഷനുകൾ (`#1E3A8A`) നിർമ്മിക്കുകയും ഹോവർ സ്റ്റേറ്റുകൾക്കുള്ള കൂടുതൽ വെളുത്ത വേർഷനുകൾ (`#60A5FA`) നിർമ്മിക്കുകയും ചെയ്യുക. ഓരോ ഹെക്സ് കോഡും നേരിട്ട് നിങ്ങളുടെ CSS കസ്റ്റം പ്രോപ്പർട്ടികളിലേക്ക് കോപ്പി ചെയ്യുക. പാരദർശ്യത പ്രവർത്തിക്കുമ്പോൾ, RGB മൂല്യങ്ങൾ എടുത്ത് `rgba()` ഫംഗ്ഷനുകളിൽ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, `rgb(59, 130, 246)` 80% അനുഭവത്തിനായി `rgba(59, 130, 246, 0.8)` ആകുന്നു. സാധാരണ സ്ഥിതി: ഒരു ക്ലൈന്റ് Figma ഡിസൈനിൽ RGB-യിൽ നിർദ്ദേശിക്കപ്പെട്ട നിറങ്ങൾ നൽകുന്നു, പക്ഷേ നിങ്ങൾ CSS-ൽ ഹെക്സ് കോഡുകൾ പ്രാഥമിക്കുന്നു. സ്വമേധയാ കണക്കാക്കുന്നതിനുപകരം ഇവിടെ കൺവർട്ട് ചെയ്യുക. ### പ്രിന്റിനുള്ള ഗ്രാഫിക് ഡിസൈൻ ഇവിടെ CMYK അത്യന്തം പ്രധാനമാണ്. നിങ്ങൾ RGB നിറങ്ങളിൽ സ്ക്രീനിൽ ഒരു ജ്വലിക്കുന്ന പോസ്റ്റർ ഡിസൈൻ ചെയ്തിരിക്കുന്നു, പ്രിന്റർ അയക്കുന്നതിനുമുമ്പ് CMYK മൂല്യങ്ങൾ പരിശോധിക്കുക. ആ വൈദ്യുതിക സിയാൻ (RGB 0, 255, 255) CMYK(100, 0, 0, 0)-ലേക്ക് കൺവർട്ട് ചെയ്യുന്നു—ഇത് നന്നായി കാണുന്നു. പക്ഷേ ആ തിളക്കമുള്ള സ്ക്രീൻ പച്ച (RGB 0, 255, 0) പ്രിന്റ് ചെയ്യുമ്പോൾ കാര്യമായി മാറിയേക്കാം. പ്രൊഫഷണൽ വർക്ക്ഫ്ലോ: നിങ്ങളുടെ സ്ക്രീൻ നിറങ്ങൾ ഇവിടെ നൽകുക, CMYK കൺവർഷനുകൾ കുറിക്കുക, പിന്നെ നിങ്ങളുടെ ഡിസൈൻ സോഫ്റ്റ്വെയറിന്റെ CMYK പ്രിവ്യൂ മോഡിൽ വിഷുവലി കൺപെയർ ചെയ്യുക. നിറങ്ങൾ വളരെ മാറിയാൽ, ഫൈനൽ ഡിസൈൻ ചെയ്യുന്നതിനുമുമ്പ് നിങ്ങളുടെ തിരഞ്ഞെടുപ്പുകൾ ക്രമീകരിക്കുക. ഇത് "സ്ക്രീനിൽ വ്യത്യാസമായി കണ്ടു" സംഭാഷണം തടയുന്നു. ### UI/UX ഡിസൈൻ സിസ്റ്റങ്ങൾ ഒരു ഡിസൈൻ സിസ്റ്റം നിർമ്മിക്കുന്നത് സ്ഥിരമായ നിറ സ്കെയിലുകൾ ആവശ്യപ്പെടുന്നു. ഒരു പ്രാഥമിക നിറത്തിൽ തുടങ്ങി, വ്യത്യസ്ത UI സ്റ്റേറ്റുകൾക്കായി 5-10 ബ്രൈറ്റ്നസ് വേരിയേഷനുകൾ സൃഷ്ടിക്കുക. ബ്രൈറ്റ്നസ് സ്ലൈഡർ ഇത് വേഗത്തിൽ ചെയ്യാൻ സഹായിക്കുന്നു—യാതൊരു മാനസിക ഗണിതവും ആവശ്യമില്ല. ആക്സസിബിലിറ്റിക്കായി, വാചകവും പശ്ചാത്തലവും തമ്മിൽ പര്യാപ്ത കൺട്രാസ്റ്റ് ആവശ്യമാണ്. ഈ ഉപകരണം കൺട്രാസ്റ്റ് അനുപാതങ്ങൾ കണക്കാക്കുന്നില്ല (അതിനായി നിങ്ങൾക്ക് ഒരു സമർപ്പിത [WCAG കൺട്രാസ്റ്റ് പരിശോധകൻ](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) ആവശ്യമാണ്), പക്ഷേ ഇത് വ്യത്യസ്ത നിഴലുകൾ പരിശോധിക്കാൻ സഹായിക്കുന്നു. യഥാർഥ സ്ഥിതി: നിങ്ങളുടെ പ്രാഥമിക ബട്ടൺ `#2563EB` ഉപയോഗിക്കുന്നു, പക്ഷേ ആ പശ്ചാത്തലത്തിൽ വാചകം കൺട്രാസ്റ്റ് ആവശ്യങ്ങൾ പാലിക്കുന്നില്ല. പശ്ചാത്തലം വെളുപ്പിക്കുകയോ വാചകം കറുപ്പിക്കുകയോ ചെയ്യുക—വേഗത്തിൽ പരിശോധിക്കാൻ പ്രിവ്യൂ ഉപയോഗിക്കുക. (ബാക്കി ഭാഗം തുടരുന്നു...) ## നിങ്ങൾക്ക് ആവശ്യമായ മറ്റ് നിറ ഉപകരണങ്ങൾ ഈ ഉപകരണം വ്യക്തിഗത നിറങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിനും പരിവർത്തനം ചെയ്യുന്നതിനും കേന്ദ്രീകരിച്ചിരിക്കുന്നു. നിങ്ങളുടെ പ്രൊജക്റ്റിനനുസരിച്ച്, നിങ്ങൾക്ക് ഇനിപ്പറയുന്നവയും ആവശ്യമാകാം: **പാലറ്റ് ജനറേറ്ററുകൾ** (Adobe Color, Coolors) നിറ സിദ്ധാന്തത്തിൽ അടിസ്ഥാനപ്പെടുത്തി പൊരുത്തപ്പെട്ട നിറങ്ങൾ - പൂരക, ത്രിഭുജ, അല്ലെങ്കിൽ സമാനമായ സ്കീമുകൾ ആവശ്യമുള്ളപ്പോൾ. **ബ്രൗസർ വിപുലീകരണങ്ങൾ** (ColorZilla, Eye Dropper) ഏതെങ്കിലും വെബ്പേജ് അല്ലെങ്കിൽ സ്ക്രീൻ എലിമെന്റിൽ നിന്ന് നിറങ്ങൾ പുറത്തെടുക്കാൻ. നിലവിലുള്ള രൂപകൽപ്നകളുമായി പൊരുത്തപ്പെടുന്നതിന് അനുയോജ്യം. **കോൺട്രാസ്റ്റ് പരിശോധകൾ** ആക്സസിബിലിറ്റി പ്രവൃത്തിക്ക്. [WebAIM കോൺട്രാസ്റ്റ് പരിശോധകൻ](https://webaim.org/resources/contrastchecker/) നിങ്ങളുടെ വാചക/പശ്ചാത്തല സംയോജനങ്ങൾ WCAG മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കുന്നു. **Pantone/RAL സിസ്റ്റങ്ങൾ** വ്യത്യസ്ത പ്രിന്റ് ഷോപ്പുകളിലും വസ്തുക്കളിലും കൃത്യമായ പ്രിന്റ് നിറ പൊരുത്തത്തിനായി. ഈ ഭൗതിക സ്വാച്ച്ബുക്കുകൾ ഡിജിറ്റൽ ഉപകരണങ്ങൾക്ക് കൃത്യമായി പകർത്താൻ കഴിയാത്ത സ്റ്റാൻഡേർഡീകൃത സൂചികകൾ നൽകുന്നു. ## നിറങ്ങൾ സുലഭമാക്കൽ പുരുഷന്മാരിൽ ഏകദേശം 8% വനിതകളിൽ 0.5% പേർക്ക് നിറ വ്യതിയാന കുറവ് ഉണ്ട്. ഇതാണ് ഉൾക്കൊള്ളുന്ന രീതിയിൽ രൂപകൽപ്പന ചെയ്യുന്ന വഴി: **ഒരിക്കലും അർഥം വ്യക്തമാക്കാൻ നിറം മാത്രം ഉപയോഗിക്കരുത്** നിങ്ങളുടെ ഫോം പിഴവുകൾ ചുവപ്പിൽ കാണിക്കുന്നുവെങ്കിൽ, ഒരു ഐകൺ അല്ലെങ്കിൽ വാചക ലേബൽ കൂടി ചേർക്കുക. വ്യത്യസ്ത നിറത്തിലുള്ള വരകളുള്ള ചാർട്ടുകൾ? പാറ്റേൺ, ലേബൽ, അല്ലെങ്കിൽ രണ്ടും കൂടി ചേർക്കുക. **കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾ പരിശോധിക്കുക** [WebAIM കോൺട്രാസ്റ്റ് പരിശോധകൻ](https://webaim.org/resources/contrastchecker/) പോലുള്ള ഉപകരണങ്ങൾ ഉപയോഗിച്ച്. സാധാരണ വാചകത്തിന് അതിന്റെ പശ്ചാത്തലത്തിനെതിരെ കുറഞ്ഞത് 4.5:1 അനുപാതം വേണം, വലിയ വാചകത്തിന് 3:1. [WCAG 2.1 മാർഗനിർദ്ദേശങ്ങൾ](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) പ്രകാരം, ഇത് മൃദുവായ കാഴ്ചക്കുറവുള്ള ഉപയോക്താക്കൾക്ക് വായനക്ഷമത ഉറപ്പാക്കുന്നു. **പ്രശ്നകരമായ സംയോജനങ്ങൾ ഒഴിവാക്കുക:** ചുവപ്പ്-പച്ച ഏറ്റവും സാധാരണ പ്രശ്നമാണ് (പ്രൊട്ടാനോപ്പിയയും ഡ്യൂട്ടെരനോപ്പിയയും ചുവപ്പ്, പച്ച എന്നിവയുടെ പ്രത്യക്ഷീകരണത്തെ ബാധിക്കുന്നു). നീല-മഞ്ഞ ട്രിട്ടാനോപ്പിയ ഉള്ളവർക്ക് പ്രശ്നങ്ങൾ സൃഷ്ടിക്കുന്നു. [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) പോലുള്ള സിമുലേറ്ററുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ രൂപകൽപ്പനകൾ വ്യത്യസ്ത നിറ വിഷൻ കുറവുള്ള ഉപയോക്താക്കൾക്ക് എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് പരിശോധിക്കുക. **കഴിവതും കളർ-അന്ധ-സൗഹൃദ പാലറ്റുകൾ ഉപയോഗിക്കുക**. നീല, ഓറഞ്ച്, മഞ്ഞ എന്നിവ പൊതുവെ നന്നായി പ്രവർത്തിക്കുന്നു കാരണം അവ ഏറ്റവും കൂടുതൽ നിറ അന്ധതയുടെ തരങ്ങളിൽ വ്യത്യാസപ്പെടുത്താൻ കഴിയും. ## Frequently Asked Questions ### What's the difference between RGB and CMYK? RGB is for screens, CMYK is for print. Screens create colors by emitting red, green, and blue light (additive mixing), while printers create colors by layering cyan, magenta, yellow, and black inks on paper (subtractive mixing). RGB can produce brighter, more vibrant colors than CMYK because light has a wider color gamut than ink. That's why your screen colors often look duller when printed. ### Why do my colors look different when printed? Screens emit light, paper reflects it—fundamentally different processes. Plus, RGB handles millions of colors that CMYK inks simply can't reproduce. Screen calibration, paper quality, and ink variations add more variability. Always check CMYK values before printing, and request physical proofs for critical color-matching work. ### How do I get hex codes from colors I see online? Use your browser's developer tools. In Chrome or Firefox, right-click any element, select "Inspect," then click the small color square in the styles panel. This opens a color picker that shows the hex code. Browser extensions like ColorZilla make this even faster—they let you click anywhere on a page to grab its color value. ### What does the # symbol mean in hex codes? It's just a prefix telling the browser "this is a hexadecimal color code." The standard comes from early HTML and CSS specifications. The six characters after the `#` represent RGB values in base-16: two digits for red, two for green, two for blue. Without the `#`, browsers won't recognize it as a color. ### Why do 3-digit hex codes work? They're shorthand for when each color channel repeats. `#F00` expands to `#FF0000` (red), `#C9C` becomes `#CC99CC` (light purple). This shorthand was created in the 1990s to reduce file sizes when bandwidth was expensive. It's still convenient today for simple colors. ### Are the color conversions accurate? RGB-to-hex conversions are mathematically exact—they're the same values in different number bases. RGB-to-CMYK conversions are approximations because you're converting between fundamentally different color spaces (light vs. ink). The tool uses [ICC color profile standards](http://www.color.org/specification/ICC1v42_2006-05.pdf) for these conversions, which is the same approach professional design software uses. ### How do I create accessible color combinations? Use a contrast checker like [WebAIM's tool](https://webaim.org/resources/contrastchecker/) after selecting your colors here. You need a 4.5:1 ratio for normal text, 3:1 for large text. Avoid red-green combinations (hardest for colorblind users). When in doubt, darker text on lighter backgrounds or vice versa—sufficient luminance difference is what matters most. ### Can I pick colors from images? Not directly in this tool. Use a browser extension like ColorZilla, or screenshot the image and use your operating system's color picker (Digital Color Meter on macOS, PowerToys Color Picker on Windows). Once you have the color value, enter it here to convert between formats. ### Why do some RGB colors not convert well to CMYK? CMYK has a narrower "gamut" (range of reproducible colors) than RGB. Bright blues, vibrant greens, and electric oranges often fall outside what CMYK inks can physically create. When this happens, the printer substitutes the closest possible match, which usually looks less saturated. Professional print designers often start with CMYK-safe colors to avoid this issue. ## നിറ പരിവർത്തനങ്ങൾക്കുള്ള കോഡ് ഉദാഹരണങ്ങൾ വ്യത്യസ്ത നിറ ഫോർമാറ്റുകൾ തമ്മിൽ പരിവർത്തനം ചെയ്യുന്നതിനുള്ള കോഡ് ഉദാഹരണങ്ങൾ ഇവിടെ നൽകിയിരിക്കുന്നു:1// RGB മുതൽ Hex പരിവർത്തനം
2function rgbToHex(r, g, b) {
3 const toHex = (c) => {
4 const hex = Math.round(c).toString(16);
5 return hex.length === 1 ? '0' + hex : hex;
6 };
7
8 return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// Hex മുതൽ RGB പരിവർത്തനം
12function hexToRgb(hex) {
13 // # ഉണ്ടെങ്കിൽ നീക്കം ചെയ്യുക
14 const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15
16 // 3-അക്ഷര്യവും 6-അക്ഷര്യവുമായ hex കൈകാര്യം ചെയ്യുക
17 const expandedHex = cleanHex.length === 3
18 ? cleanHex.split('').map(char => char + char).join('')
19 : cleanHex;
20
21 const r = parseInt(expandedHex.substring(0, 2), 16);
22 const g = parseInt(expandedHex.substring(2, 4), 16);
23 const b = parseInt(expandedHex.substring(4, 6), 16);
24
25 return { r, g, b };
26}
27
28// RGB മുതൽ CMYK പരിവർത്തനം
29function rgbToCmyk(r, g, b) {
30 // RGB മൂല്യങ്ങൾ സാധാരണീകരിക്കുക
31 const normalizedR = r / 255;
32 const normalizedG = g / 255;
33 const normalizedB = b / 255;
34
35 // K (കറുപ്പ്) കണക്കാക്കുക
36 const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37
38 // പൂർണ്ണ കറുപ്പ് കൈകാര്യം ചെയ്യുക
39 if (k === 1) {
40 return { c: 0, m: 0, y: 0, k: 100 };
41 }
42
43 // C, M, Y കണക്കാക്കുക
44 const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45 const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46 const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47
48 return {
49 c: Math.round(c),
50 m: Math.round(m),
51 y: Math.round(y),
52 k: Math.round(k * 100)
53 };
54}
55
56// ഉപയോഗ ഉദാഹരണം
57const rgb = { r: 255, g: 0, b: 0 }; // പൂർണ്ണ ചുവപ്പ്
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
601# RGB മുതൽ Hex പരിവർത്തനം
2def rgb_to_hex(r, g, b):
3 return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex മുതൽ RGB പരിവർത്തനം
6def hex_to_rgb(hex_color):
7 # # ഉണ്ടെങ്കിൽ നീക്കം ചെയ്യുക
8 hex_color = hex_color.lstrip('#')
9
10 # 3-അക്ഷര്യവും 6-അക്ഷര്യവുമായ hex കൈകാര്യം ചെയ്യുക
11 if len(hex_color) == 3:
12 hex_color = ''.join([c*2 for c in hex_color])
13
14 return {
15 'r': int(hex_color[0:2], 16),
16 'g': int(hex_color[2:4], 16),
17 'b': int(hex_color[4:6], 16)
18 }
19
20# RGB മുതൽ CMYK പരിവർത്തനം
21def rgb_to_cmyk(r, g, b):
22 # RGB മൂല്യങ്ങൾ സാധാരണീകരിക്കുക
23 r_norm = r / 255
24 g_norm = g / 255
25 b_norm = b / 255
26
27 # K (കറുപ്പ്) കണക്കാക്കുക
28 k = 1 - max(r_norm, g_norm, b_norm)
29
30 # പൂർണ്ണ കറുപ്പ് കൈകാര്യം ചെയ്യുക
31 if k == 1:
32 return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33
34 # C, M, Y കണക്കാക്കുക
35 c = ((1 - r_norm - k) / (1 - k)) * 100
36 m = ((1 - g_norm - k) / (1 - k)) * 100
37 y = ((1 - b_norm - k) / (1 - k)) * 100
38
39 return {
40 'c': round(c),
41 'm': round(m),
42 'y': round(y),
43 'k': round(k * 100)
44 }
45
46# ഉപയോഗ ഉദാഹരണം
47rgb = {'r': 0, 'g': 128, 'b': 255} # ആകാശ നീല
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
531public class ColorConverter {
2 // RGB മുതൽ Hex പരിവർത്തനം
3 public static String rgbToHex(int r, int g, int b) {
4 return String.format("#%02x%02x%02x", r, g, b);
5 }
6
7 // Hex മുതൽ RGB പരിവർത്തനം
8 public static int[] hexToRgb(String hexColor) {
9 // # ഉണ്ടെങ്കിൽ നീക്കം ചെയ്യുക
10 if (hexColor.startsWith("#")) {
11 hexColor = hexColor.substring(1);
12 }
13
14 // 3-അക്ഷര്യവും 6-അക്ഷര്യവുമായ hex കൈകാര്യം ചെയ്യുക
15 if (hexColor.length() == 3) {
16 String expandedHex = "";
17 for (char c : hexColor.toCharArray()) {
18 expandedHex += c + String.valueOf(c);
19 }
20 hexColor = expandedHex;
21 }
22
23 int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24 int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25 int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26
27 return new int[]{r, g, b};
28 }
29
30 // RGB മുതൽ CMYK പരിവർത്തനം
31 public static double[] rgbToCmyk(int r, int g, int b) {
32 // RGB മൂല്യങ്ങൾ സാധാരണീകരിക്കുക
33 double normalizedR = r / 255.0;
34 double normalizedG = g / 255.0;
35 double normalizedB = b / 255.0;
36
37 // K (കറുപ്പ്) കണക്കാക്കുക
38 double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39
40 // പൂർണ്ണ കറുപ്പ് കൈകാര്യം ചെയ്യുക
41 if (k == 1) {
42 return new double[]{0, 0, 0, 100};
43 }
44
45 // C, M, Y കണക്കാക്കുക
46 double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47 double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48 double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49
50 return new double[]{
51 Math.round(c),
52 Math.round(m),
53 Math.round(y),
54 Math.round(k * 100)
55 };
56 }
57
58 public static void main(String[] args) {
59 // ഉപയോഗ ഉദാഹരണം
60 int r = 75, g = 0, b = 130; // ധൂമ്യം
61 String hexColor = rgbToHex(r, g, b);
62 double[] cmyk = rgbToCmyk(r, g, b);
63
64 System.out.println("Hex: " + hexColor);
65 System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n",
66 cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67 }
68}
69സന്ദർഭങ്ങളും കൂടുതൽ വായനയ്ക്കുള്ള വിവരങ്ങളും
- W3C CSS നിറ മൊഡ്യൂൾ തലം 4 - ഔദ്യോഗിക വെബ് നിറ നിർവ്വചനം
- WCAG 2.1 കോൺട്രാസ്റ്റ് മാർഗ്ഗനിർദ്ദേശങ്ങൾ - നിറ കോൺട്രാസ്റ്റിനുള്ള ആക്സസിബിലിറ്റി മാനദണ്ഡങ്ങൾ
- WebAIM കോൺട്രാസ്റ്റ് പരിശോധകൻ - നിറ കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾ പരിശോധിക്കുക
- ICC നിറ പ്രൊഫൈൽ മാനദണ്ഡങ്ങൾ - നിറ പരിവർത്തനങ്ങൾക്കുള്ള സാങ്കേതിക നിർവ്വചനം
- MDN വെബ് ഡോക്സ്: CSS നിറ മൂല്യങ്ങൾ - വെബ് നിറ ഫോർമാറ്റുകളുടെ വിശദമായ മാർഗ്ഗനിർദ്ദേശം