{ "@context": "https://schema.org", "@type": "Article", "@id": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web", "url": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web", "identifier": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web", "name": "कैमरे से ली गई रंग को अपनी वेबसाइट के CSS Variables में कैसे बदलें", "headline": "कैमरे से ली गई रंग को अपनी वेबसाइट के CSS Variables में कैसे बदलें", "description": "कैमरे से असली रंग capture करें, HSL में बदलें और मिनटों में CSS variables और design tokens बनाएं। स्टेप-बाय-स्टेप गाइड।", "inLanguage": "hi", "datePublished": "2026-08-25", "dateModified": "2026-08-26", "author": { "@type": "Person", "name": "Lubor Šimůnek" }, "publisher": { "@type": "Organization", "name": "lapnito.cz s.r.o.", "url": "https://appstoryo.com" }, "isPartOf": { "@type": "WebSite", "name": "AppStoryo", "url": "https://appstoryo.com" }, "license": "https://creativecommons.org/licenses/by/4.0/", "keywords": [ "डिज़ाइन", "article", "AppStoryo" ], "articleSection": "डिज़ाइन", "image": "https://appstoryo.com/upload/blog/camera-color-to-css-variables-web-hero.jpg", "encoding": [ { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.pdf", "encodingFormat": "application/pdf" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.md", "encodingFormat": "text/markdown" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.txt", "encodingFormat": "text/plain" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.json", "encodingFormat": "application/json" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.epub", "encodingFormat": "application/epub+zip" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.jats.xml", "encodingFormat": "application/xml" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.bib", "encodingFormat": "application/x-bibtex" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.ris", "encodingFormat": "application/x-research-info-systems" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/hi/blog/camera-color-to-css-variables-web.csl.json", "encodingFormat": "application/vnd.citationstyles.csl+json" } ], "cite": "Lubor Šimůnek (2026). कैमरे से ली गई रंग को अपनी वेबसाइट के CSS Variables में कैसे बदलें. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/hi/blog/camera-color-to-css-variables-web", "sections": [ { "level": 2, "heading": "डिज़ाइनर असल दुनिया से रंग क्यों लेते हैं", "text": "सबसे बेहतरीन रंग पैलेट शायद ही कभी स्क्रीन पर बनते हैं। ये एक कपड़े से आते हैं जो किसी फैशन ब्रांड की पहचान तय करता है, किसी यात्रा में खींची दीवार से जो ट्रैवल साइट का मेन कलर बन जाती है, या किसी क्लाइंट के फिज़िकल प्रोडक्ट से जिसे डिजिटल में सटीक रूप से दिखाना हो। भौतिक सामग्री में एक भावनात्मक प्रामाणिकता होती है जिसे सिंथेटिक स्वॉच शायद ही दोहरा सकते हैं।\n\nचुनौती हमेशा अनुवाद की रही है: रंग दिखता है, पर कोड चाहिए।" }, { "level": 2, "heading": "CSS Variables की मूल बातें", "text": "CSS कस्टम प्रॉपर्टीज — जिन्हें CSS variables कहते हैं — एक बार मान को परिभाषित करके उसे हर जगह फिर से उपयोग करने की सुविधा देती हैं। इन्हें :root में declare करें ताकि पेज का हर element इन्हें inherit कर सके:\n\n:root {\n --color-brand-500: hsl(220, 60%, 45%);\n}\n\nएक जगह मान बदलें और सभी components में बदलाव स्वतः लागू हो जाएगा।" }, { "level": 2, "heading": "चरण-दर-चरण: कैमरे से CSS Variable तक", "text": "Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) खोलें, लाइव कैमरा किसी भी सामग्री — दीवार, पैकेजिंग, प्रिंटेड कैटलॉग — की तरफ करें और रंग को lock करने के लिए टैप करें। ऐप तुरंत HEX, RGB और HSL values दिखाता है। एक tap में HSL value copy करें।\n\nइसे सीधे stylesheet में paste करें और केवल lightness adjust करके पूरी color scale बनाएं:\n\n:root {\n --color-brand-900: hsl(220, 60%, 20%);\n --color-brand-500: hsl(220, 60%, 45%);\n --color-brand-100: hsl(220, 60%, 90%);\n}" }, { "level": 2, "heading": "Design Tokens और Figma Integration", "text": "Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) आपको saved palette को JSON file के रूप में export करने देता है — वही format जो Figma का Tokens plugin और Style Dictionary जैसे tools natively support करते हैं। Color harmonies फीचर रंग capture करते ही complementary और triadic variants सुझाता है, ताकि laptop खोलने से पहले ही पूरी palette तैयार हो जाए।\n\nपूरा workflow — कैमरा capture, JSON export, CSS variables — भौतिक दुनिया और stylesheet के बीच की दूरी को मात्र कुछ मिनटों में समेट देता है।\n\nColor Picker Camera: HEX RGB को iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) या Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) पर मुफ़्त डाउनलोड करें — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।" } ], "text": "डिज़ाइनर असल दुनिया से रंग क्यों लेते हैं\n\nसबसे बेहतरीन रंग पैलेट शायद ही कभी स्क्रीन पर बनते हैं। ये एक कपड़े से आते हैं जो किसी फैशन ब्रांड की पहचान तय करता है, किसी यात्रा में खींची दीवार से जो ट्रैवल साइट का मेन कलर बन जाती है, या किसी क्लाइंट के फिज़िकल प्रोडक्ट से जिसे डिजिटल में सटीक रूप से दिखाना हो। भौतिक सामग्री में एक भावनात्मक प्रामाणिकता होती है जिसे सिंथेटिक स्वॉच शायद ही दोहरा सकते हैं।\n\nचुनौती हमेशा अनुवाद की रही है: रंग दिखता है, पर कोड चाहिए।\n\nCSS Variables की मूल बातें\n\nCSS कस्टम प्रॉपर्टीज — जिन्हें CSS variables कहते हैं — एक बार मान को परिभाषित करके उसे हर जगह फिर से उपयोग करने की सुविधा देती हैं। इन्हें :root में declare करें ताकि पेज का हर element इन्हें inherit कर सके:\n\n:root {\n --color-brand-500: hsl(220, 60%, 45%);\n}\n\nएक जगह मान बदलें और सभी components में बदलाव स्वतः लागू हो जाएगा।\n\nचरण-दर-चरण: कैमरे से CSS Variable तक\n\nColor Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) खोलें, लाइव कैमरा किसी भी सामग्री — दीवार, पैकेजिंग, प्रिंटेड कैटलॉग — की तरफ करें और रंग को lock करने के लिए टैप करें। ऐप तुरंत HEX, RGB और HSL values दिखाता है। एक tap में HSL value copy करें।\n\nइसे सीधे stylesheet में paste करें और केवल lightness adjust करके पूरी color scale बनाएं:\n\n:root {\n --color-brand-900: hsl(220, 60%, 20%);\n --color-brand-500: hsl(220, 60%, 45%);\n --color-brand-100: hsl(220, 60%, 90%);\n}\n\nDesign Tokens और Figma Integration\n\nColor Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) आपको saved palette को JSON file के रूप में export करने देता है — वही format जो Figma का Tokens plugin और Style Dictionary जैसे tools natively support करते हैं। Color harmonies फीचर रंग capture करते ही complementary और triadic variants सुझाता है, ताकि laptop खोलने से पहले ही पूरी palette तैयार हो जाए।\n\nपूरा workflow — कैमरा capture, JSON export, CSS variables — भौतिक दुनिया और stylesheet के बीच की दूरी को मात्र कुछ मिनटों में समेट देता है।\n\nColor Picker Camera: HEX RGB को iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) या Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) पर मुफ़्त डाउनलोड करें — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।", "markdown": "## डिज़ाइनर असल दुनिया से रंग क्यों लेते हैं\n\nसबसे बेहतरीन रंग पैलेट शायद ही कभी स्क्रीन पर बनते हैं। ये एक कपड़े से आते हैं जो किसी फैशन ब्रांड की पहचान तय करता है, किसी यात्रा में खींची दीवार से जो ट्रैवल साइट का मेन कलर बन जाती है, या किसी क्लाइंट के फिज़िकल प्रोडक्ट से जिसे डिजिटल में सटीक रूप से दिखाना हो। भौतिक सामग्री में एक भावनात्मक प्रामाणिकता होती है जिसे सिंथेटिक स्वॉच शायद ही दोहरा सकते हैं।\n\nचुनौती हमेशा अनुवाद की रही है: रंग दिखता है, पर कोड चाहिए।\n\n## CSS Variables की मूल बातें\n\nCSS कस्टम प्रॉपर्टीज — जिन्हें CSS variables कहते हैं — एक बार मान को परिभाषित करके उसे हर जगह फिर से उपयोग करने की सुविधा देती हैं। इन्हें `:root` में declare करें ताकि पेज का हर element इन्हें inherit कर सके:\n\n```\n:root {\n --color-brand-500: hsl(220, 60%, 45%);\n}\n```\n\nएक जगह मान बदलें और सभी components में बदलाव स्वतः लागू हो जाएगा।\n\n## चरण-दर-चरण: कैमरे से CSS Variable तक\n\n**[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)** खोलें, लाइव कैमरा किसी भी सामग्री — दीवार, पैकेजिंग, प्रिंटेड कैटलॉग — की तरफ करें और रंग को lock करने के लिए टैप करें। ऐप तुरंत HEX, RGB और HSL values दिखाता है। एक tap में HSL value copy करें।\n\nइसे सीधे stylesheet में paste करें और केवल lightness adjust करके पूरी color scale बनाएं:\n\n```\n:root {\n --color-brand-900: hsl(220, 60%, 20%);\n --color-brand-500: hsl(220, 60%, 45%);\n --color-brand-100: hsl(220, 60%, 90%);\n}\n```\n\n## Design Tokens और Figma Integration\n\n**[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)** आपको saved palette को JSON file के रूप में export करने देता है — वही format जो Figma का Tokens plugin और Style Dictionary जैसे tools natively support करते हैं। Color harmonies फीचर रंग capture करते ही complementary और triadic variants सुझाता है, ताकि laptop खोलने से पहले ही पूरी palette तैयार हो जाए।\n\nपूरा workflow — कैमरा capture, JSON export, CSS variables — भौतिक दुनिया और stylesheet के बीच की दूरी को मात्र कुछ मिनटों में समेट देता है।\n\n**Color Picker Camera: HEX RGB को [iOS](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) या [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker) पर मुफ़्त डाउनलोड करें** — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।", "html": "

डिज़ाइनर असल दुनिया से रंग क्यों लेते हैं

सबसे बेहतरीन रंग पैलेट शायद ही कभी स्क्रीन पर बनते हैं। ये एक कपड़े से आते हैं जो किसी फैशन ब्रांड की पहचान तय करता है, किसी यात्रा में खींची दीवार से जो ट्रैवल साइट का मेन कलर बन जाती है, या किसी क्लाइंट के फिज़िकल प्रोडक्ट से जिसे डिजिटल में सटीक रूप से दिखाना हो। भौतिक सामग्री में एक भावनात्मक प्रामाणिकता होती है जिसे सिंथेटिक स्वॉच शायद ही दोहरा सकते हैं।

चुनौती हमेशा अनुवाद की रही है: रंग दिखता है, पर कोड चाहिए।

CSS Variables की मूल बातें

CSS कस्टम प्रॉपर्टीज — जिन्हें CSS variables कहते हैं — एक बार मान को परिभाषित करके उसे हर जगह फिर से उपयोग करने की सुविधा देती हैं। इन्हें :root में declare करें ताकि पेज का हर element इन्हें inherit कर सके:

:root {\n  --color-brand-500: hsl(220, 60%, 45%);\n}

एक जगह मान बदलें और सभी components में बदलाव स्वतः लागू हो जाएगा।

चरण-दर-चरण: कैमरे से CSS Variable तक

Color Picker Camera: HEX RGB खोलें, लाइव कैमरा किसी भी सामग्री — दीवार, पैकेजिंग, प्रिंटेड कैटलॉग — की तरफ करें और रंग को lock करने के लिए टैप करें। ऐप तुरंत HEX, RGB और HSL values दिखाता है। एक tap में HSL value copy करें।

इसे सीधे stylesheet में paste करें और केवल lightness adjust करके पूरी color scale बनाएं:

:root {\n  --color-brand-900: hsl(220, 60%, 20%);\n  --color-brand-500: hsl(220, 60%, 45%);\n  --color-brand-100: hsl(220, 60%, 90%);\n}

Design Tokens और Figma Integration

Color 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 पर मुफ़्त डाउनलोड करें — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।

" }