टूल

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

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

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

linear.app

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

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111

1#08090a  background
2#101112  surface
3#1c1d1e  surface-2
4#07220a  surface-3
5#f7f8f8  foreground
6#8a8f98  muted-foreground
7#e5e5e6  primary
8#111111  on-primary
9#5e6ad2  secondary
10#1c1d1e  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 पढ़ते हैं।