कलर पैलेट एक्सट्रैक्टर

किसी भी छवि से प्रमुख रंग पैलेट निकालें. हेक्स कोड प्राप्त करें, WCAG एक्सेसिबिलिटी कंट्रास्ट अनुपात की जांच करें, और टेलविंड सीएसएस वेरिएबल्स को तुरंत निर्यात करें।

Shehzad Munir द्वारा निर्मित और अनुरक्षित ·

कलर पैलेट एक्सट्रैक्टर
Loading Color Architect
  • छवि उपकरण
  • मुक्त · कोई साइन-अप नहीं
  • आपके ब्राउज़र में चलता है
  • 6 विशेषताएं
Share

किसी भी छवि से एक रंग पैलेट खींचें

किसी भी छवि को उसके प्रमुख रंगों को खींचने के लिए अपलोड करें, या सटीक पिक्सेल का नमूना लेने के लिए फोटो पर कहीं भी क्लिक करें। Get HEX, RGB, and HSL for every swatch, adjust how many colors to extract, generate analogous / triadic / complementary harmonies, check WCAG contrast (with a one-click auto-fix), and export the palette as CSS variables, SCSS, Tailwind config, JSON, or an SVG swatch sheet.

एक छवि अपलोड करें और एक्सट्रैक्टर उसके प्रमुख रंगों की पहचान करता है, उपयोग के लिए तैयार HEX और RGB मान लौटाता है। यह किसी फ़ोटो से पैलेट बनाने, किसी ब्रांड के रंग से मिलान करने, या डिज़ाइन ऐप के बिना स्क्रीनशॉट में सटीक शेड ढूंढने का सबसे तेज़ तरीका है।

विशेषताएँ

  • समायोज्य 3-12 गिनती के साथ प्रमुख रंग निष्कर्षण
  • सटीक पिक्सेल + देशी आईड्रॉपर चुनने के लिए क्लिक करें
  • एक-टैप कॉपी के साथ HEX, RGB और HSL मान
  • अनुरूप, त्रियादिक और पूरक सामंजस्य
  • ऑटो-फिक्स के साथ WCAG 2.1 AA/AAA कंट्रास्ट चेकर
  • CSS, SCSS, टेलविंड, JSON या SVG नमूने निर्यात करें

कलर पैलेट एक्सट्रैक्टर का उपयोग कैसे करें

  1. 1

    एक छवि अपलोड करें

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

  2. 2

    पैलेट को परिष्कृत करें

    3-12 रंग निकालने के लिए गिनती नियंत्रण को स्लाइड करें, या 'छवि से चुनें' चालू करें और सटीक पिक्सेल का नमूना लेने के लिए किसी भी स्थान पर क्लिक करें।

  3. 3

    निरीक्षण करें और समायोजित करें

    इसके HEX/RGB/HSL को देखने के लिए एक नमूने का चयन करें, हल्केपन को ठीक करें, और सफेद और काले पर WCAG कंट्रास्ट की जांच करें, एक असफल रंग को स्वचालित रूप से ठीक करने के लिए छड़ी को दबाएं।

  4. 4

    निर्यात

    CSS, SCSS, टेलविंड, JSON, या SVG चुनें और कोड कॉपी करें, या अपने डिज़ाइन डॉक्स के लिए एक SVG स्वैच शीट डाउनलोड करें।

सामान्य उपयोग के मामले

  • लोगो या मूडबोर्ड छवि से एक ब्रांड पैलेट बनाएं
  • स्क्रीनशॉट या फोटो में किसी रंग का सटीक हेक्स पकड़ें
  • एक सुलभ, WCAG-संगत यूआई रंग योजना तैयार करें
  • टेलविंड या सीएसएस वेरिएबल को सीधे किसी प्रोजेक्ट में निर्यात करें
  • किसी फ़ोटो से सामंजस्यपूर्ण ग्रेडिएंट और उच्चारण रंग बनाएं

