रंग पॅलेट जनरेटर - सुसंगत रंग योजना तयार करा

रंग पॅलेट जनरेटर म्हणजे काय?

रंग पॅलेट जनरेटर हे एका सुरुवातीच्या रंगापासून, ज्याला प्राथमिक रंग म्हणतात, परस्पर जुळणाऱ्या रंगांचा संच तयार करणारे साधन आहे. हे रंग पॅलेट जनरेटर प्राथमिक रंग आणि सामंजस्याचा प्रकार घेते, त्यानंतर रंगसिद्धांताच्या नियमांनुसार पॅलेटमधील उर्वरित रंगांची गणना करते. हे चार सामंजस्य प्रकार समर्थित करते: पूरक, समानधर्मी, त्रिक आणि एकरंगी.

हे साधन पॅलेट कसे तयार करते

हे साधन प्राथमिक रंगाचे हेक्स कोडमधून (जसे की #3B82F6) HSL रंग प्रतिमानात रूपांतर करते. HSL रंगाचे वर्णन तीन संख्यांनी करते:

• छटा: ३६० अंशांच्या रंगचक्रावरील रंगाचे स्थान (०° लाल, १२०° हिरवा, २४०° निळा).
• संतृप्तता: रंगाची तीव्रता, ०% (करडा) ते १००% (शुद्ध रंग).
• प्रकाशमानता: रंग काळ्या किंवा पांढऱ्या रंगाच्या किती जवळ आहे, ०% (काळा) ते १००% (पांढरा).

प्रत्येक सामंजस्य प्रकारात छटा, प्रकाशमानता किंवा दोन्ही बदलले जातात आणि परिणाम पुन्हा हेक्स कोडमध्ये रूपांतरित केला जातो.

पूरक रंगांची गणना कशी करावी

सूत्र:

$h' = (h + 180) \bmod 360$

येथे h ही प्राथमिक रंगाची अंशांमधील छटा आणि h′ ही नवीन छटा आहे. पूर्ण फेरीपलीकडील परिणाम पुन्हा रंगचक्रावर आणण्यासाठी mod पायरी वापरली जाते.

संतृप्तता आणि प्रकाशमानता समान राहतात.

सोडवलेले उदाहरण: शुद्ध निळा, #0000FF, याची छटा २४०°, संतृप्तता १००% आणि प्रकाशमानता ५०% आहे. १८०° जोडल्यास छटा ६०° मिळते. त्याच संतृप्तता आणि प्रकाशमानतेवर छटा ६०° पुन्हा हेक्समध्ये रूपांतरित केल्यास #FFFF00, म्हणजे पिवळा, मिळतो. म्हणून हे साधन निळ्याची जोडी नारंगीशी नव्हे, तर पिवळ्याशी लावते.

हे गोंधळात टाकणारे ठरू शकते, कारण कलावर्गांमध्ये अनेकदा वेगळे रंगचक्र शिकवले जाते—RYB (लाल-पिवळा-निळा) रंगद्रव्य रंगचक्र, ज्यात निळ्याचा विरुद्ध रंग नारंगी असतो. हे साधन पडद्यांमध्ये वापरल्या जाणाऱ्या RGB-आधारित HSL रंगचक्रावर कार्य करते, त्यामुळे त्याच्या पूरक रंगांच्या जोड्या रंगमिश्रणाच्या चक्रापेक्षा वेगळ्या असतात.

समानधर्मी रंगांची गणना कशी करावी

समानधर्मी रंग रंगचक्रावर प्राथमिक रंगाच्या जवळ असतात. हे साधन प्राथमिक छटेपासून ३०° अंतरावर दोन छटा आणि ६०° अंतरावर आणखी दोन छटा तयार करते; सर्वांची संतृप्तता आणि प्रकाशमानता समान असते.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

येथे h ही प्राथमिक रंगाची छटा आहे.

सोडवलेले उदाहरण: निळा, #0000FF (छटा २४०°), २७०° छटा (#8000FF), २१०° छटा (#0080FF), ३००° छटा (#FF00FF) आणि १८०° छटा (#00FFFF) तयार करतो. प्राथमिक रंगासह पॅलेटमध्ये पाच रंग असतात.

त्रिक रंगांची गणना कशी करावी

त्रिक रंग रंगचक्रावर १२०° अंतरावर असतात आणि प्राथमिक रंगासह समान अंतरावर असलेला त्रिकूट तयार करतात.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

सोडवलेले उदाहरण: लाल, #FF0000 (छटा ०°), १२०° छटा (#00FF00, हिरवा) आणि २४०° छटा (#0000FF, निळा) तयार करतो. तीन रंगांचा संच लाल, हिरवा आणि निळा असा असतो; डिजिटल पडद्यांवरील प्राथमिक रंग म्हणून वापरल्या जाणाऱ्या याच तीन छटा आहेत.

एकरंगी रंगांची गणना कशी करावी

एकरंगी रंग समान छटा आणि संतृप्तता ठेवतात आणि केवळ प्रकाशमानता बदलतात. हे साधन प्रत्येक दिशेने प्रकाशमानता १५ आणि ३० टक्केवारी-बिंदूंनी बदलते; ती ५% ते ९५% यांच्या मर्यादेत ठेवली जाते.

$l \pm 15, \qquad l \pm 30$

येथे l ही प्राथमिक रंगाची प्रकाशमानता, टक्केवारी-बिंदूंमध्ये, आहे.

सोडवलेले उदाहरण: निळा, #0000FF (प्रकाशमानता ५०%), प्रकाशमानता ६५% (#4D4DFF), ३५% (#0000B3), ८०% (#9999FF) आणि २०% (#000066) तयार करतो.

५% आणि ९५% यांच्या मर्यादांमुळे आधीच अतिशय फिकट किंवा गडद असलेला प्राथमिक रंग एकाच मर्यादेला दोनदा पोहोचू शकतो. काळा, #000000, प्रकाशमानता १५% (#262626), ५% (#0D0D0D), ३०% (#4D4D4D) आणि पुन्हा ५% (#0D0D0D) देतो, त्यामुळे एक रंग पुन्हा येतो.

हे साधन वापरणे

1. रंग निवडकाद्वारे प्राथमिक रंग निवडा किंवा #3B82F6 सारखा हेक्स कोड टाइप करा.
2. सामंजस्याचा प्रकार निवडा: पूरक, समानधर्मी, त्रिक किंवा एकरंगी.
3. तयार झालेले पॅलेट वाचा. प्रत्येक रंगनमुना एका बटणावर त्याचा हेक्स कोड दाखवतो.
4. हेक्स कोड कॉपी करण्यासाठी त्या बटणावर क्लिक करा किंवा संपूर्ण पॅलेट एकाच वेळी कॉपी करण्यासाठी "सर्व रंग कॉपी करा" वापरा.

प्रवेशयोग्यतेसाठी कॉन्ट्रास्ट तपासणे

प्रत्येक रंगनमुन्यावर दोन लहान बॅज असतात: एक पांढऱ्याविरुद्धच्या कॉन्ट्रास्टसाठी आणि एक काळ्याविरुद्धच्या कॉन्ट्रास्टसाठी. हे साधन WCAG (वेब आशय प्रवेशयोग्यता मार्गदर्शक तत्त्वे) सूत्र वापरून कॉन्ट्रास्ट गुणोत्तराची गणना करते:

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

येथे C हे कॉन्ट्रास्ट गुणोत्तर आहे.

L1 ही फिकट रंगाची सापेक्ष प्रकाशमानता आणि L2 ही गडद रंगाची सापेक्ष प्रकाशमानता आहे. प्रकाशमानता रंगाच्या लाल, हिरव्या आणि निळ्या मूल्यांवरून मिळते. गुणोत्तर ४.५ किंवा त्याहून अधिक असल्यास बॅजवर "AA" दिसते; सामान्य आकाराच्या मजकुरासाठी हे WCAG किमान मूल्य आहे. गुणोत्तर ४.५ पेक्षा कमी असल्यास "!" दिसते. बॅजवर कर्सर नेल्यास अचूक गुणोत्तर दिसते. पांढऱ्या पार्श्वभूमीवरील काळ्या मजकुराचे गुणोत्तर २१ असते, जे कमाल शक्य मूल्य आहे.

प्रत्येक रंगनमुन्यावरील कॉपी बटणाचा रंग निवडण्यासाठी हे साधन तेच कॉन्ट्रास्ट नियम वापरते. ते रंगनमुन्याच्या रंगाची काळ्या आणि पांढऱ्या रंगाशी तुलना करते आणि यांपैकी जो अधिक स्पष्ट दिसतो तो ठेवते. सापेक्ष प्रकाशमानता सुमारे ०.१७९ असताना हा बदल होतो; त्या बिंदूवर दोन्ही गुणोत्तरे समान असतात.

वारंवार विचारले जाणारे प्रश्न

रंग पॅलेट जनरेटर म्हणजे काय? हे एका प्राथमिक रंगापासून आणि निवडलेल्या सामंजस्य नियमापासून परस्पर जुळणाऱ्या रंगांचा संच तयार करणारे साधन आहे.

पूरक रंगांसाठी हे साधन निळ्याची जोडी नारंगीऐवजी पिवळ्याशी का लावते? हे साधन HSL रंगचक्रावर छटा १८०° ने फिरवते. हे चक्र पडद्यांवर लाल, हिरवा आणि निळा प्रकाश कसा मिसळला जातो यावर आधारित आहे. कलावर्गात शिकवले जाणारे लाल-पिवळा-निळा रंगचक्र वेगळ्या पूरक जोड्या तयार करते, कारण त्यात प्रकाशाऐवजी रंगद्रव्ये मिसळली जातात.

प्रत्येक सामंजस्य प्रकारातून किती रंग तयार होतात? पूरक प्रकारात एकूण २ रंग तयार होतात (प्राथमिक रंगासह). त्रिक प्रकारात ३. समानधर्मी प्रकारात ५. एकरंगी प्रकारात ५.

हे साधन अंतर्गत कोणते रंग प्रतिमान वापरते? HSL (छटा, संतृप्तता, प्रकाशमानता). हे इनपुट हेक्स कोडचे HSL मध्ये रूपांतर करते, गणना करते आणि नंतर परिणाम पुन्हा हेक्समध्ये रूपांतरित करते.

हे साधन रंग प्रवेशयोग्य आहेत का ते तपासते का? होय. प्रत्येक रंगनमुना पांढऱ्या आणि काळ्या रंगाविरुद्ध सामान्य मजकुरासाठीच्या WCAG AA मानकात उत्तीर्ण होण्यासाठी पुरेसा कॉन्ट्रास्ट आहे का ते दाखवतो; यासाठी किमान ४.५ गुणोत्तर आवश्यक आहे.

प्रकल्पासाठी एकापेक्षा अधिक सामंजस्य प्रकार वापरता येतात का? होय. अनेक डिझाइनमध्ये सामंजस्य प्रकार एकत्र वापरले जातात; उदाहरणार्थ, मुख्य रंगांसाठी समानधर्मी संच आणि बटण किंवा उठावासाठी एक पूरक रंग.

रंगांचे स्वरूप

हे साधन तयार केलेला प्रत्येक रंग # चिन्हाने सुरू होणाऱ्या सहा अंकी हेक्स कोडच्या स्वरूपात लिहिते (उदाहरणार्थ, लाल रंगासाठी #ff0000). हेक्स कोड लाल, हिरव्या आणि निळ्या मूल्यांशी थेट जोडलेले असतात; प्रत्येक मूल्य ० ते २५५ दरम्यान असते. प्राथमिक रंग ज्या स्वरूपात प्रविष्ट केला होता त्याच स्वरूपात दाखवला जातो, त्यामुळे #F00 सारखा तीन अंकी संक्षिप्त कोड लघुरूपातच राहतो. तीन अंकी कोडचा अर्थ सहा अंकी कोडसारखाच असतो: प्रत्येक अंक दुप्पट केला जातो, त्यामुळे #F00 म्हणजे #FF0000. लाल, हिरवा आणि निळा यांच्या प्रमाणांऐवजी छटा, संतृप्तता आणि प्रकाशमानता वापरून त्याच रंगांचे वर्णन करण्याचा HSL हा पर्यायी मार्ग आहे.