टूल्स95

संपादित करें / एक व्यावहारिक छवि गाइड

इमेज के रंग कैसे चुनें और पैलेट कैसे बनाएं

एक ऐसे रंग से आगे बढ़ें जिसे आप नोटिस करते हैं, उन मानों तक जिनका आप उपयोग कर सकते हैं।

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

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

collage-botanical.jpg: 1200 x 900 px, 199,152 बाइट्स।

बाद में वानस्पतिक फोटो से निकाले गए लेबल वाले आड़ू, टौप, जैतून और बैंगनी स्वैच के साथ वास्तविक छह-रंगों का पैलेट।

palette.png: 600 x 500 px, 9,163 बाइट्स।

मूल वानस्पतिक सैंपल और वास्तविक छह-रंगों का PNG पैलेट। रंगों को एक कम किए गए सैंपल से समूहीकृत किया गया है; कार्ड में एक्सट्रैक्ट किए गए HEX मान हैं, न कि फिर से रंगी गई फोटो।
विज्ञापन
त्वरित वीडियो ट्यूटोरियल How to pick an image color and export a palette Upload an image, inspect a pixel with the magnifier, add its color to the extracted palette, select Start and download a PNG palette. अंग्रेजी वर्णन वीडियो देखें

How to pick an image color and export a palette

विज्ञापन

पहले उदाहरण पैलेट को एक्सट्रैक्ट करें, फिर सटीक पिकिंग और मैन्युअल संपादन का उपयोग करके यह तय करें कि कौन से रंग आपके अपने प्रोजेक्ट में होने चाहिए। इमेज कलर पिकर खोलें.

01

अपलोड करें और शुरुआती पैलेट एक्सट्रैक्ट करें

इमेज कलर पिकर खोलें और एक समर्थित इमेज अपलोड करें, या नमूना आज़माएं। स्वचालित एक्सट्रैक्शन सोर्स को सर्वर पर अपलोड करता है। इस गाइड में नमूना collage-botanical.jpg है, जो फूलों, पत्तियों और आड़ू के रंग के बैकग्राउंड वाली 1200 x 900 फोटो है।

एक्सट्रैक्ट करने के लिए रंगों को 6 पर छोड़ दें और उदाहरण के लिए डोमिनेंट चुनें। डोमिनेंट मुख्य इमेज रंगों का पक्ष लेता है, जबकि वाइब्रेंट रंगीन एक्सेंट को अधिक प्रभाव देता है। एक अनुरोध 3 से 12 रंगों का उपयोग कर सकता है; कम अलग दृश्य समूहों वाली इमेज कम रंग लौटा सकती है।

वास्तविक डोमिनेंट परिणाम में #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA शामिल हैं। सबसे बड़ा समूह #E3B49F है जो सैंपल किए गए दृश्य पिक्सल का लगभग 28.88% है। एक्सट्रैक्शन ने 512 x 384 सैंपल का उपयोग किया; वे प्रतिशत पूर्ण-रिज़ॉल्यूशन इमेज की सटीक गणना नहीं हैं।

पैलेट का रंग आस-पास के रंगों का औसत हो सकता है। जब आपको एक छोटे विवरण के मान की आवश्यकता हो तो एक विशेष पिक्सल चुनें।

02

अलग-अलग रंग चुनें और रिफाइन करें

मैग्नीफायर के साथ पिक्सल का निरीक्षण करने के लिए इमेज पर क्लिक या टैप करें। इमेज को फोकस करें और एक पिक्सल ले जाने के लिए एरो कीज़ का उपयोग करें, दस पिक्सल ले जाने के लिए शिफ्ट के साथ एरो का उपयोग करें, फिर चुनने के लिए एंटर दबाएं। अपने व्यक्तिगत कॉपी बटन के साथ HEX, RGB या HSL कॉपी करें, या 'पैलेट में जोड़ें' का उपयोग करें।

