CalcOpenly
हिन्दी

रंग पैलेट जनरेटर (पूरक, त्रिक, अनुरूप)

एक मूल रंग से पूरक, अनुरूप, त्रिक, विभाजित-पूरक, चतुष्क या एकरंगी पैलेट बनाएँ, HEX कोड सहित।

AI लेखन टूल से मसौदा तैयारअपडेट किया गया जाँचे गए उदाहरण: 6

#RRGGBB, CSS नाम, rgb(), hsl() या oklch()।
आज़माएँ
पैलेट
#2E86C1, #C12E86, #86C12E
पैलेट: #2E86C1, #C12E86, #86C12E
रंगतें
204.1°, 324.1°, 84.1°
रंग
3

#2E86C1 से त्रिक पैलेट: #2E86C1, #C12E86, #86C12E। HSL चक्र पर रंगतें 204.1°, 324.1°, 84.1° हैं; संतृप्ति और हल्कापन समान रहते हैं।

त्रिक पैलेट

#2E86C1
मूल
#C12E86
+120°
#86C12E
+240°

रंगत चक्र पर स्थान

#2E86C1#C12E86#86C12E
गणना कैसे होती है S

  1. HSL में मूल रंग

    #2E86C1=hsl(204.1, 61.5%, 46.9%)\text{\#2E86C1} = \text{hsl(204.1, 61.5\%, 46.9\%)}

  2. त्रिक समूह बनाएँ

    हर रंग में मूल संतृप्ति 61.5% और हल्कापन 46.9% रहता है; रंगत +120°, +240° घूमती है।

  3. वापस HEX में बदलें

    Base: hsl(204.1, 61.5%, 46.9%) → #2E86C1; +120°: hsl(324.1, 61.5%, 46.9%) → #C12E86; +240°: hsl(84.1, 61.5%, 46.9%) → #86C12E

    चैनल पूर्ण 8-बिट मानों में, आधे को ऊपर गोल करके बदले जाते हैं।

रंग पैलेट जनरेटर (पूरक, त्रिक, अनुरूप) के बारे में

हर रंग योजना मूल रंग की संतृप्ति और हल्कापन रखते हुए HSL चक्र पर रंगत को तय कोण से घुमाती है: पूरक में 180°, अनुरूप में ±30°, त्रिक में 120° और 240°, विभाजित-पूरक में 180° ± 30° और वर्गाकार चतुष्क में 90° के चरण। एकरंगी योजना में मूल रंग को समान चरणों में काले से मिलाकर गहरे और सफ़ेद से मिलाकर हल्के रूप बनाए जाते हैं।

ब्रांड, आरेख या इंटरफ़ेस के लिए उभरते रंग चुनने में यह उपयोगी है। डिफ़ॉल्ट #2E86C1 की रंगत 204.1° है; त्रिक रंग #2E86C1, #C12E86 और #86C12E हैं। इसका पूरक #C1692E, 24.1° पर है।

समान HSL हल्कापन का अर्थ आँख को समान चमक दिखना नहीं है। इस त्रिक में #86C12E की सापेक्ष प्रदीप्ति 0.434 और #C12E86 की 0.150 है। उपयोग से पहले पाठ और पृष्ठभूमि के युग्म कॉन्ट्रास्ट जाँचक से जाँचें।

किसी रंग की छाया और हल्का रूप बनाएँ

RGB चैनल c को काले की ओर मिलाने पर c × (1 − t) और सफ़ेद की ओर c + t × (255 − c) है। चार चरण हर ओर चुनने पर t = 1/5, 2/5, 3/5 और 4/5 हैं। बीच का मूल रंग जोड़कर 9 रंग मिलते हैं; शुद्ध काला और सफ़ेद अंतिम छोर इस सेट में नहीं जोड़े जाते।

CSS green = #008000 है। चौथी गहरी छाया में हरा चैनल 128/5 = 25.6, पूर्णांक पर 26 = 1A, इसलिए #001A00 है। चौथे हल्के रूप में लाल/नीला 204 = CC और हरा 229.6 → 230 = E6 है।

