मुख्य सामग्री पर जाएँ

कलर व्हील

Figma के ज़रिए एक कस्टम रंग पैलेट आसानी से बनाएं

रंग पैलेट प्राप्त करें

एक रंग चुनें

कलर व्हील ग्रेडिएंट

RGB

HSL

HSB

CMYK

पैलेट सेटिंग्स चुनें

कस्टम पैलेट्स

इसे Figma के ज़रिए जीवंत बनाएं

अपनी खुद की कस्टम रंग पैलेट के ज़रिए अपने डिज़ाइनों की शुरुआत करें.

रंग हमारे दैनिक जीवन में महत्वपूर्ण भूमिका निभाता है: यह भावनाओं को प्रकट करता है, कार्यों को बदलता है, और लोग दुनिया को किस नज़रिए से देखते हैं उसके हर एक तत्व को प्रभावित करता है.

कल्पना कीजिए कि आपने एक सुंदर, आकर्षक डिज़ाइन तैयार करने में अपना दिल लगाया है. आपने लेआउट को सही ढंग से बनाया है, टाइपोग्राफ़ी बिल्कुल सही लगती है, लेकिन कुछ अलग सा लगता है. रंग बस क्लिक नहीं कर रहे हैं.

डिज़ाइन की दुनिया में, रंगों का चयन केवल सौंदर्य के बारे में नहीं है. रंग आपके प्रोज़ेक्ट के माध्यम से व्यूअरों को निर्देशित कर सकते हैं, भावनाओं को जगाते हैं, कहानियाँ सुनाते हैं, और अंततः एक अनुभव बनाते हैं. सही रंग चुनना एक स्पष्ट, आकर्षक प्रोज़ेक्ट और एक ऐसा प्रोज़ेक्ट जो व्यूअर को भ्रमित या गुमराह कर दे, के बीच का अंतर बना सकता है.

लेकिन जब आपके पास उंगलियों पर रंगों का विशाल स्पेक्ट्रम मौजूद हो, तो आप कैसे सुनिश्चित करेंगे कि आप सही विकल्प चुन रहे हैं और उन्हें प्रभावी ढंग से मिला रहे हैं? कलर व्हील में प्रवेश करें — यह एक सदाबहार, शक्तिशाली टूल है जो हर बार आपके डिज़ाइनों को उन्नत बनाने वाली सामंजस्यपूर्ण रंग पैलेटों को तैयार करने में मदद करता है.

कलर व्हील एक सरल लेकिन शक्तिशाली टूल है जो डिज़ाइनरों को रंग के बारे में निर्णय लेने, दर्शकों को लुभाने वाली योजनाएँ बनाने और विशिष्ट डिज़ाइन लक्ष्यों को प्राप्त करने में मदद करता है. गोलाकार डायाग्राम उनके संबंधों के आधार पर रंगों को व्यवस्थित करता है, उन्हें प्राथमिक रंगों, द्वितीयक रंगों, और तृतीयक रंगों में वर्गीकृत करता है, यह दिखाते हुए कि वे कैसे बदलते और मिलते हैं. डिज़ाइनर इस दृश्य उपकरण का उपयोग रंग इंटरैक्शन को समझने और डिजिटल प्रोज़ेक्ट के लिए सामंजस्यपूर्ण रंग योजनाएँ बनाने के लिए करते हैं.

सर आइज़क न्यूटन ने 1666 में कलर व्हील का आविष्कार किया था, जिससे आधुनिक रंग सिद्धांत की बुनियाद रखी. प्रकाश के प्रति उनकी जिज्ञासा ने उन्हें एक प्रिज्म के माध्यम से सफेद प्रकाश गुजारने के प्रयोग करने के लिए प्रेरित किया, जिससे सफेद प्रकाश एक रंगीन स्पेक्ट्रम में विभाजित हो गया. इस घटना ने न्यूटन को प्रेरित किया कि वे इन रंगों को गोलाकार रूप में व्यवस्थित करें, जिससे पहला कलर व्हील बना. इस सूक्ष्म डायाग्रामिंग ने दर्शाया कि कैसे रंग एक-दूसरे से संबंधित हैं और यह समझने के लिए एक व्यवस्थित तरीका स्थापित किया कि वे कैसे इंटरैक्ट और सम्मिलित होते हैं. सर आइज़ैक न्यूटन का कलर व्हील विज्ञान और कला में एक बुनियादी टूल बना हुआ है.