किसी स्वैच को बदलने के लिए उसका HEX मान या रंग चुनें, उसे बाएँ या दाएँ ले जाएँ, या हटा दें। कस्टम रंग जोड़ने पर आपकी पसंद का HEX मान स्वीकार किया जाता है। 'रंग लॉक करें' (Lock color) सुविधा किसी चुने हुए स्वैच को तब सुरक्षित रखती है जब 'पैलेट रिफ्रेश करें' या बदला हुआ एक्सट्रैक्शन सेटिंग कोई नया शुरुआती पैलेट बनाता है।

सैंपलिंग और पारदर्शिता में 'स्रोत रंग' (Source color) और 'बैकग्राउंड पर कंपोजिट' (Composite over a background) विकल्प मिलते हैं। स्रोत रंग में प्रासंगिक होने पर कॉपी किए गए कोड में ओपेसिटी शामिल होती है; कंपोजिट चुने गए 'सैंपल बैकग्राउंड' पर ब्लेंड किए गए पिक्सेल को दिखाता है। पैलेट स्वैच स्वयं अपारदर्शी RGB मान होते हैं। संपादित और चुने गए रंगों में कोई अनुमानित स्रोत प्रतिशत नहीं होता है।

ब्राउज़र-डिकोडेबल इमेज ब्राउज़र sRGB सैंपल का उपयोग करती हैं। यदि सामान्यीकृत प्रीव्यू का उपयोग किया जाता है, तो पिकर स्पष्ट रूप से अपने रंगों और निर्देशांकों को अनुमानित के रूप में लेबल करता है।

इस गाइड में दिया गया उदाहरण

एक्सट्रैक्ट करने के लिए रंग: 6; प्रमुख; कोई मैन्युअल परिवर्तन या लॉक नहीं; सेव ऐज़: PNG। स्वचालित एक्सट्रैक्शन ने 512 x 384 पिक्सेल सैंपल किए।

स्रोत छवि
1200 x 900 px
एक्सट्रैक्ट किए गए रंग
6 अपारदर्शी रंग
पैलेट कार्ड
600 x 500 px
डाउनलोड किया गया PNG
9,163 बाइट्स
03

टेक्स्ट और बैकग्राउंड जोड़ी की जांच करें

रंग कंट्रास्ट की जाँच खोलें। रंग नियंत्रणों के साथ टेक्स्ट और बैकग्राउंड सेट करें, HEX कोड दर्ज करें, या किसी भी पक्ष के लिए चुने गए रंग का उपयोग करें। लाइव टेक्स्ट सैंपल आपको जोड़ी की तुलना करने देता है, और अनुपात के साथ अलग-अलग Normal AA, Normal AAA, Large AA और Large AAA परिणाम दिखाई देते हैं।

उद्देश्य के लिए एक जोड़ी चुनें, न कि यह मान लें कि हर एक्सट्रैक्ट किए गए रंग का उपयोग टेक्स्ट के रूप में किया जा सकता है। हल्का आड़ू (peach) और हल्का बैंगनी रंग फोटो में एक साथ अच्छे लग सकते हैं, लेकिन टेक्स्ट और बैकग्राउंड के संयोजन के रूप में खराब हो सकते हैं।

यह नियंत्रण केवल टेक्स्ट कंट्रास्ट के लिए रंगों की उस जोड़ी की जाँच करता है। यह पूर्ण एक्सेसिबिलिटी ऑडिट नहीं है और यह तय नहीं करता है कि टाइपोग्राफी, कीबोर्ड इंटरैक्शन या डिज़ाइन का बाकी हिस्सा उपयोग करने योग्य है या नहीं।

पास होने वाला कंट्रास्ट अनुपात एक उपयोगी जाँच है, न कि इस बात की गारंटी कि पूरा पेज एक्सेसिबल है।

04

मान कॉपी करें या पैलेट एक्सपोर्ट करें