हरे की नौ-रंग सीढ़ी

स्थानHEX
छाया 4#001A00
छाया 3#003300
छाया 2#004D00
छाया 1#006600
मूल रंग#008000
हल्का रूप 1#339933
हल्का रूप 2#66B366
हल्का रूप 3#99CC99
हल्का रूप 4#CCE6CC

चैनल निकटतम पूर्ण 8-बिट मान पर, आधे पर ऊपर, गोल होते हैं। lime #00FF00 से दूसरी सीढ़ी बनेगी; green और lime एक ही CSS रंग नहीं हैं।

Harmony में hue का कोण बदलता है

इस उपकरण के HSL wheel पर पूरक रंग 180° दूर है; त्रिक में 120° और 240° जोड़े जाते हैं। चौकोर tetradic सेट 90° के अंतर पर है। आसन्न और split योजनाएँ चुने spread का उपयोग करती हैं; नीचे spread 30° है। Saturation और lightness मूल मान पर रहती हैं।

योजना का कोडपैलेट
complementary#008000, #800080
analogous#408000, #008000, #008040
triadic#008000, #000080, #800000
split#008000, #400080, #800040
tetradic#008000, #004080, #800080, #804000

यहाँ complementary पूरक, analogous आसन्न, triadic त्रिक और tetradic चार रंगों का वर्ग है। Green का hue 120° और पूरक purple का 300° है। ये CSS Color 4 के HSL पर आधारित कोण हैं; चित्रकारी के pigment wheel का green/red पूरक अलग अवधारणा है।

सुंदर पैलेट और पढ़ने योग्य पाठ अलग जाँचें

सफ़ेद पर #008000 लगभग 5.13:1 है, लेकिन पहला हल्का #339933 लगभग 3.65:1 है। इसलिए वह सामान्य पाठ के AA स्तर तक नहीं पहुँचता। आगे के हल्के रंगों को body text में इस्तेमाल करने से पहले वास्तविक पृष्ठभूमि पर कॉन्ट्रास्ट चेकर चलाएँ।

यह मिश्रण sRGB चैनलों में समान कदम लेता है; आँख को lightness के अंतर बराबर लगना जरूरी नहीं। Gray की saturation शून्य है, इसलिए hue घुमाने पर triad में वही gray दोहराता है।

मूल रंग CSS नाम, HEX, rgb(), hsl() या oklch() में दें। Alpha अनदेखा होता है। एक ओर 1–10 चरण चुने जा सकते हैं; कोड बदलने के लिए रंग कन्वर्टर देखें।

हल किए गए उदाहरण

लाल का पूरक

मूल रंग
#FF0000
रंग योजना
पूरक (विपरीत रंगत)
पैलेट
#FF0000, #00FFFF
रंग
2

जाँच का स्रोत: स्वतंत्र गणना

लाल से त्रिक

मूल रंग
लाल
रंग योजना
त्रिक (3 रंगतें, 120° अंतर)
पैलेट
#FF0000, #00FF00, #0000FF
रंगतें
0°, 120°, 240°

जाँच का स्रोत: स्वतंत्र गणना

#2E86C1 से अनुरूप रंग

मूल रंग
#2E86C1
रंग योजना
अनुरूप (पास की रंगतें)
फैलाव
30 °
पैलेट
#2EC1B3, #2E86C1, #2E3DC1

जाँच का स्रोत: स्वतंत्र गणना

लाल से वर्गाकार चतुष्क

मूल रंग
#FF0000
रंग योजना
वर्गाकार चतुष्क (4 रंगतें, 90° अंतर)
पैलेट
#FF0000, #80FF00, #00FFFF, #8000FF

जाँच का स्रोत: स्वतंत्र गणना

सवाल

किसी हेक्स कोड का पूरक रंग कैसे निकालें?

रंग को HSL में बदलें, रंगत में 180° जोड़ें और वही संतृप्ति व हल्कापन रखते हुए वापस बदलें। #2E86C1 की रंगत 204.1° है; पूरक 24.1° यानी #C1692E है। इस RGB चक्र पर लाल #FF0000 का पूरक सियान #00FFFF है। चित्रकारों के लाल-पीले-नीले चक्र पर लाल का पूरक हरा होता है, इसलिए उपकरणों के परिणाम अलग हो सकते हैं।

