कलर हार्मनी: पूरक, अनुरूप, त्रिकोणीय और दूसरी रंग योजनाएँ

कलर हार्मनी कलर व्हील पर तय कोणों पर ह्यू चुनती है: पूरक के लिए 180° दूर, अनुरूप के लिए 30° दूर, त्रिकोणीय के लिए 120° दूर। ह्यू को HSL की जगह OKLCH में घुमाइए, तो सभी रंग एक जितने हल्के रहते हैं और कोई एक ह्यू अनजाने में उभरकर नहीं दिखता।

अपडेट: 28 सितंबर 2026पढ़ने में 6 मिनट

कलर हार्मनी क्या है

हार्मनी उन रंगों को चुनने का नियम है जो साथ में अच्छे लगते हैं। आप एक बेस रंग लेते हैं, उसकी लाइटनेस और चटकपन वैसा ही रखते हैं, और कलर व्हील पर सिर्फ़ ह्यू को तय कोणों से घुमाते हैं।

कोण चुनना आसान हिस्सा है। आप कौन-सा व्हील घुमा रहे हैं, यह भी उतना ही मायने रखता है, क्योंकि एक ही कोण पर क्लासिक HSL व्हील और OKLCH जैसा परसेप्चुअल व्हील साफ़ तौर पर अलग नतीजे देते हैं। नीचे के सभी उदाहरण #2a7fbf से शुरू होते हैं, जो एक मध्यम नीला है।

उदाहरण: #2a7fbf

फ़ॉर्मैट	वैल्यू
HEX
HSL
OKLCH

पूरक, विभाजित पूरक, अनुरूप, त्रिकोणीय, चतुष्कोणीय, वर्गाकार

हर पंक्ति बेस रंग की OKLCH लाइटनेस 0.577 और क्रोमा 0.127 को वैसा ही रखती है। सिर्फ़ ह्यू बताए गए कोणों से घूमता है। जब घुमाया गया रंग sRGB से बाहर चला जाता है, तो उसे फ़िट करने के लिए क्रोमा थोड़ा घटाया जाता है, इसीलिए कुछ रंग थोड़े कम चटक हैं। एकरंगी अपवाद है: इसमें ह्यू वही रहता है और लाइटनेस 0.12 के कदमों में बदलती है।

हार्मनी	ह्यू के कोण	रंग 2	रंग 3	रंग 4	रंग 5
पूरक	0°, 180°	#ab6708
विभाजित पूरक	0°, 150°, 210°	#b85a42	#907800
अनुरूप (पड़ोसी)	0°, −30°, +30°	#008aa7	#6571c3
त्रिकोणीय	0°, 120°, 240°	#b6566e	#678626
चतुष्कोणीय (आयत)	0°, 60°, 180°, 240°	#8c64b4	#ab6708	#678626
वर्गाकार	0°, 90°, 180°, 270°	#a75a96	#ab6708	#258f58
एकरंगी	वही ह्यू, L ±0.12, ±0.24	#00396f	#005b98	#53a4e7	#7dcbff

पूरक: सबसे ज़्यादा टकराव। दूसरे रंग को सिर्फ़ छोटे एक्सेंट के लिए इस्तेमाल कीजिए, जैसे कॉल-टू-एक्शन बटन।
विभाजित पूरक: पूरक जैसी ही ऊर्जा, पर संतुलन बनाना आसान, क्योंकि एक्सेंट सामने वाले ह्यू के दो पड़ोसियों में बँट जाता है।
अनुरूप: शांत और एकसार। इलस्ट्रेशन और बैकग्राउंड के लिए अच्छा, पर तब कमज़ोर जब किसी एक चीज़ को अलग दिखाना हो।
त्रिकोणीय, चतुष्कोणीय और वर्गाकार: जीवंत, पर सँभालना मुश्किल। एक रंग को मुख्य रखिए और बाकी को छोटा।
एकरंगी: एक ही ह्यू, लाइटनेस के कई कदमों में। इंटरफ़ेस के लिए सबसे सुरक्षित विकल्प, क्योंकि कंट्रास्ट वैसे भी लाइटनेस से ही आता है।

HSL कलर व्हील असंतुलित हार्मनी क्यों देता है

डिज़ाइन टूल्स के ज़्यादातर कलर व्हील HSL पर चलते हैं: वे ह्यू घुमाते हैं और HSL के सैचुरेशन और लाइटनेस के अंक वैसे ही रखते हैं। लेकिन HSL लाइटनेस एक फ़ॉर्मूला है, आँख जो देखती है वह नहीं। सुनहरे पीले को HSL में 180° घुमाइए, तो गहरा नीला मिलता है जो पीले से कहीं ज़्यादा गहरा दिखता है।

