टूल

किसी भी वेबसाइट का कलर पैलेट

वेबसाइट का पता डालें और उसका पैलेट पाएँ: हर रंग अपनी भूमिका के साथ, hex कोड, CSS variables, Tailwind थीम या JSON के रूप में।

आज़माएँstripe.com linear.app airbnb.com

airbnb.com

4 दिन पहले मापा गया।

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff

1#ffffff  background
2#dddddd  surface
3#f2f2f2  surface-2
4#222222  foreground
5#6c6c6c  muted-foreground
6#da1249  primary
7#ffffff  on-primary
8#ffffff  border

पूरा जवाब वाला पेज खोलें डिज़ाइन पैक खोलें

यह कैसे काम करता है

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 पढ़ते हैं।