त्वरित हैंडऑफ़ के लिए, एक व्यक्तिगत कोड कॉपी करें या 'पैलेट HEX रंग कॉपी करें' का उपयोग करें। फ़ाइल के लिए, 'सेव ऐज़' चुनें और 'स्टार्ट' चुनें। PNG एक लेबल वाला पैलेट इमेज बनाता है; SVG स्वैच और लेबल को वेक्टर सामग्री के रूप में रखता है; CSS क्रमांकित रंग वेरिएबल प्रदान करता है; JSON में HEX, RGB और HSL मान होते हैं।

बिना संपादित छह-रंगों का उदाहरण palette.png को 600 x 500 पिक्सेल और 9,163 बाइट्स पर एक्सपोर्ट करता है। इसका स्वैच क्रम पैलेट से मेल खाता है। संपादन के बाद आपके अंतिम पैलेट में 1 से 12 रंग हो सकते हैं, भले ही स्वचालित शुरुआती संख्या अलग रही हो।

छोड़ने या रिफ्रेश करने से पहले डाउनलोड करें। अंतिम एक्सपोर्ट सर्वर प्रोसेसिंग के लिए स्रोत और चुने गए रंगों को अपलोड करता है। यह एक नई पैलेट फ़ाइल बनाता है और मूल फोटो को फिर से रंगीन या प्रतिस्थापित नहीं करता है।

PNG और SVG सुविधाजनक दृश्य संदर्भ हैं। CSS और JSON तब उपयोगी होते हैं जब अगले चरण में पुन: प्रयोज्य रंग मानों की आवश्यकता होती है।

उपयोगी विवरण

सामान्य प्रश्न

क्या आईड्रॉपर स्वचालित एक्सट्रैक्शन के समान रंग लौटाता है?

जरूरी नहीं। चुना गया मान एक विशेष स्रोत या प्रीव्यू पिक्सेल का वर्णन करता है। स्वचालित एक्सट्रैक्शन सैंपल किए गए पिक्सेल को समूहीकृत करता है और औसत रंग लौटा सकता है।

क्या पारदर्शी पिक्सेल गिने जाते हैं?

पूरी तरह से पारदर्शी पिक्सेल को एक्सट्रैक्शन से बाहर रखा जाता है। आंशिक रूप से पारदर्शी पिक्सेल का भार कम होता है। स्रोत सैंपलिंग ओपेसिटी दिखा सकती है, लेकिन एक्सपोर्ट किए गए पैलेट स्वैच अपारदर्शी होते हैं।

रिफ्रेश करने पर लॉक किए गए रंगों का क्या होता है?

लॉक किए गए रंग पैलेट में बने रहते हैं जबकि नए एक्सट्रैक्ट किए गए रंग अन्य स्थितियों को भर देते हैं। किसी बरकरार या संपादित रंग को कोई बनावटी इमेज प्रतिशत नहीं दिया जाता है।

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

सीधे ज्ञात HEX मान दर्ज करें या उपयुक्त स्रोत पिक्सेल चुनें। फोटो लाइटिंग, कम्प्रेशन, कलर मैनेजमेंट और सामान्यीकृत प्रीव्यू सैंपल किए गए मानों को बदल सकते हैं, इसलिए स्वचालित फोटो पैलेट मूल ब्रांड विनिर्देश का प्रमाण नहीं है।

आपकी बारी

एक ऐसा पैलेट बनाएं जिसे आप अपने अगले डिज़ाइन में ले जा सकें

एक नमूना आज़माएं या अपनी खुद की फ़ाइल का उपयोग करें, और साझा करने से पहले परिणाम की समीक्षा करें।

इमेज कलर पिकर खोलें

छवि विवरण

भाषा38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

अपनी भाषा चुनें। वीडियो ट्यूटोरियल में वर्तमान में अंग्रेजी नैरेशन का उपयोग किया जाता है।