इमेज कलर पिकर और पैलेट एक्सट्रैक्टर
सटीक रंग पाने के लिए इमेज पर कहीं भी क्लिक करें। नीचे का पैलेट हर इमेज के लिए अपडेट होता है। अपनी इमेज खोलें, ड्रॉप करें या पेस्ट करें, वह आपके ब्राउज़र से बाहर कभी नहीं जाती।
उदाहरण: एक लैंडिंग पेज डिज़ाइन
कर्सर के नीचे का रंग
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)चुने गए रंग
रंग यहां जमा करने के लिए इमेज पर क्लिक करें।
इस इमेज का कलर पैलेट
पैलेट लोड हो रहा है...इमेज से रंग कैसे चुनें
- इमेज खोलें, ड्रॉप करें या पेस्ट करें। सिस्टम शॉर्टकट से कॉपी किया गया स्क्रीनशॉट सीधे पेस्ट हो जाता है।
- इमेज पर कर्सर घुमाएं। magnifier कर्सर के आसपास के पिक्सल दिखाता है, ताकि आप एक पिक्सल की border पर भी ठीक से टिक सकें।
- चुनने के लिए क्लिक (या टैप) करें। दाईं ओर कॉपी बटन के साथ HEX, RGB और HSL दिखते हैं, और रंग "चुने गए रंग" में जुड़ जाता है।
कीबोर्ड पर, Tab से इमेज पर फ़ोकस करें, arrow keys से घूमें (Shift के साथ 10 पिक्सल) और चुनने के लिए Enter दबाएं।
इमेज से कलर पैलेट कैसे निकालें
पैलेट मिलते-जुलते पिक्सल को ग्रुप करता है और सबसे आम रंग पहले दिखाता है, साथ में यह भी कि हर रंग इमेज का कितना हिस्सा घेरता है। 3 से 12 रंगों के बीच चुनें: कम रंग चुनने पर ब्रैंड कलर मिलते हैं, ज़्यादा चुनने पर borders और shadows भी सामने आते हैं। इसे :root CSS variables, Tailwind theme.extend.colors ब्लॉक, या HEX कोड की सादी लिस्ट के रूप में कॉपी करें।
उदाहरण
- स्क्रीनशॉट से ब्रैंड के रंग मिलाना। ऊपर की उदाहरण इमेज और 6 रंगों के साथ पैलेट ये रंग देता है: lavender बैकग्राउंड (
#f2f1fd, 73% पिक्सल), कार्ड का सफ़ेद (#fcfcfd), borders और लोगो में इस्तेमाल हुए दो हल्के ग्रे, बटनों का violet (#6049f0) और गहरा टेक्स्ट (#3c3b62): stylesheet के लिए ज़रूरी पूरा सेट। - कंट्रास्ट चेक करना। टेक्स्ट का रंग और उसके पीछे का बैकग्राउंड चुनें, फिर ship करने से पहले दोनों HEX वैल्यू किसी contrast checker में मिलाएं।
- फ़ोटो से थीम बनाना। प्रोडक्ट की फ़ोटो ड्रॉप करें, 5 रंग सेट करें और Tailwind ब्लॉक अपने config में पेस्ट करें, ताकि लैंडिंग पेज उसी फ़ोटो के हिसाब से स्टाइल हो।
कलर पिकर से जुड़े सवाल
क्या मेरी इमेज अपलोड होती है?
नहीं। इमेज आपके ब्राउज़र में एक canvas पर बनाई जाती है और हर पिक्सल लोकली पढ़ा जाता है। आपके डिवाइस से कुछ बाहर नहीं जाता, इसीलिए यह गोपनीय मॉकअप के साथ भी काम करता है।
चुना गया रंग मेरे डिज़ाइन टूल से थोड़ा अलग क्यों है?
JPG और WebP compression पिक्सल वैल्यू को थोड़ा बदल देता है, और स्क्रीनशॉट में ओरिजिनल फ़ाइल से अलग color profile हो सकता है। ब्रैंड के सटीक रंगों के लिए डिज़ाइन के PNG export से रंग चुनें।
पैलेट कैसे निकाला जाता है?
इमेज को छोटा करके उसकी सबसे लंबी साइड लगभग 160 पिक्सल कर दी जाती है और रंगों को k-means clustering से ग्रुप किया जाता है। हर swatch एक ग्रुप का औसत है और प्रतिशत उस ग्रुप में आए पिक्सल का हिस्सा है। एक ही इमेज से हमेशा एक ही पैलेट मिलता है।
कौन से इमेज फ़ॉर्मेट चलते हैं?
जो भी आपका ब्राउज़र दिखा सके: PNG, JPG, WebP, GIF (पहला फ़्रेम), AVIF और SVG। आप clipboard से सीधे स्क्रीनशॉट भी पेस्ट कर सकते हैं।
क्या पैलेट Tailwind CSS में इस्तेमाल हो सकता है?
हां। Tailwind टैब आपको theme.extend.colors ब्लॉक देता है। इसे tailwind.config.js में पेस्ट करें और bg-palette-100 या text-palette-300 जैसी classes इस्तेमाल करें।