त्रिक और विभाजित-पूरक रंगों में क्या अंतर है?

त्रिक योजना में तीन रंगतें 120° के बराबर अंतर पर होती हैं। विभाजित-पूरक में मूल रंग के साथ उसके पूरक के दोनों ओर की रंगतें ली जाती हैं: 30° फैलाव पर मूल से 150° और 210°। #2E86C1 के त्रिक साथी #C12E86 और #86C12E हैं; विभाजित-पूरक साथी #C12E3D और #C1B32E हैं। यह अनुरूप योजना से अधिक फैला हुआ रंग समूह है।

टिंट, शेड और टोन में क्या अंतर है?

सफ़ेद मिलाने से टिंट, काला मिलाने से शेड और धूसर मिलाने से टोन बनता है। यह उपकरण समान चरणों में टिंट और शेड बनाता है। दो-दो चरणों पर #808080 के शेड #2B2B2B और #555555, तथा टिंट #AAAAAA और #D5D5D5 हैं। मिश्रण sRGB के हर चैनल में होता है; हर चरण तीनों चैनलों को एक ही अनुपात से बदलता है।

पैलेट के रंग समान चमकीले क्यों नहीं दिखते?

HSL हल्कापन RGB चैनलों का सूत्र है, दृश्य चमक का माप नहीं। आँख हरे के प्रति नीले से अधिक संवेदनशील है। #2E86C1 से बने त्रिक का HSL हल्कापन समान है, पर सापेक्ष प्रदीप्तियाँ 0.215, 0.150 और 0.434 हैं। अधिक समान दिखने वाले चरणों के लिए OKLCH में हल्कापन तय करें, जिसे CSS Color Level 4 समर्थन देता है।

क्या पैलेट के रंग पाठ में उपयोग कर सकते हैं?

पहले कॉन्ट्रास्ट जाँचें। WCAG 2.2 AA में सामान्य पाठ और पृष्ठभूमि के बीच कम-से-कम 4.5:1 तथा बड़े पाठ और आवश्यक इंटरफ़ेस भागों में 3:1 चाहिए। सफ़ेद पर #C12E86 का 5.25:1 सफल, #2E86C1 का 3.97:1 केवल बड़े पाठ के लिए पर्याप्त, और #86C12E का 2.17:1 असफल है। अंतिम रंग सफ़ेद पर सामान्य या बड़े पाठ के लिए पर्याप्त नहीं है; आवश्यक सीमाओं और ग्राफ़िक्स का गैर-पाठ कॉन्ट्रास्ट भी जाँचें।

इस कैलकुलेटर के बारे में

Hk=(H0+Δk) mod 360∘Sk=S0,Lk=L0C+(t)=C+t (1−C)C−(t)=C (1−t)\begin{aligned} H_k &= (H_0 + \Delta_k) \bmod 360^\circ \\ S_k &= S_0,\quad L_k = L_0 \\ C_{+}(t) &= C + t\,(1 - C) \\ C_{-}(t) &= C\,(1 - t) \end{aligned}

स्रोत

  1. W3C CSS Color Module Level 4 §7 — HSL and the hslToRgb / rgbToHsl algorithms
  2. Johannes Itten, The Art of Color (1961) — color contrasts and harmonic chords

संदर्भों से जाँच की गई

इस कैलकुलेटर में स्वतंत्र स्रोतों के उत्तरों वाले 6 हल किए गए उदाहरण शामिल हैं। ये परीक्षण समूह में चलते हैं और आप इन्हें यहाँ भी चला सकते हैं।

यह कैलकुलेटर अपनी वेबसाइट पर लगाएँ

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

ऊँचाई
एम्बेड का पूर्वावलोकन देखें

श्रेय पंक्ति बनी रहने दें। यही एकमात्र शर्त है, और इसी से ये कैलकुलेटर मुफ़्त रहते हैं।

संबंधित कैलकुलेटर