OKLCH में घुमाने पर दिखने वाली लाइटनेस बराबर रहती है। यहाँ #f4b400 को दोनों तरीकों से घुमाया गया है, साथ में हर नतीजे की OKLCH लाइटनेस है।

भूमिका	HSL में घुमाव	OKLCH L	OKLCH में घुमाव	OKLCH L
बेस	#f4b400	0.808	#f4b400	0.808
पूरक	#0040f4	0.489	#97c0ff	0.802
त्रिकोणीय, +120°	#00f4b4	0.857	#00dcec	0.817
त्रिकोणीय, +240°	#b400f4	0.586	#f299fe	0.808

HSL वाले सेट की लाइटनेस 0.489 से 0.857 तक फैली है, इसलिए नीला और बैंगनी दब जाते हैं और मिंट हरा चमकने लगता है। OKLCH वाला सेट 0.802 और 0.817 के बीच रहता है। शुद्ध RGB प्राइमरी रंगों के साथ भी यही होता है: #ff0000, #00ff00 और #0000ff एकदम सही HSL ट्रायड हैं, फिर भी उनकी OKLCH लाइटनेस 0.628, 0.866 और 0.452 है।

इसमें एक समझौता है। इस पीले जितना हल्का नीला sRGB स्क्रीन पर बहुत चटक नहीं हो सकता, इसलिए OKLCH पूरक रंग #97c0ff का क्रोमा 0.166 की जगह 0.10 है। आपको बराबर लाइटनेस और बराबर चटकपन में से एक चुनना होता है; पीले और नीले के साथ दोनों एक साथ नहीं मिल सकते।

चित्रकार का RYB व्हील बनाम स्क्रीन का RGB व्हील

आर्ट क्लास वाला व्हील RYB है: लाल, पीला और नीला प्राइमरी रंग, जैसे पेंट मिलाते समय। उस पर लाल का पूरक हरा है और नीले का पूरक नारंगी। स्क्रीन रोशनी मिलाती है, इसलिए डिजिटल टूल RGB व्हील इस्तेमाल करते हैं, जिसमें लाल का पूरक सियान है और नीले का पूरक पीला।

दोनों में से कोई गलत नहीं है, वे अलग सवालों के जवाब देते हैं। RYB चित्रकला की परंपरा पर चलता है, RGB और OKLCH इस पर कि स्क्रीन और आँखें कैसे काम करती हैं। अगर कोई डिज़ाइन टूल हरे की जगह सियान देता है, तो वह RGB व्हील इस्तेमाल कर रहा है।

बेस	RYB पूरक	RGB (HSL) पूरक	OKLCH पूरक
#ff0000	हरा	#00ffff	#009cb2
#0000ff	नारंगी	#ffff00	#734f00
#ffff00	बैंगनी	#0000ff	#f3f1ff

OKLCH वाला कॉलम दिखाता है कि बराबर लाइटनेस बहुत तीखे रंगों के साथ क्या करती है। शुद्ध नीले का पूरक उसी लाइटनेस 0.45 वाला गहरा गेरुआ बन जाता है, और शुद्ध पीले का पूरक 0.96 पर लगभग सफ़ेद लैवेंडर।

हार्मनी पर 60-30-10 नियम

हार्मनी बताती है कि कौन-से रंग इस्तेमाल करें, यह नहीं कि किसका कितना हिस्सा हो। 60-30-10 नियम यह कमी पूरी करता है: लगभग 60% हिस्सा मुख्य रंग को, 30% सहायक रंग को और 10% एक्सेंट को। बराबर हिस्से देने से अच्छी हार्मनी भी शोर भरी लगती है।

इंटरफ़ेस में 60% आम तौर पर बेस ह्यू की हल्की झलक वाला लगभग न्यूट्रल रंग होता है, 30% बेस रंग और 10% पूरक एक्सेंट। यहाँ #2a7fbf से बना, कॉपी करने लायक सेट है।

भूमिका	हिस्सा	रंग	OKLCH	कहाँ इस्तेमाल करें
मुख्य	60%	#eff6fd	L 0.97, C 0.012	पेज का बैकग्राउंड, कार्ड
सहायक	30%	#2a7fbf	L 0.577, C 0.127	हेडर, लिंक, चुनी हुई स्टेट
एक्सेंट	10%	#ab6708	L 0.577, C 0.127	मुख्य कॉल-टू-एक्शन, हाइलाइट
टेक्स्ट	लागू नहीं	#15232f	L 0.25, C 0.03	मुख्य रंग पर बॉडी टेक्स्ट

CSS

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

हार्मनी का कंट्रास्ट कैसे जाँचें

ह्यू का अंतर टेक्स्ट को पढ़ने लायक नहीं बनाता, लाइटनेस का अंतर बनाता है। ऊपर की पूरक जोड़ी ह्यू में जितनी दूर हो सकती है उतनी दूर है, फिर भी #2a7fbf पर #ab6708 का WCAG अनुपात 1.05:1 और APCA Lc 0 है: टेक्स्ट के रूप में लगभग अदृश्य।