आमतौर पर, एक मानक कलर व्हील में 12 रंग होते हैं: तीन मूल रंग (लाल, पीला, नीला, जिन्हें प्राथमिक रंग कहा जाता है), तीन द्वितीयक रंग (नारंगी, हरा, बैंगनी), और छह तृतीयक रंग (लाल-नारंगी, पीला-नारंगी, पीला-हरा, नीला-हरा, नीला-बैंगनी, लाल-बैंगनी).

उन्नत कलर व्हील रंग डिज़ाइन के लिए अधिक सूक्ष्म वर्ण के लिए टिंट्स, शेड्स, और टोन के व्यापक स्पेक्ट्रम को शामिल करते हैं—जो विशेष रूप से डिजिटल और UI डिज़ाइन के लिए उपयोगी है. यह विस्तार डिज़ाइनरों को रंग चयन पर अधिक सटीक नियंत्रण देता है, जिससे जटिल और परिष्कृत रंग थीम और पैलेट बनाने की सुविधा मिलती है.

किसी भी प्रोज़ेक्ट के लिए एक प्रभावशाली और संगठित रंग पैलेट बनाने के लिए एक कलर व्हील का उपयोग करना एक सरल और प्रभावी तरीका है. इसे कैसे करें:

चरण 1: एक मूल रंग चुनें.

रंग चक्र पर आधारभूत रंग चुनने के लिए कलर पिकर का उपयोग करें. यह रंग आपके रंग पैलेट की नींव होगा, जिससे आपके डिज़ाइन का टोन और मूड सेट होगा और अतिरिक्त रंगों के चयन को प्रभावित करेगा.

चरण 2: एक रंग योजना चुनें.

एक रंग योजना चुनें. प्रत्येक योजना अलग दृश्य प्रभाव प्रदान करती है:

  • पूरक रंग पहिया पर सीधे एक-दूसरे के विपरीत रंगों का उपयोग करके आपको अधिकतम विपरीतता प्रदान करते हैं.
  • त्रि-आयामी एक चमकीला लेकिन संतुलित रूप उत्पन्न करता है, जो त्रिकोणीय निर्माण में रंगों का उपयोग करता है.
  • एनालॉगस कलर व्हील पर एक दूसरे के पास स्थित रंगों के साथ एक सामंजस्यपूर्ण इफ़ेक्ट उत्पन्न करता है.
  • विभाजित-पूरक उच्च-विपरीत लेकिन कम तनावयुक्त दृश्य उत्पन्न करता है, मुख्य रंग और दो समीपवर्ती रंगों का पूरक के रूप में उपयोग करता है.
  • वर्ग चार रंगों से विविधता को बढ़ाता है जो चक्र के चारों ओर समान रूप से वितरित होते हैं.
  • मोनोक्रोमैटिक प्रकाशता (टिन्ट्स) और अंधकार (शेड्स) की शक्ति का उपयोग करता है ताकि बेस रंग पर आधारित सूक्ष्म बदलाव और आकर्षक विरोधाभास बनाए जा सकें.

चरण 3: अपने डिज़ाइन पर लागू करें.

एक बार जब आप अपने प्रोज़ेक्ट के लिए सबसे अच्छा रंग पैलेट पा लें, तो इसे अपने डिज़ाइन में लागू करें ताकि वांछित दृश्य प्रभाव प्राप्त हो सके.

रंग सिद्धांत डिज़ाइनरों के लिए सही रंग योजना बनाने और वांछित प्रभाव व्यक्त करने के लिये एक ढांचा प्रदान करता है, जैसे गहरे बैंगनी और सुनहरे रंग के साथ परिष्कार या हल्के नीले और हरे रंग के साथ शांति की भावना. चाहे आप उच्च-विपरीत संयोजनों के ज़रिए ध्यान आकर्षित करना चाहते हों या एक सामंजस्यपूर्ण वातावरण बनाना चाहते हों, रंग सिद्धांत को समझना आवश्यक है. यहाँ कुछ प्रमुख अवधारणाओं का अवलोकन है:

