अपने डिज़ाइन के लिए रंग पैलेट कैसे उत्पन्न करें
रंग वेबसाइट, ऐप या डिज़ाइन में पहली चीज़ों में से एक है जिसे लोग देखते हैं। एक अच्छी तरह चुनी गई पैलेट एक सुसंगत, पेशेवर लुक बनाती है। एक खराब चुनी गई अच्छी सामग्री को भी अजीब महसूस कराती है, और पहुँच संबंधी समस्याएँ चुपचाप लाखों उपयोगकर्ताओं को बाहर कर सकती हैं। अच्छे रंग चुनने के लिए आपको डिज़ाइनर होने की ज़रूरत नहीं है। रंग सिद्धांत आपको विश्वसनीय सूत्र देता है, और जो उपकरण उन सूत्रों को पहुँच जाँचों के साथ जोड़ते हैं, वे एक उपयोगी पैलेट को पाँच मिनट का काम बना देते हैं।
रंग सिद्धांत का संक्षिप्त इतिहास
आइज़ैक न्यूटन ने लगभग 1666 में पहला रंग चक्र बनाया, रैखिक इंद्रधनुष को स्वयं पर मोड़कर दृश्य स्पेक्ट्रम को एक वृत्त में मैप किया। योहान वोल्फ़गांग वॉन गेटे ने 1810 में अपनी रंग सिद्धांत के साथ इस विचार का विस्तार किया, उन्होंने रंगों की भौतिक संरचना के बजाय यह कि वे कैसा महसूस कराते हैं उस पर ध्यान केंद्रित किया। अल्बर्ट मुनसेल ने 1905 में हुए (hue), मान (value), और क्रोमा (chroma) को अलग करके इसे व्यवस्थित किया, जिससे डिज़ाइनरों को "गहरा लाल" बनाम "अधिक संतृप्त लाल" के लिए शब्दावली मिली।
20वीं सदी ने अवधारणात्मक रंग स्थान जोड़े। CIE Lab (1976) पहला था जिसने "समान संख्यात्मक दूरी = समान अनुभूत अंतर" को वास्तविक लक्ष्य बनाया। HSL और HSV (1978) ने प्रोग्रामर्स को आसान अमूर्तता दी। आधुनिक वेब डिज़ाइन OKLCH (2020) और OKLAB की ओर बढ़ा है, ऐसे अवधारणात्मक रूप से समान रंग स्थान जो अंततः "चमक 50%" को सच में हर रंग में 50% चमकीला दिखाते हैं। यह प्रगति इसलिए मायने रखती है क्योंकि यह पैलेट जनरेटर को ऐसी छाया और रंग उत्पन्न करने देती है जो रंगों के बीच लगातार दिखती हैं, सिर्फ़ संख्यात्मक रूप से संबंधित नहीं।
रंग सामंजस्य मोड
सामंजस्य मोड रंग चक्र पर रंगों के बीच संबंधों पर आधारित हैं। प्रत्येक एक अलग भावना बनाता है:
पूरक, दो रंग सीधे विपरीत (उदा., नीला और नारंगी, लाल और हरा)। उच्च विरोधाभास, ऊर्जावान। उन कॉल-टू-एक्शन तत्वों के लिए अच्छा जो बाहर निकलने चाहिए, पर संयम से उपयोग करें क्योंकि तनाव शोरगुल लग सकता है।
समान (एनालॉगस), चक्र पर एक-दूसरे के बगल में तीन रंग (उदा., नीला, नीला-हरा, हरा)। सामंजस्यपूर्ण और शांत करने वाला। पृष्ठभूमि, प्रकृति-थीम वाले डिज़ाइन, और ऐसी पैलेट के लिए अच्छा जहाँ सब कुछ संबंधित महसूस होना चाहिए।
त्रिकोणीय (ट्रायाडिक), चक्र के चारों ओर समान दूरी पर तीन रंग (उदा., लाल, पीला, नीला)। जीवंत और संतुलित। चंचल, रचनात्मक या बच्चों के डिज़ाइन के लिए अच्छा।
विभाजित-पूरक: एक रंग प्लस उसके पूरक के बगल वाले दो रंग। पूरक के समान विरोधाभास पर कम तनाव; अक्सर इंटरफ़ेस में अधिक उपयोगी।
टेट्राडिक (या आयत): दो पूरक जोड़े के रूप में व्यवस्थित चार रंग। समृद्ध और विविध, पर संतुलित करना कठिन; आमतौर पर एक रंग प्रभुत्व लेता है और अन्य उच्चारण के रूप में काम करते हैं।
वर्ग: चक्र के चारों ओर समान दूरी पर चार रंग। अधिकतम विविधता, समान महत्व। अच्छी तरह उपयोग करना कठिन जब तक चार में से तीन को छोटे उच्चारण के रूप में न रखा जाए।
एकवर्णीय (मोनोक्रोमैटिक): एक ही रंग की अलग-अलग छाया, टिंट और टोन। हमेशा सामंजस्यपूर्ण, परिष्कृत, पर अधिक उपयोग से दृश्य रुचि कम हो सकती है। संपादकीय लेआउट और न्यूनतम ब्रांड सिस्टम के लिए उत्कृष्ट।
अवर्णीय (अक्रोमैटिक): केवल काला, सफेद और ग्रे। क्लासिक अख़बार या उच्च-विरोधाभास पत्रिका लुक। अक्सर एक उज्ज्वल उच्चारण के साथ जोड़ा जाता है।
पैलेट कैसे उत्पन्न करें
- सामंजस्य मोड चुनें: रंगों के बीच संबंध सेट करने के लिए यादृच्छिक, समान, पूरक, त्रिकोणीय, विभाजित-पूरक, टेट्राडिक, या एकवर्णीय चुनें।
- एक प्रारंभिक रंग चुनें: एक ब्रांड रंग दर्ज करें, संदर्भ छवि से रंग खींचें, या जनरेटर को एक चुनने दें।
- जो रंग पसंद हैं उन्हें लॉक करें: जब आप एक रंग पाएँ जिसे रखना चाहते हैं, इसे लॉक करें और अन्य को पुन: उत्पन्न करें जब तक पूरी पैलेट साथ काम न करे।
- चमक और संतृप्ति समायोजित करें: अधिकांश जनरेटर आपको प्रत्येक रंग की चमक और संतृप्ति को स्वतंत्र रूप से ट्यून करने देते हैं ताकि सुनिश्चित हो सके कि पैलेट में UI कार्य के लिए पर्याप्त चमक भिन्नता है।
- पहुँच जाँच चलाएँ: सत्यापित करें कि टेक्स्ट-ऑन-बैकग्राउंड संयोजन WCAG AA (4.5:1) या AAA (7:1) विरोधाभास को पूरा करते हैं।
- निर्यात करें, HEX कोड, CSS चर, Tailwind कॉन्फ़िग, ASE स्वैच कॉपी करें, या Figma, Sketch, या Canva जैसे डिज़ाइन उपकरणों के लिए पैलेट को एक छवि के रूप में सहेजें।
एक उपयोगी पैलेट बनाना
एक पैलेट सिर्फ़ सुंदर रंगों के सेट से अधिक है। एक वास्तविक परियोजना के लिए, आपको आमतौर पर इनकी आवश्यकता होती है:
| भूमिका | विशिष्ट संख्या | उद्देश्य |
|---|---|---|
| प्राथमिक | 1 | आपका ब्रांड रंग; बटन, लिंक, मुख्य UI के लिए |
| द्वितीयक | 1 | सहायक इंटरैक्टिव तत्व |
| उच्चारण | 1-2 | हाइलाइट, अधिसूचनाएँ, कॉलआउट |
| तटस्थ | 5-9 छाया | टेक्स्ट, पृष्ठभूमि, सीमाएँ, सतह |
| शब्दार्थ | 3-4 | सफलता (हरा), चेतावनी (एम्बर), त्रुटि (लाल), जानकारी (नीला) |
| ब्रांड सतह | 2-3 | कार्ड, पैनल, ऊँचाई वाला सामग्री |
| डार्क-मोड जोड़ी | उपरोक्त सब | डार्क पृष्ठभूमि के लिए पुनः गणना |
एक सामान्य आधुनिक पैटर्न है प्रत्येक रंग के लिए 10-चरण की चमक स्केल (50, 100, 200, ..., 900), जो बटन, होवर अवस्थाओं, निष्क्रिय अवस्थाओं, और डार्क-मोड समकक्षों के लिए पर्याप्त बारीकी देता है बिना मैन्युअल फिडलिंग के।
रंग स्थान और वे पैलेट को कैसे प्रभावित करते हैं
आप जिस स्थान में उत्पन्न करते हैं वह आकार देता है कि रंग कैसे संबंधित हैं। आधुनिक पैलेट उपकरण आपको स्विच करने देते हैं।
| रंग स्थान | के लिए सर्वोत्तम | ध्यान दें |
|---|---|---|
| RGB / HEX | लाल/हरा/नीला का प्रत्यक्ष नियंत्रण | अनुभूति परिणामों का पूर्वानुमान कठिन |
| HSL | हुए/संतृप्ति/चमक के त्वरित बदलाव | चमक अवधारणात्मक रूप से समान नहीं |
| HSV | HSL के समान, अलग मान मॉडल | संतृप्ति अलग व्यवहार करती है |
| Lab (CIE) | अवधारणात्मक रूप से समान, फोटो ग्रेडिंग | गणित-भारी |
| LCH | बेलनाकार रूप में Lab | ब्राउज़र समर्थन हाल का (2023+) |
| OKLab | आधुनिक अवधारणात्मक स्थान | नया, कम ट्यूटोरियल कवरेज |
| OKLCH | सही अनुभूति के साथ LCH का सर्वोत्तम | CSS में oklch(60% 0.15 250) के रूप में |
| HSLuv | अवधारणात्मक रूप से समान HSL विकल्प | छोटा पारिस्थितिकी तंत्र |
| Display P3 | विस्तृत गामुट Apple डिवाइस | अन्य पर sRGB पर वापस गिरता है |
| Rec.2020 | HDR वीडियो, भविष्य के डिस्प्ले | लगभग कोई वर्तमान स्क्रीन समर्थन नहीं |
2024 में अधिकांश वेब कार्य के लिए, OKLCH में उत्पन्न करें और संगतता के लिए HEX में निर्यात करें। CSS अब आधुनिक ब्राउज़रों में मूल रूप से oklch() स्वीकार करता है, इसलिए आप समृद्ध रंग हेरफेर के लिए OKLCH मान सीधे अपनी स्टाइलशीट में भी रख सकते हैं।
पहुँच, केवल सौंदर्यशास्त्र नहीं
एक शानदार दिखने वाली पैलेट बेकार है यदि आपके दर्शकों का हिस्सा इसे पढ़ नहीं सकता। तीन जाँच एक सुंदर पैलेट को समावेशी में बदल देती हैं।
WCAG विरोधाभास अनुपात मापते हैं कि टेक्स्ट अपनी पृष्ठभूमि से कितना अलग है। मानक थ्रेशोल्ड:
| सामग्री प्रकार | AA न्यूनतम | AAA न्यूनतम |
|---|---|---|
| सामान्य टेक्स्ट (18pt या 14pt बोल्ड से कम) | 4.5:1 | 7:1 |
| बड़ा टेक्स्ट (18pt+ या 14pt+ बोल्ड) | 3:1 | 4.5:1 |
| UI घटक और आइकन | 3:1 | n/a |
| सजावटी या निष्क्रिय तत्व | कोई न्यूनतम नहीं | कोई न्यूनतम नहीं |
रंग अंधापन सिमुलेशन: 8% पुरुषों और 0.5% महिलाओं को किसी न किसी रूप में रंग-दृष्टि की कमी होती है, सबसे आम लाल-हरा। यह सुनिश्चित करने के लिए कि जानकारी केवल रंग द्वारा नहीं दी जाती, अपनी पैलेट को सिम्युलेटर (ड्यूटेरानोपिया, प्रोटानोपिया, ट्रिटानोपिया) के माध्यम से चलाएँ।
APCA (उन्नत अवधारणात्मक विरोधाभास एल्गोरिथम) WCAG 3.0 में WCAG विरोधाभास के लिए उम्मीदवार प्रतिस्थापन है। यह पुराने सूत्र से बेहतर अवधारणा का मॉडल बनाता है और सूक्ष्म रूप से भिन्न पृष्ठभूमि पर टेक्स्ट के लिए मायने रखता है; इसे WCAG 2.x के साथ दूसरी राय के रूप में उपयोग करें।
सर्वोत्तम परिणाम प्राप्त करने के लिए सुझाव
- एक रंग से शुरू करें, एक प्राथमिक रंग चुनें जो आपको पसंद है, फिर इसके पूरक रंग खोजने के लिए सामंजस्य मोड का उपयोग करें। यह स्वतंत्र रूप से 5 रंग चुनने की कोशिश से आसान है।
- वास्तविक सामग्री पर परीक्षण करें, स्वैच के रूप में शानदार दिखने वाली पैलेट वास्तविक टेक्स्ट, बटन और पृष्ठभूमि पर लागू होने पर शायद काम न करे। हमेशा वास्तविक UI के साथ परीक्षण करें।
- चमक स्केल उत्पन्न करें, एकल "नीला" चुनने के बजाय, बहुत हल्के से बहुत गहरे तक 10-चरण की स्केल उत्पन्न करें। हल्के चरणों को पृष्ठभूमि के लिए, गहरे को टेक्स्ट के लिए, और मध्य-श्रेणी को उच्चारण के लिए उपयोग करें।
- कम अधिक है, 3 अच्छी तरह चुने गए रंगों वाला डिज़ाइन 7 वाले से अधिक पेशेवर दिखता है। इंटरफ़ेस के अधिकांश के लिए तटस्थ उपयोग करें और बोल्ड रंगों को महत्वपूर्ण चीज़ों के लिए सहेजें।
- फोटोग्राफी से खींचें, संदर्भ फोटो से रंग ड्रॉपर करें ताकि वास्तविक दुनिया में जमी हुई पैलेट मिले। Coolors, Color Hunt, और समर्पित फोटो एक्सट्रैक्टर एक क्लिक में यह करते हैं।
- डार्क मोड का ध्यान रखें, हल्के और गहरे संस्करण एक साथ उत्पन्न करें। एक प्राथमिक रंग जो सफ़ेद पर काम करता है काले पर असुविधाजनक रूप से चमक सकता है; OKLCH आपको हुए को स्थानांतरित किए बिना केवल चमक समायोजित करने देता है।
- तर्क सहेजें, दस्तावेज़ करें कि प्रत्येक रंग जो है वह क्यों है (ब्रांड संरेखण, पहुँच बाधा, मूड)। भविष्य का आप वर्तमान के आप को धन्यवाद देगा।
सामान्य नुकसान
- HSL में रंग चुनना पर HSL में रेंडर करना, HSL में समान चमक मान असमान दिखते हैं क्योंकि रंग स्थान मानव अनुभूति से मेल नहीं खाता। 50% चमक पर पीला 50% पर नीले से बहुत अधिक उज्ज्वल दिखता है। समान टिंट के लिए OKLCH पर स्विच करें।
- केवल रंग चक्र पर निर्भर रहना, चक्र एक शुरुआती बिंदु है, गारंटी नहीं। प्रतिबद्ध होने से पहले हमेशा वास्तविक टेक्स्ट के साथ विरोधाभास जाँचें।
- सांस्कृतिक अर्थ की उपेक्षा, चीन में लाल भाग्य का संकेत है और पश्चिम में चेतावनी का। पश्चिम में सफ़ेद का अर्थ शुद्धता है और एशिया के कुछ हिस्सों में शोक। यदि आप वैश्विक रूप से शिप करते हैं, स्थानीय शोध करें।
- ग्रे के बहुत सारे शेड, चार या पाँच तटस्थ चरण आमतौर पर टेक्स्ट से सूक्ष्म सीमाओं तक सब कुछ कवर करते हैं। बारह सभी को भ्रमित करते हैं, भविष्य के आप सहित।
- शुद्ध काले पर शुद्ध सफ़ेद, अत्यधिक विरोधाभास आँखों में तनाव पैदा कर सकता है। लंबे रूप के पठन के लिए लगभग-काले (#1A1A1A) पर लगभग-सफ़ेद (#FAFAFA) का उपयोग करें।
- अप्रयुक्त संयोजन, पृष्ठभूमि के विरुद्ध विरोधाभास पास करने वाला रंग स्वचालित रूप से हर अन्य सतह के विरुद्ध पास नहीं करता। प्रत्येक जोड़ी जो आपका डिज़ाइन वास्तव में उत्पन्न करता है, परीक्षण करें।
- एकल पृष्ठ पर एकल उच्चारण, एक बोल्ड उच्चारण जो ध्यान खींचता है अच्छा है। ध्यान के लिए लड़ने वाले दो उच्चारण बुरे हैं। सबसे महत्वपूर्ण कॉल-टू-एक्शन चुनें।
- ब्रांड रंग जो पहुँच में विफल होते हैं, कंपनी का लोगो भावनात्मक कारणों से कम-विरोधाभास जोड़ी का उपयोग कर सकता है; वेबसाइट नहीं कर सकती। UI के लिए सुलभ वेरिएंट उत्पन्न करें और ब्रांड जोड़ी को लोगो लॉकअप के लिए आरक्षित करें।
- लिंक और देखी गई अवस्थाओं को भूलना, दोनों को बॉडी टेक्स्ट से और एक-दूसरे से अलग होना चाहिए। तीनों परीक्षण करें।
- जनरेटर को शब्दार्थ रंग चुनने देना, सफलता/चेतावनी/त्रुटि रंगों की सांस्कृतिक और पहुँच अपेक्षाएँ हैं। उन्हें परंपरा से चुनें (हरा/एम्बर/लाल) और सत्यापित करें कि वे आपकी पैलेट के विरुद्ध सही दिखते हैं।
वैकल्पिक उपकरण और दृष्टिकोण
| उपकरण | ताकत | ध्यान दें |
|---|---|---|
| वेब पैलेट जनरेटर | मुफ़्त, तत्काल, कोई इंस्टॉल नहीं | गुणवत्ता उपकरण के अनुसार बदलती है |
| Coolors | परिष्कृत UX, लॉकिंग, निर्यात | कुछ सुविधाएँ पेवॉल के पीछे |
| Adobe Color | चक्र-आधारित, Creative Cloud से जुड़ा | कुछ सुविधाओं के लिए खाता आवश्यक |
| Paletton | बारीक सामंजस्य नियंत्रण | पुराना UI |
| Khroma | आपके पसंदीदा रंगों पर प्रशिक्षित AI | केवल ब्राउज़र |
| Color Hunt | लोगों द्वारा क्यूरेट की गई पैलेट | कम नियंत्रण |
| Refactoring UI रंग प्रणाली | Tailwind-शैली 10-चरण स्केल | मैन्युअल सेटअप |
| Material Theme Builder | Material 3 पैलेट उत्पन्न करता है | Material-विशिष्ट |
| Figma प्लगइन्स (Stark, Skala, Looks Good To Me) | संदर्भ में पैलेट उपकरण | Figma चाहिए |
| कस्टम OKLCH गणित | अधिकतम नियंत्रण | स्थान को समझने की आवश्यकता है |
परिष्कृत ब्रांड कार्य के लिए, एक पैलेट जनरेटर को विरोधाभास जाँचक और रंग-अंधापन सिम्युलेटर के साथ जोड़ें। जो उपकरण तीनों एक ही स्थान पर करते हैं वे सबसे अधिक समय बचाते हैं।
गोपनीयता और पैलेट जनरेटर
पैलेट जनरेटर पूरी तरह से आपके ब्राउज़र में चलता है। रंग निष्कर्षण के लिए आप जो भी स्रोत छवि अपलोड करते हैं वह FileReader API के साथ पढ़ी जाती है, ऑफ़स्क्रीन canvas पर नमूना ली जाती है, और रंग निकालने के बाद त्याग दी जाती है। कुछ भी अपलोड नहीं होता, कुछ भी लॉग नहीं होता, और आप जो पैलेट बनाते हैं वह आपसे जुड़ी नहीं है। बिना घोषित ब्रांड कार्य, लीक की गई मूड-बोर्ड कल्पना, या क्लाइंट तस्वीरों के लिए, वह केवल-स्थानीय प्रवाह सब कुछ आपकी मशीन पर रखता है जहाँ यह होना चाहिए। रंग चुनने जैसे नियमित कार्य के लिए, डिफ़ॉल्ट गोपनीयता होनी चाहिए: कुछ भी पेज नहीं छोड़ता, कुछ भी संग्रहीत नहीं होता, कुछ भी साझा नहीं होता।
अक्सर पूछे जाने वाले प्रश्न
एक पैलेट में कितने रंग होने चाहिए?
अधिकांश डिज़ाइन 3 से 5 रंगों के साथ सबसे अच्छे काम करते हैं, एक प्राथमिक रंग, एक द्वितीयक, एक तटस्थ और एक या दो एक्सेंट रंग। इससे अधिक, डिज़ाइन अराजक दिख सकता है।
रंग सामंजस्य क्या है?
रंग सामंजस्य उन संयोजनों को संदर्भित करता है जो देखने में सुखद हैं, रंग पहिये पर रंगों की स्थितियों पर आधारित। सामान्य सामंजस्य पूरक (विपरीत रंग), अनुरूप (आसन्न रंग) और त्रिकोणीय (तीन समान दूरी वाले रंग) हैं।
मैं कैसे सत्यापित करूँ कि मेरे रंग सुलभ हैं?
अपने टेक्स्ट और पृष्ठभूमि रंगों की WCAG अभिगम्यता मानकों को पूरा करने की पुष्टि करने के लिए एक कंट्रास्ट चेकर का उपयोग करें। सामान्य टेक्स्ट के लिए न्यूनतम अनुपात 4.5 : 1 (स्तर AA) है।
क्या मैं अपने पैलेट को निर्यात कर सकता हूँ?
हाँ। आप रंगों को HEX कोड, CSS चर के रूप में कॉपी कर सकते हैं, या Figma, Canva, Sketch आदि में उपयोग करने के लिए पैलेट को एक छवि के रूप में निर्यात कर सकते हैं।
What is the difference between HSL and OKLCH?
HSL describes colors by hue, saturation, and lightness in a way that does not match how humans perceive brightness; equal lightness values in HSL can look very different. OKLCH (and the related Oklab) is a modern perceptually-uniform colour space where equal lightness really does look equally bright. For palettes, OKLCH gives much more predictable shades and tints.
Should I design for dark mode separately?
Yes. Dark mode is not just an inverted palette. Pure white on pure black is fatiguing; aim for off-white (about