टूल
किसी भी वेबसाइट का कलर पैलेट
वेबसाइट का पता डालें और उसका पैलेट पाएँ: हर रंग अपनी भूमिका के साथ, hex कोड, CSS variables, Tailwind थीम या JSON के रूप में।
यह कैसे काम करता है
Stylepack साइट को असली ब्राउज़र में खोलता है, चार चौड़ाइयों पर और दोनों थीम में वह मापता है जो रेंडर होता है (न कि जो stylesheet कहती है), और नतीजे को डिज़ाइन पैक के रूप में रखता है। पहले से मापी गई साइट तुरंत जवाब देती है; नई साइट में एक मिनट से कम लगता है। इस पेज का हर मान उसी पैक से आता है।
सवाल
पैलेट कैसे मापा जाता है?
साइट को असली ब्राउज़र में रेंडर किया जाता है और बैकग्राउंड, टेक्स्ट, बटन, लिंक और बॉर्डर के रंग पेज से पढ़े जाते हैं, फिर उन्हें समूहों में बाँटकर भूमिका के नाम दिए जाते हैं (background, foreground, primary, border वग़ैरह)। एक्सेंट उसके प्राइमरी बटन और लिंक का रंग है।
क्या इसमें डार्क मोड के रंग भी हैं?
जब साइट में डार्क थीम हो, तो उसे भी मापा जाता है और CSS में मिलते-जुलते मानों वाला dark ब्लॉक होता है।
क्या मुझे पैलेट Tailwind या Figma में मिल सकता है?
नतीजे में hex कोड, CSS variables, Tailwind v4 थीम और JSON मिलते हैं। डिज़ाइन पैक में W3C design tokens format में tokens.json भी होती है, जिसे Style Dictionary और Figma plugins पढ़ते हैं।