appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/hiकैमरे से ली गई रंग को अपनी वेबसाइट के CSS Variables में कैसे बदलेंLubor Šimůnek25082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0कैमरे से असली रंग capture करें, HSL में बदलें और मिनटों में CSS variables और design tokens बनाएं। स्टेप-बाय-स्टेप गाइड।
डिज़ाइनarticleAppStoryoडिज़ाइनर असल दुनिया से रंग क्यों लेते हैंसबसे बेहतरीन रंग पैलेट शायद ही कभी स्क्रीन पर बनते हैं। ये एक कपड़े से आते हैं जो किसी फैशन ब्रांड की पहचान तय करता है, किसी यात्रा में खींची दीवार से जो ट्रैवल साइट का मेन कलर बन जाती है, या किसी क्लाइंट के फिज़िकल प्रोडक्ट से जिसे डिजिटल में सटीक रूप से दिखाना हो। भौतिक सामग्री में एक भावनात्मक प्रामाणिकता होती है जिसे सिंथेटिक स्वॉच शायद ही दोहरा सकते हैं।
चुनौती हमेशा अनुवाद की रही है: रंग दिखता है, पर कोड चाहिए।
CSS Variables की मूल बातेंCSS कस्टम प्रॉपर्टीज — जिन्हें CSS variables कहते हैं — एक बार मान को परिभाषित करके उसे हर जगह फिर से उपयोग करने की सुविधा देती हैं। इन्हें :root में declare करें ताकि पेज का हर element इन्हें inherit कर सके:
:root {
--color-brand-500: hsl(220, 60%, 45%);
}एक जगह मान बदलें और सभी components में बदलाव स्वतः लागू हो जाएगा।
चरण-दर-चरण: कैमरे से CSS Variable तकColor Picker Camera: HEX RGB खोलें, लाइव कैमरा किसी भी सामग्री — दीवार, पैकेजिंग, प्रिंटेड कैटलॉग — की तरफ करें और रंग को lock करने के लिए टैप करें। ऐप तुरंत HEX, RGB और HSL values दिखाता है। एक tap में HSL value copy करें।
इसे सीधे stylesheet में paste करें और केवल lightness adjust करके पूरी color scale बनाएं:
:root {
--color-brand-900: hsl(220, 60%, 20%);
--color-brand-500: hsl(220, 60%, 45%);
--color-brand-100: hsl(220, 60%, 90%);
}Design Tokens और Figma IntegrationColor Picker Camera: HEX RGB आपको saved palette को JSON file के रूप में export करने देता है — वही format जो Figma का Tokens plugin और Style Dictionary जैसे tools natively support करते हैं। Color harmonies फीचर रंग capture करते ही complementary और triadic variants सुझाता है, ताकि laptop खोलने से पहले ही पूरी palette तैयार हो जाए।
पूरा workflow — कैमरा capture, JSON export, CSS variables — भौतिक दुनिया और stylesheet के बीच की दूरी को मात्र कुछ मिनटों में समेट देता है।
Color Picker Camera: HEX RGB को iOS या Android पर मुफ़्त डाउनलोड करें — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।