कलर व्हीलकलर व्हील

प्राथमिक रंग क्या होते हैं (आरवाईबी)

RYB रंग मॉडल में प्राथमिक रंग लाल, पीला, और नीला हैं. ये तीन रंग कलर व्हील का आधार बनाते हैं और इन्हें विभिन्न अनुपातों में मिलाकर अन्य सभी रंग बनाए जा सकते हैं.

प्राथमिक रंग क्या हैं?प्राथमिक रंग क्या हैं?

माध्यमिक रंग क्या हैं

माध्यमिक रंग प्राथमिक रंगों के बीच के कलर व्हील पर स्थान रखते हैं और दो प्राथमिक रंगत को मिलाकर बनाए जाते हैं. उदाहरण के लिए, लाल और नीले को मिलाकर बैंगनी बनता है, जबकि लाल और पीले को मिलाकर नारंगी बनता है. जवाब के लिए हरा कैसे बनता है याद रखने के लिए, प्राथमिक रंगों के समीपवर्ती रंगों की ओर देखें: पीला और नीला.

माध्य रंग क्या हैंमाध्य रंग क्या हैं

तृतीयक रंग क्या हैं

अन्य द्वितीयक रंगों को बनाते हुए तृतीयक रंग या माध्यमिक रंग पहिए को भरते हैं. आपको ये रंग तब मिलते हैं जब आप एक प्राथमिक और द्वितीयक रंग को मिलाते हैं. उदाहरण के लिए, लाल और नारंगी को मिलाने से लाल-नारंगी रंग मिलता है, और यह दोनों के बीच के खाली स्थान को भरता है. एक स्क्रॉल करने योग्य कलर व्हील के ज़रिए, आप लाल-नारंगी के व्यक्तिगत शेड को समायोजित कर सकते हैं, जिसे आप व्हील पर अपनी स्थिति के आधार पर चाहते हैं. आप अद्वितीय माध्यमिक रंग बनाने के लिए नीला-हरा, नीला-गुलाबी, लाल-नारंगी, लाल-गुलाबी, पीला-नारंगी, और पीला-हरा भी मिला सकते हैं. यह विस्तृत रंग-पिकिंग क्षमता उत्पाद डिज़ाइनरों को उनकी पसंद के सटीक शेड और एक्सेंट रंग ढूंढ़ने में मदद करती है.

त्रैतीय रंग क्या होते हैंत्रैतीय रंग क्या होते हैं

रंग एक उत्पाद के उपयोग, विचार, स्मृति, और प्रतियोगियों से भिन्नता में महत्वपूर्ण भूमिका निभाता है. जब एक उत्पाद के संदर्भ में ध्यान से चुना जाए - जैसे इसका दर्शक वर्ग, उद्योग, और इच्छित परिणाम - तो रंग ऐसा शक्तिशाली टूल है जो यूज़र के व्यवहार को प्रभावित कर सकता है.

चेल्सी व्हाइट, ब्रांड डिज़ाइनर, Figma

सात रंग योजनाएँ क्या होती हैं?

रंग योजनाएँ सामरिक रंग संयोजन होते हैं जो दृश्य संतुलन प्राप्त करने में मदद करते हैं. ये योजनाएं सौंदर्यपूर्ण रूप से सुखद डिज़ाइन बनाने के लिए रंग सिद्धांतों का उपयोग करती हैं. रंग योजनाओं के सात सामान्य प्रकार हैं:

पूरक रंग

पूरक रंग कलर व्हील के विपरीत पक्षों से रंगों को जोड़कर हाई कंट्रास्ट बनाते हैं. आप कोई रंग चुनें और फिर कलर व्हील को 180° तक घुमाएँ, तो आपको पूरक रंग मिल जाएगा. कुछ पूरक रंग योजनाएं अच्छी तरह से ज्ञात और लोकप्रिय हैं, जैसे लाल और हरा. यदि आप डिज़ाइन में गर्म और ठंडे रंग दोनों चाहते हैं, तो ये रंग योजनाएं बहुत बढ़िया हो सकती हैं.

पूरक रंग क्या होते हैंपूरक रंग क्या होते हैं

