टूल

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

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

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

stripe.com

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

background#ffffffsurface#e5edf5surface-2#ffe0efsurface-3#ffe0d1foreground#061b31muted-foreground#64748dprimary#533afdon-primary#ffffff

1#ffffff  background
2#e5edf5  surface
3#ffe0ef  surface-2
4#ffe0d1  surface-3
5#061b31  foreground
6#64748d  muted-foreground
7#533afd  primary
8#ffffff  on-primary
9#0f4d29  secondary
10#e5edf5  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 पढ़ते हैं।