किसी भी तस्वीर से प्रमुख और पूरक HEX/RGB रंग पैलेट निकालें और डिज़ाइन में उपयोग करें।
ब्रांडिंग, वेब डिज़ाइन, डिजिटल इलस्ट्रेशन और यूआई थीमिंग में किसी प्रेरणादायक फोटोग्राफ या मूड-बोर्ड से प्राकृतिक रूप से संतुलित और सामंजस्यपूर्ण रंग पैलेट निकालना एक आधारभूत कौशल है। किसी छवि के सबसे प्रमुख और पूरक रंगों को मैन्युअल रूप से आईड्रॉपर से चुनना थकाऊ होता है और यह पूरे दृश्य के रंग संतुलन का सटीक प्रतिनिधित्व नहीं कर पाता। यह टूल के-मीन्स क्लस्टरिंग (k-means clustering) और मीडियन-कट क्वांटाइजेशन एल्गोरिदम का उपयोग करके सीधे कैनवास पिक्सेल डेटा से 6 प्रमुख रंगों का एक सुरुचिपूर्ण पैलेट तैयार करता है।
एक वास्तविक वेब डिज़ाइन परिदृश्य देखें: एक यूआई डिज़ाइनर एक ट्रैवल बुकिंग वेबसाइट के लिए एक सुंदर हिमालयी सूर्यास्त की तस्वीर (JPG, 3.8 MB) से रंग प्रेरणा लेना चाहता है। वह तस्वीर को टूल में लोड करता है। क्लस्टरिंग एल्गोरिदम 12,000 प्रतिनिधि पिक्सेल नमूनों का विश्लेषण करता है और रंग घनत्व के आधार पर 6 प्रमुख स्वाचेस को अलग करता है: डीप नेवी #1B263B, डस्की पर्पल #415A77, वार्म कोरल #E07A5F, सनसेट गोल्ड #F4A261, सॉफ्ट सैंड #F2CC8F, और आइस ब्लू #E0E1DD। टूल न केवल हेक्स और आरजीबी कोड दिखाता है, बल्कि तत्काल उपयोग के लिए रेडी-टू-कॉपी CSS कस्टम प्रॉपर्टीज (वेरिएबल्स) भी तैयार कर देता है।
आपकी तस्वीरें, पैलेट प्राथमिकताएं और उत्पन्न कोड पूरी तरह आपके स्थानीय वेब ब्राउज़र के इन-मेमोरी वातावरण में संसाधित होते हैं। कोई भी छवि संपत्ति किसी बाहरी सर्वर पर अपलोड नहीं की जाती है, जिससे पूर्ण रचनात्मक गोपनीयता बनी रहती है।
ClusterCentroid(k) = (1 / Nk) × Σ(Pixel_i) for Pixel_i in Cluster_k [RGB Space]
RGB 3D रंग अंतरिक्ष में पिक्सेल नमूनों पर k-मीन्स क्लस्टरिंग एल्गोरिदम लागू किया जाता है; विभिन्न रंग समूहों के ज्यामितीय केंद्रों (Centroids) से प्रमुख पैलेट शेड्स निकाले जाते हैं।
:root { --color-primary: #...; } ब्लॉक को पेस्ट करें ताकि पूरी वेबसाइट में सुसंगत रंग थीमिंग लागू हो सके।#E07A5F), RGB (rgb(224, 122, 95)), और HSL (hsl(13°, 68%, 63%)) मान तुरंत देख और कॉपी कर सकते हैं।