#693EFEके लिए पूरक रंग

पूरक

स्प्लिट कॉम्प्लिमेंटरी रंग

विभाजित पूरक रंग वे रंग संयोजन हैं जिनमें आप एक मुख्य रंग को रंग के किसी भी तरफ के दो पास के तृतीयक रंगों के साथ मिलाते हैं. यह आपको तीन रंगों का एक पैलेट देता है और अधिक सूक्ष्म रंग पैलेट बनाने में मदद करता है.

विभाजित पूरक रंग क्या हैंविभाजित पूरक रंग क्या हैं

#693EFEके लिए विभाजित पूरक रंग

विभाजित करें

एकवर्णी रंग

एकवर्णी रंग शायद सबसे आसान है समझने में क्योंकि ये केवल आपके प्राथमिक रंग के हल्के और गहरे संस्करण होते हैं. एकवर्णी रंग योजना का उपयोग आमतौर पर डिज़ाइनरों को निर्णय लेने की जटिलता से छुटकारा दिलाता है और आमतौर पर रंग का subtly तरीके से उपयोग करने की अनुमति देता है. एकवर्णी रंग पैलेट बनाने के लिए, आप अपने प्राथमिक रंग से समान स्केल में हल्के और गहरे संस्करणों को बढ़ाते हैं.

एकरंगी रंग क्या हैंएकरंगी रंग क्या हैं

#693EFEके लिए एकवर्णी रंग

एकरंगी

समानांतर

समरूप रंग कलर व्हील पर तीन रंगों के ग्रुप होते हैं, जो एक-दूसरे के पास होते हैं. यह एक नरम, अधिक प्राकृतिक रंग पैलेट बनाता है. आखिरकार, प्रकृति में कई संबंधित रंग होते हैं. बस पेड़ के पत्तों के बारे में सोचें, या महासागर के रंग के सूक्ष्म भिन्नताओं के बारे में. एक समरूप रंग योजना काफी सामंजस्यपूर्ण होती है और डिजाइन में विभिन्न तत्वों को मिलाने में मदद कर सकती है.

एनालॉगस रंग क्या होते हैंएनालॉगस रंग क्या होते हैं

#693EFEके लिए समान रंग

समानांतर

त्रिआयामी

एक त्रैआधार रंग योजना आपको तीन समान विपरीत रंग देती है. बिंदु कलर व्हील के चारों ओर समान रूप से वितरित होते हैं, एक समबाहु त्रिभुज बनाते हैं. एक त्रीवर्गीय रंग योजना के तहत डिजाइन करते समय एक ही प्राथमिक रंग चुनना और अन्य दो का उत्कर्ष के रूप में उपयोग करना सबसे अच्छा होता है. त्रिवर्णीय रंग योजनाएँ अधिक बोल्ड और चंचल होती हैं.

त्रिज्या रंग क्या हैंत्रिज्या रंग क्या हैं

#693EFEके लिए त्रिएक रंग

त्रिआयामी

तτραडिक (डबल पूरक)

Google और Microsoft में क्या समानता है? दोनों अपने लोगो के लिए त्रिआयामी रंग पैलेट का प्रयोग करते हैं. त्रिआयामी का अर्थ एक समूह के चार से संबंधित होता है, इसलिए इस मामले में, हम चार रंगों का चयन करने के लिए कलर व्हील का उपयोग कर रहे हैं, जो एक आयत का निर्माण करते हैं. इन रंगों में दो सेट पूरक रंग शामिल होते हैं, जो एक जीवंत और ऊर्जावान पैलेट बनाते हैं. त्रिआयामी रंग योजना को कभी-कभी 'डबल पूरक' योजना कहा जाता है.

चतुष्कोण रंग क्या हैंचतुष्कोण रंग क्या हैं

#693EFEके लिए चतुर्थक रंग

वर्ग

वर्ग

चतुष्कोण के समान, एक वर्ग रंग योजना चार रंगों का उपयोग करती है, लेकिन इस उदाहरण में, वे कलर व्हील के चारों ओर समान रूप से फैले होते हैं, एक वर्ग बनाते हुए. यह चतुष्कोण योजनाओं के उच्च कंट्रास्ट की तुलना में एक अधिक संतुलित रूप बनाता है. चतुष्कोण रंग योजनाओं की तरह, यह सबसे अच्छा होता है कि एक प्रमुख रंग चुनें और अन्य को उच्चारण के रूप में प्रयोग करें.