बराबर लाइटनेस का एक फ़ायदा भी है। ऊपर की OKLCH हार्मनी के हर रंग पर सफ़ेद टेक्स्ट 4.04:1 और 4.62:1 के बीच आता है। उन्हीं हार्मनी के HSL वाले रूप पर यह 2.15:1 से 8.90:1 तक झूलता है। इसलिए पूरे OKLCH सेट के लिए एक ही सुधार काफ़ी है: लाइटनेस को 0.52 तक घटाइए, तो 0.127 क्रोमा पर किसी भी ह्यू पर सफ़ेद टेक्स्ट 4.5:1 पार कर लेता है, 5.00:1 से 5.91:1 तक।

टेक्स्ट	बैकग्राउंड	WCAG अनुपात	APCA Lc	नतीजा
#2a7fbf	#ab6708	1.05:1	0	पढ़ा नहीं जाता, लाइटनेस एक जैसी
#ffffff	#2a7fbf	4.30:1	-74.8	बॉडी टेक्स्ट के लिए AA में फ़ेल
#ffffff	#106ead	5.45:1	-82.0	पास, बेस L 0.52 पर
#ffffff	#995600	5.70:1	-83.3	पास, एक्सेंट L 0.52 पर
#ab6708	#eff6fd	4.12:1	64.9	सिर्फ़ बड़े टेक्स्ट और आइकन के लिए
#5c2d00	#d8eafb	9.42:1	82.5	पूरक जोड़ी, एक गहरा और एक हल्का

हार्मनी के दो रंगों को टेक्स्ट और बैकग्राउंड के रूप में साथ इस्तेमाल करना हो, तो उनकी लाइटनेस में दूरी बढ़ाइए: ह्यू वही रखिए और एक को 0.35 की ओर, दूसरे को 0.93 की ओर ले जाइए। फिर असली जोड़ी को कंट्रास्ट चेकर में जाँचिए, और अगर एक्सेंट से कोई मतलब जुड़ा है, तो पैलेट को कलर ब्लाइंडनेस सिम्युलेटर में भी देखिए।

सवाल और जवाब

कलर हार्मनी के मुख्य प्रकार कौन-से हैं?

आम हार्मनी हैं: पूरक (ह्यू 180° दूर), विभाजित पूरक (150° और 210°), अनुरूप (दोनों ओर 30°), त्रिकोणीय (120° की दूरी पर तीन ह्यू), चतुष्कोणीय या आयत (0°, 60°, 180°, 240°), वर्गाकार (90° की दूरी पर चार ह्यू) और एकरंगी (एक ही ह्यू, लाइटनेस के अलग-अलग कदमों में)।

लाल का पूरक रंग कौन-सा है?

यह कलर व्हील पर निर्भर करता है। चित्रकार के RYB व्हील पर लाल का पूरक हरा है। स्क्रीन और डिज़ाइन टूल्स के RGB व्हील पर यह सियान है, शुद्ध लाल के लिए #00ffff, और बराबर लाइटनेस वाले OKLCH में यह #009cb2 जैसा टील है।

मेरे पूरक रंग असंतुलित क्यों दिखते हैं?

ज़्यादातर टूल ह्यू को HSL में घुमाते हैं, जिसकी लाइटनेस आँख के अनुभव से मेल नहीं खाती। #f4b400 जैसे सुनहरे पीले का HSL पूरक #0040f4 है, जिसकी OKLCH लाइटनेस 0.489 है, जबकि पीले की 0.808। OKLCH में ह्यू घुमाने से दोनों रंग एक जितने हल्के रहते हैं।

क्या पूरक रंगों को टेक्स्ट और बैकग्राउंड के लिए इस्तेमाल कर सकते हैं?

सिर्फ़ तब, जब उनकी लाइटनेस में बड़ा अंतर हो। बराबर लाइटनेस वाले पूरक रंगों, जैसे #2a7fbf और #ab6708, का कंट्रास्ट अनुपात सिर्फ़ 1.05:1 है। एक को गहरा और दूसरे को हल्का कीजिए, जैसे #d8eafb पर #5c2d00, जिसका अनुपात 9.42:1 है।

60-30-10 कलर नियम क्या है?

60-30-10 नियम डिज़ाइन को लगभग 60% मुख्य रंग, 30% सहायक रंग और 10% एक्सेंट में बाँटता है। हार्मनी के साथ, मुख्य रंग आम तौर पर हल्की रंगत वाला न्यूट्रल होता है, सहायक रंग बेस रंग होता है और एक्सेंट पूरक या त्रिकोणीय रंग।