What are color harmonies?

Color harmonies are sets of colors related by a mathematical rule on the color wheel — complementary (180° apart), triadic (120° apart), tetradic, analogous, split-complementary, and so on. Designers use them to build palettes that feel intentional and balanced.

Which harmony should I pick?

Complementary and split-complementary work well for high-contrast accents (buttons, alerts). Analogous schemes are calm and natural-looking. Triadic and tetradic produce vibrant, varied palettes that need careful balancing. Monochromatic is great for content-heavy UIs.

Does this match the rotations in Adobe Color, Coolors, etc.?

Yes — the angles used here (30°, 90°, 120°, 150°, 180°, 270°) match the standard color theory definitions you'll find in design tools and textbooks.

रंग सुसंगती जनरेटर

मूळ

योजना

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 सारख्या लायब्ररी तुम्हाला हार्मोनीज प्रोग्रामॅटिकली काढण्यास, त्यांना design-token बिल्ड पाइपलाइन्समध्ये एकत्रित करण्यास, आणि अधिक समसमान दिसणाऱ्या पॅलेट्ससाठी Oklch सारख्या perceptually uniform कलर स्पेसेससोबत हार्मोनी मॅथ एकत्र करण्यास मदत करतात.