गर्म रंग बनाम ठंडे रंग

कलर व्हील गर्म और ठंडे रंगों को अलग करके दिखाती है. गर्म रंग तीव्रता व्यक्त करते हैं, जैसे कि लाल, नारंगी, और पीला. ठंडे रंग जैसे कि बैंगनी, नीला और हरा शांति और विश्राम का अनुभव कराते हैं. दिखें कि कैसे ध्यान ऐप कैल्म मुख्य रूप से नीले रंग का उपयोग करता है? यह जानबूझकर शांति का अनुभव कराने के लिए चुना गया है.

एक रंग मॉडल एक प्रणाली है जो संख्यात्मक वैल्यू का उपयोग करके रंगों को प्रदर्शित करने में मदद करती है. इस पृष्ठ पर चार रंग मॉडल हैं:

  1. लाल, हरा और नीला (RGB)
  2. सियान, मैजेंटा, पीला, और प्रमुख (CMYK)
  3. रंग, संतृप्ति और प्रकाशता (HSL)
  4. हैक्साडेसिमल कोड

लाल, हरा, नीला (RGB)

लाल, हरा, नीला (RGB) रंग मॉडल किसी भी डिज़ाइन के लिए आधार है जो स्क्रीन पर प्रदर्शित होता है. यह रंग मॉडल मनुष्यों के रंगों की धारणा और कैसे हमारी आँखें प्रकाश के साथ संपर्क करती हैं, उस पर आधारित है. ये 'ऐडिटिव रंग' उन विभिन्न रंगों में मिलाए जा सकते हैं जिनसे हम अपने स्क्रीन पर हर दिन संपर्क करते हैं.

सियान, मैजेंटा, पीला, और कुंजी (CMYK)

दूसरी ओर, CMYK मॉडल सभी प्रिंट डिज़ाइन का आधार है. ये 'घटाना-रंग' प्रकाश की तरंगदैर्घ्य को अवशोषित करते हैं, जो वास्तव में पाए जाने वाले वर्णकों से अधिक स्पष्ट रूप से मेल खाते हैं.

  • सियान (C):सियान एक नीला-हरा रंग है. जब सियान स्याही सतह पर लगाई जाती है, तो यह लाल प्रकाश को अवशोषित करती है, जिससे यह मानव आँख को नीला-हरा दिखाई देता है.
  • मैजेंटा (एम):मैजेंटा एक बैंगनी-लाल रंग है. यह हरे प्रकाश को अवशोषित करता है, जिससे एक लाल-बैंगनी रंग का अनुभव होता है.
  • पीला (Y):पीला नीली रोशनी को सोख लेता है, जिसके परिणामस्वरूप जब मुद्रित होता है तो पीले रंग का प्रभाव देता है.
  • मुख्य (K) या काला: CMYK में "K" का मतलब "मुख्य" होता है, जो काले कम्पोनेन्ट को संदर्भित करता है. काली स्याही का उपयोग इमेज और टेक्स्ट की गहराई और कन्ट्रास्ट को बढ़ाने के लिए किया जाता है. अतिरिक्त रूप से, काले स्याही का उपयोग करने से उन रंगों के धुंधलापन को रोकने में मदद मिलती है जो रंगों को मिलाकर काला बनाने का प्रयास करते समय हो सकते हैं.

रंग, संतृप्ति और कालिमा