विस्तृत मार्गदर्शिका

डिज़ाइनरों, डेवलपर्स और ब्रांड कार्य के लिए

प्रेरणा को प्रयोग करने योग्य मूल्यों में बदलें, एक ढाल के लिए सूर्यास्त का नमूना लें, एक प्रतियोगी के उच्चारण रंग को उठाएं, या एक नायक की छवि से एक सामंजस्यपूर्ण विषय उत्पन्न करें। प्रसंस्करण आपके ब्राउज़र में होता है, इसलिए आपकी छवियां कभी भी सर्वर पर अपलोड नहीं की जाती हैं।

अक्सर पूछे जाने वाले प्रश्नों

मैं किसी छवि से हेक्स रंग कोड कैसे प्राप्त करूं?

अपनी छवि अपलोड करें और टूल K-मीन्स क्लस्टरिंग का उपयोग करके प्रमुख रंगों को निकालने के लिए स्वचालित रूप से इसका विश्लेषण करता है। प्रत्येक रंग को उसके HEX, RGB और HSL मानों के साथ दिखाया गया है, इसे कॉपी करने के लिए किसी भी रंग पर क्लिक करें।

क्या मैं किसी लोगो से ब्रांड के रंग निकाल सकता हूँ?

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

WCAG कंट्रास्ट चेकिंग क्या है?

WCAG (वेब ​​कंटेंट एक्सेसिबिलिटी दिशानिर्देश) टेक्स्ट और पृष्ठभूमि रंगों के बीच कंट्रास्ट अनुपात को परिभाषित करता है। सामान्य पाठ (एए मानक) को दृष्टिबाधित उपयोगकर्ताओं द्वारा पढ़ने योग्य बनाने के लिए कम से कम 4.5:1 का अनुपात आवश्यक है।

एक्सट्रैक्टर कितने रंगों की पहचान करता है?

आप इसे नियंत्रित करते हैं, एक स्लाइडर आपको 3 से 12 प्रमुख रंगों में से कहीं भी निकालने की सुविधा देता है, जो छवि में उनके दृश्य स्थान और जीवंतता के आधार पर क्रमबद्ध होता है। आप किसी भी सटीक पिक्सेल रंग का नमूना लेने के लिए सीधे फोटो पर भी क्लिक कर सकते हैं।

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

हाँ। टूल उपयोग के लिए तैयार सीएसएस कस्टम प्रॉपर्टी वैरिएबल (--रंग-प्राथमिक: #हेक्स) और टेलविंड कॉन्फिग स्निपेट उत्पन्न करता है जिन्हें आप सीधे अपने प्रोजेक्ट में पेस्ट कर सकते हैं।

मैं किसी छवि से रंग पैलेट कैसे निकालूं?

एक फोटो अपलोड करें और टूल उसके प्रमुख रंगों को निकालता है, प्रत्येक को HEX, RGB और HSL मानों के साथ एक नमूने के रूप में दिखाता है जिसे आप अपने डिज़ाइन के लिए कॉपी कर सकते हैं।

मैं किसी चित्र में रंगों के HEX कोड कैसे प्राप्त कर सकता हूँ?

निकाले गए पैलेट में प्रत्येक प्रमुख रंग के लिए HEX (और RGB/HSL) कोड सूचीबद्ध होता है, ताकि आप सटीक मानों को अपने CSS या डिज़ाइन टूल में कॉपी कर सकें।

क्या मैं किसी लोगो से ब्रांड के रंग निकाल सकता हूँ?

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

क्या मुझे लोगो से सटीक हेक्स कोड मिल सकते हैं?

हाँ: एक्सट्रैक्टर प्रमुख रंगों को हेक्स मानों के रूप में लौटाता है जिन्हें आप सीधे अपने डिज़ाइन टूल में कॉपी कर सकते हैं।

जर्नल से

All articles →