DevToys Web Pro iconDevToys Web Proബ്ലോഗ്
ഞങ്ങളെ റേറ്റ് ചെയ്യുക:
ബ്രൗസർ എക്സ്റ്റൻഷൻ പരീക്ഷിക്കുക:

നിറ ഹാർമണികൾ ജനറേറ്റർ

  • അടിസ്ഥാനം
    സ്കീം
    Base + opposite (180°)
    #3B82F6base
    rgb(59, 130, 246)
    hsl(217, 91%, 60%)
    #F6AF3Ccomplement (180°)
    rgb(246, 175, 60)
    hsl(37, 91%, 60%)
    സാങ്കേതിക വിശദാംശങ്ങൾ

    കളർ ഹാർമണീസ് ജനറേറ്റർ എങ്ങനെ പ്രവർത്തിക്കുന്നു

    ഉപകരണം ചെയ്യുന്നത് എന്താണ്

    കളർ ഹാർമണീസ് ജനറേറ്റർ ഒരു ഒറ്റ ബേസ് ഹ്യൂയിൽ നിന്ന് ഗണിതപരമായി ബന്ധപ്പെട്ട നിറസെറ്റുകൾ കണക്കാക്കുന്നു: complementary, analogous, triadic, tetradic, square, split-complementary, monochromatic, കൂടാതെ shades. ഓരോ പാലറ്റും HEX, RGB, HSL മൂല്യങ്ങളോടെ റെൻഡർ ചെയ്യപ്പെടുന്നു; നിങ്ങൾക്ക് ഒരു ക്ലിക്കിൽ അവ കോപ്പി ചെയ്ത് CSS-ലോ ഡിസൈൻ ടോക്കണുകളിലോ നേരിട്ട് ഉപയോഗിക്കാം.

    ഡെവലപ്പർമാർക്കുള്ള സാധാരണ ഉപയോഗ സാഹചര്യങ്ങൾ

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

    ഡാറ്റ ഫോർമാറ്റുകൾ, തരങ്ങൾ, അല്ലെങ്കിൽ വകഭേദങ്ങൾ

    എട്ട് സ്കീമുകൾ ലഭ്യമാണ്: Complementary (base + 180°), Analogous (base ± 30°), Triadic (3 colors 120° apart), Tetradic (rectangular 4-color), Square (4 colors 90° apart), Split-complementary (base + ±150°), Monochromatic (same hue at varying lightness 10–90%), കൂടാതെ Shades (same hue, dark to light). ഓരോ നിറത്തിനും ഒരു റോൾ ലേബലിനൊപ്പം അതിന്റെ HEX, RGB, HSL പ്രതിനിധാനങ്ങളും ഉൾപ്പെടുന്നു.

    സാധാരണ പിഴവുകളും എഡ്ജ് കേസുകളും

    അത്യന്തം ഡീസാചുറേറ്റഡ് അല്ലെങ്കിൽ ഗ്രേസ്‌കെയിലിനോട് അടുത്ത ബേസ് നിറങ്ങളിൽ നിന്ന് ലഭിക്കുന്ന ഹാർമണികൾ സ്കീമുകൾക്കിടയിൽ വേർതിരിച്ച് തിരിച്ചറിയാൻ കഴിയാത്തവിധം തോന്നാം — സാചുറേറ്റഡ് ബേസിൽ നിന്ന് ആരംഭിക്കുക. triadic അല്ലെങ്കിൽ tetradic സ്കീമുകളുമായി ചേർന്ന അതിയായി സാചുറേറ്റഡ് ബേസുകൾ ശബ്ദമുള്ളതും ബാലൻസ് ചെയ്യാൻ ബുദ്ധിമുട്ടുള്ളതുമായ പാലറ്റുകൾ സൃഷ്ടിക്കാം; UI ഉപയോഗത്തിനായി സാചുറേഷൻ കുറയ്ക്കുന്നത് പരിഗണിക്കുക. ഹാർമണികളിൽ നിന്ന് ലഭിക്കുന്ന ചില ജോഡികൾ WCAG കോൺട്രാസ്റ്റ് പാസാകാതിരിക്കാം — ഷിപ്പ് ചെയ്യുന്നതിന് മുമ്പ് Color Contrast ടൂളിൽ ടെക്സ്റ്റ്/ബാക്ക്ഗ്രൗണ്ട് ജോഡികൾ എപ്പോഴും പരിശോധിക്കുക.

    കോഡിനേക്കാൾ ഈ ഉപകരണം എപ്പോൾ ഉപയോഗിക്കണം

    ഐഡിയേഷൻ, വേഗത്തിലുള്ള എക്സ്പ്ലോറേഷൻ, ഡിസൈൻ റിവ്യൂ എന്നിവയ്ക്കായി ബ്രൗസർ ടൂൾ ഉപയോഗിക്കുക. കോഡിൽ, chroma.js, colord, അല്ലെങ്കിൽ culori പോലുള്ള ലൈബ്രറികൾ ഹാർമണികൾ പ്രോഗ്രാമാറ്റിക്കായി കണക്കാക്കാനും, അവയെ ഡിസൈൻ-ടോക്കൺ ബിൽഡ് പൈപ്പ്‌ലൈനുകളിലേക്ക് ഇന്റഗ്രേറ്റ് ചെയ്യാനും, കൂടുതൽ ഒരേപോലെ തോന്നുന്ന പാലറ്റുകൾക്കായി Oklch പോലുള്ള പെർസെപ്ഷ്വലി യൂണിഫോം കളർ സ്പേസുകളുമായി ഹാർമണി ഗണിതം സംയോജിപ്പിക്കാനും അനുവദിക്കുന്നു.