कलर व्हील पर देखे गए रंगों का प्रतिनिधित्व रंग करता है. इसे 360-डिग्री सर्कल के भीतर एक स्पेक्ट्रम के रूप में सोचें. जब आप इस सर्कल के चारों ओर नेविगेट करते हैं, तो आप विभिन्न ह्यूज़ से मिलते हैं.

  • रंग रंग: रंग की परिभाषा जटिल है, लेकिन मूल रूप में, यह कलर व्हील पर दिखने वाले रंगों को संदर्भित करती है. रंग चक्र एक 360-डिग्री का चक्र है, और जब आप इस चक्र को चारों ओर घुमाते हैं, तो आप विभिन्न रंग देख सकते हैं.
  • विभव: रंग की चमक या तीव्रता, जिसे विभव कहा जाता है, इसकी समृद्धि और शुद्धता को दर्शाता है.कलर व्हील के बाहर, आप पूरी विभव पर एक रंग देख सकते हैं. जैसे-जैसे आप सर्कल के केंद्र की ओर बढ़ते हैं, रंग कम तीव्र हो जाता है. रंग की तीव्रता को कम करने के लिए, हम इसमें काला और सफेद (अर्थात् ग्रे) मिलाते हैं.
  • उज्ज्वलता: उज्ज्वलता यह निर्धारित करती है कि हम किसी रंग में कितना काला या सफेद मिलाएँ. आप अधिक सफेद मिलाकर पेस्टल रंग प्राप्त कर सकते हैं, और अधिक गहरा, गहरा पैलेट प्राप्त कर सकते हैं अधिक काले मिलाकर.
HSL क्या होते हैं?HSL क्या होते हैं?

#693EFEके लिए शेड्स और टिंट्स

शेड्स

टिन्ट्स

हेक्साडेक्सिमल कोड

हेक्साडेसिमल (अक्सर उसे "हेक्सिडेसिमल" गलत लिखते हैं) कोड, या हेक्स कोड, आपके कंप्यूटर को बताते हैं कि एक पिक्सेल के रंग को उत्पन्न करने के लिए कितना लाल, हरा, और नीला मिलाना है.

आपकी स्क्रीन के प्रत्येक पिक्सेल में तीन रंग तत्व होते हैं जो लाल, हरा और नीला प्रकाश उत्पन्न करते हैं. ये रंग तत्व (जिन्हें सबपिक्सेल कहा जाता है) इतने छोटे होते हैं कि वे मानव आंख को एकल रंग के रूप में दिखाई देते हैं.

प्रत्येक पिक्सेल द्वारा प्रदर्शित की जा सकने वाली 16 मिलियन रंग प्राप्त करने के लिए विभिन्न मात्रा में लाल, हरा, और नीला प्रकाश मिलाते हैं, जो मानव आंख द्वारा देखे जा सकते हैं.

हर एक पिक्सेल 256 रेड वैल्यू, 256 ग्रीन वैल्यू और 256 ब्लू वैल्यू को मिलाकर 16 मिलियन रंग की संभावनाएं जनरेट कर सकता है. (256 x 256 x 256 गुणा करें, और आपको 16 मिलियन से अधिक प्राप्त होंगे.) कंप्यूटर बाइनरी कोड का उपयोग करके इन वैल्यू को हर एक पिक्सेल में भेजते हैं, जो 1 और 0 से मिलकर बनी एक भाषा है. उदाहरण के लिए, 200 की एक रेड वैल्यू बाइनरी कोड में 11001000 के रूप में प्रदर्शित की जाएगी. चूंकि बाइनरी कोड मानव की समझ से बाहर है, पठनीय विकल्प के रूप में हेक्साडेसिमल सिस्टम का उपयोग किया जाता है.

हेक्स कोड कैसे कार्य करता है?

एक हेक्स कोड में तीन वैल्यू होते हैं—एक लाल, हरा, और नीला के लिए, प्रत्येक का दो अंकों द्वारा प्रतिनिधित्व. उदाहरण के लिए, #F234A2 में होता है:

  • लाल: F2
  • हरा: 34
  • नीला: A2

इन अक्षरों के साथ क्या मामला है? हमारी आम बेस-10 प्रणाली के विपरीत, हेक्साडेसिमल गिनती बेस-16 का उपयोग करती है. यह 0 से 9 तक जाता है, फिर 10 से 15 तक के नंबरों का प्रतिनिधित्व करने के लिए A से F का उपयोग करता है.

हैक्स कोड और RGB के बीच कैसे रूपांतरित करें

चूंकि हेक्स कोड और HSL वैल्यू RGB रंग मॉडल के प्रतिनिधित्व के सिर्फ अलग-अलग तरीके हैं, आप उन्हें एक-दूसरे में परिवर्तित कर सकते हैं. हेक्स कोड को RGB वैल्यू में बदलने का काम आप अक्सर हाथ से नहीं करते, लेकिन इसे करने के लिए कुछ त्वरित गणित होता है. तीनों मानों में से प्रत्येक के लिए:

  • पहले नंबर (या अक्षर) को लें और इसे 16 से गुणा करें
  • दूसरे नंबर (या अक्षर) को जोड़ें

#E234A2 के लिए, पहली वैल्यू E2 है. यह संख्या 226 (14 * 16 + 2) को दर्शाती है. यह संख्या रंग लाल के लिए RGB वैल्यू है. और #E234A2 के निम्नलिखित RGB मान हैं:

  • लाल: 226
  • हरा: 49
  • नीला: 152

(आप हेक्स कोड या RGB मानों को HSL मानों में भी बदल सकते हैं, लेकिन गणित थोड़ा अधिक जटिल होता है!)

डिजिटल डिज़ाइन में कलर प्रोफ़ाइल: sRGB और P3

विभिन्न डिवाइस, मॉनिटर, ब्राउज़र, और एप्लीकेशंस रंग प्रदर्शन के लिए विविध प्रौद्योगिकियों का उपयोग करते हैं, जो डिवाइसों के बीच दृश्य असंगतियों के परिणामस्वरूप हो सकते हैं. डिजिटल प्लेटफॉर्म के लिए डिज़ाइन करते समय, यह महत्वपूर्ण होता है कि कलर प्रोफ़ाइल का ध्यान रखा जाए, क्योंकि वे विशेष स्क्रीन के आधार पर रंगों को परिभाषित और प्रदर्शित करने का एक सुसंगत मानक स्थापित करते हैं.

p3 कलर प्रोफ़ाइलp3 कलर प्रोफ़ाइल

डिजिटल डिज़ाइन में कलर प्रोफ़ाइल, जैसे sRGB और P3, डिवाइसों के बीच लगातार रंग प्रतिपादन सुनिश्चित करते हैं. sRGB दशकों से कंटेंट क्रिएटर और वेब डिज़ाइनरों के लिए वेब मानक रहा है, जो अधिकांश उपभोक्ता डिवाइसों के बीच दृश्य स्थिरता सुनिश्चित करता है. Display P3, अक्सर संक्षेप में P3 कहा जाता है, रंगों का एक व्यापक स्पेक्ट्रम रेंडर कर सकता है, जो sRGB की तुलना में 49% अधिक पहचानने योग्य रंगों को दर्शाता है. हालांकि, स्मार्टफ़ोन या लैपटॉप जैसे डिवाइसों पर P3 का उपयोग करना जो sRGB के लिए डिज़ाइन किए गए हैं, अत्यधिक ऊर्जा उपभोग का कारण बन सकता है क्योंकि डिवाइस को विस्तारित रंग रेंज को रेंडर करने के लिए अधिक मेहनत करनी पड़ती है. यदि आप iOS या उच्च-परिभाषा/रेटिना स्क्रीन जैसे प्लेटफार्मों के लिए डिज़ाइन कर रहे हैं, तो Display P3 सबसे अच्छा विकल्प है, लेकिन सभी अनुप्रयोग और सॉफ़्टवेयर पूरी तरह से इसकी विस्तृत रंग रेंज का समर्थन नहीं करते हैं.

जानें कि Figma यहाँ P3 कलर प्रोफ़ाइल का समर्थन कैसे करता है

WCAG और रंग एक्सेसिबिलिटी

1999 में, वर्ल्ड वाइड वेब कंसोर्टियम (W3C) द्वारा वेब सामग्री एक्सेसिबिलिटी दिशानिर्देशों (WCAG) का पहला संस्करण पब्लिश किया गया था. यह तकनीकी दस्तावेज सुनिश्चित करता है कि वेब सामग्री सभी उपयोगकर्ताओं के लिए सुलभ हो. वेब एक्सेसिबिलिटी के लिए वैश्विक मानक के रूप में मान्यता प्राप्त, W3C की सिफारिशें वेब विकास और डिजिटल डिज़ाइन समुदायों में महत्वपूर्ण प्रभाव रखती हैं. यह संगठन तकनीकी उन्नति और उभरती एक्सेसिबिलिटी की आवश्यकताओं को परिलक्षित करने के लिए लगातार प्रलेख पब्लिश करता है.

वर्तमान दस्तावेज, WCAG 2.1, एक व्यापक वेब अनुभव बनाने के लिए संज्ञानात्मक दोषों और मोबाइल डिवाइस के उपयोग सहित विभिन्न विकलांगताओं पर विचार करते हुए वेब एक्सेसिबिलिटी दिशानिर्देशों को बढ़ाता है. दिशानिर्देशों में कवर किए गए एक महत्वपूर्ण पक्षों में से एक दृश्य एक्सेसिबिलिटी है, विशेष रूप से रंग डिज़ाइन में विपरीतता का महत्व. उचित विपरीतता यह सुनिश्चित करती है कि पाठ और इंटरैक्टिव तत्व बैकग्राउंड रंगों के विपरीत स्पष्ट रूप से देखे जाते हैं, जो रंग असमानता या कम दृष्टि जैसे विकलांगताओं वाले यूज़रों के लिए आवश्यक है.

WCAG अनुशंसाएँ सभी उपयोगकर्ताओं के लिए जानकारी पहुंच सुनिश्चित करने के लिए पाठ और पाठ के चित्रों के लिए न्यूनतम कंट्रास्ट अनुपात निर्दिष्ट करती हैं, भले ही उनकी दृश्य क्षमताएँ कुछ भी हों. उदाहरण के लिए, सामान्य पाठ के लिए 4.5:1 का न्यूनतम कंट्रास्ट अनुपात अनुशंसित है. बड़े पाठ की कम से कम 3:1 अनुपात होना आवश्यक है.

WCAG 3.0 वर्तमान में विकास में है और अधिक व्यापक होने का वादा करता है. अन्य सुधारों के अलावा, रंग विपरीत के लिए अधिक सूक्ष्म दिशानिर्देशों की उम्मीद की जाती है.

WCAG 2.1 के बारे में और जानें

#693EFEके लिए एक्सेसिबिलिटी

कंट्रास्ट 5.64

बड़ा टेक्स्ट

#693EFE

सामान्य पाठ

आप कैसे डिज़ाइन करते हैं, अलाइन करते हैं, और निर्माण करते हैं, मायने रखता है. Figma के साथ इसे एक साथ करें।

यह #693EFE टेक्स्ट एक #FFFFFF बैकग्राउंड पर है.
श्रेणी
पास
फ़ेल
पास
पास
पास
पास

कंट्रास्ट 3.72

बड़ा टेक्स्ट

#693EFE

सामान्य पाठ

आप कैसे डिज़ाइन करते हैं, अलाइन करते हैं, और निर्माण करते हैं, मायने रखता है. Figma के साथ इसे एक साथ करें।

यह #693EFE टेक्स्ट एक #000000 बैकग्राउंड पर है.
श्रेणी
फ़ेल
फ़ेल
पास
फ़ेल
पास
फ़ेल

#693EFEके लिए रंग अनुकरण

प्रोटनोपिया

ड्यूटेरानोपीया

ट्रिटैनोपिया

अक्रोमैटोप्सिया

इसे Figma के ज़रिए जीवंत बनाएं

अपनी खुद की कस्टम रंग पैलेट के ज़रिए अपने डिज़ाइनों की शुरुआत करें.

एक्सप्लोर करना जारी रखें

कलर पिकरकलर पिकर

इमेज कलर पिकर

हमारे कलर पिकर के ज़रिए किसी भी चित्र से कस्टम रंग पैलेट बनाएं

इमेज कलर पिकर एकस्पलोर करें

रंग सिद्धांत क्या है?

रंग सिद्धांत डिज़ाइनरों को ऐसे रंग विकल्प लेने में मदद करता है जो उपयोगकर्ताओं को आकर्षित करते हैं और ब्रांड को ऊंचा करते हैं.

रंग सिद्धांत का पता लगाएं

UI डिज़ाइन

यूज़र इंटरफ़ेस डिज़ाइन प्रक्रिया के आंतरिक और बाहरी सीखें.

UI डिज़ाइन लेखों को एक्सप्लोर करें