रंग
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
अपने प्रॉडक्ट की हैरारकी, स्थिति, और ब्रैंड के बारे में बताने वाली, ज़्यादा आसान और निजी कलर स्कीम बनाएं. पहने जाने वाले डिवाइसों के लिए डिज़ाइन करते समय, रंग का इस्तेमाल करना ज़रूरी होता है. इससे, डिवाइस को पढ़ने में आसानी होती है, उसे इस्तेमाल करने में आसानी होती है, और वह विज़ुअल तौर पर आकर्षक दिखता है. साथ ही, डिवाइस के बारे में ज़्यादा जानकारी मिलती है. खास तौर पर, छोटी स्क्रीन पर ऐसा करना ज़रूरी होता है.
यहां दिए गए सिद्धांतों में, सभी थीम में रंग इस्तेमाल करने का तरीका बताया गया है.
काले रंग से बनाना
स्मार्टवॉच को काले बैकग्राउंड के साथ डिज़ाइन किया गया है, न कि फ़ोन डिवाइसों के लिए इस्तेमाल किए जाने वाले रंगीन बैकग्राउंड के साथ. गहरे रंग वाली थीम, कम रोशनी वाले माहौल के लिए होती हैं और हल्के रंग वाली थीम, दिन के उजाले के लिए होती हैं. हालांकि, स्मार्टवॉच के यूज़र इंटरफ़ेस (यूआई) को दिन और रात, दोनों में आसानी से काम करना चाहिए. इसलिए, स्मार्टवॉच के लिए कलर टोकन खास तौर पर बनाए जाने चाहिए.
नई कलर भूमिकाएं
Material 3 कलर सिस्टम में तीन ऐक्सेंट कलर और दो नेचुरल सर्फ़ेस कलर का स्ट्रक्चर बरकरार है. हालांकि, इसमें ऐक्सेंट रोल में कंटेनर कलर शामिल किए गए हैं.
इन नई भूमिकाओं की मदद से, विज़ुअल के क्रम में बदलाव किए बिना ज़्यादा जानकारी दी जा सकती है. साथ ही, ज़्यादा क्रोम के साथ सतह के रंग में बदलाव किए जा सकते हैं.
कंटेनर की भूमिकाएं, खास तौर पर टॉगल बटन जैसी स्थितियों को हाइलाइट करने के लिए काम की होती हैं. इसके अलावा, मुख्य ऐक्सेंट का इस्तेमाल करने के बाद, दूसरी स्टाइल देने के लिए भी ये भूमिकाएं काम की होती हैं.
शब्द का मतलब
स्मार्टवॉच के यूज़र इंटरफ़ेस (यूआई) में, रंगों का मतलब साफ़ तौर पर और आसानी से समझ में आना चाहिए. उदाहरण के लिए, लाल रंग से गड़बड़ियों का पता चलता है और हरे रंग से सफलता का. इससे उपयोगकर्ताओं को अतिरिक्त जानकारी के बिना, कार्रवाइयों या स्थितियों को तुरंत समझने में मदद मिलती है. रंग के इस सेमैंटिक इस्तेमाल से, उपयोगकर्ताओं को आपके यूज़र इंटरफ़ेस (यूआई) पर नेविगेट करने और भरोसे के साथ कार्रवाई करने में मदद मिलती है.
रंग की सुलभता (कंट्रास्ट के मुताबिक)
स्मार्टवॉच के यूज़र इंटरफ़ेस (यूआई) में, रंगों का मतलब साफ़ तौर पर और आसानी से समझ में आना चाहिए. उदाहरण के लिए, लाल रंग से गड़बड़ियों का पता चलता है और हरे रंग से सफलता का. इससे उपयोगकर्ताओं को अतिरिक्त जानकारी के बिना, कार्रवाइयों या स्थितियों को तुरंत समझने में मदद मिलती है. रंग के इस सेमैंटिक इस्तेमाल से, उपयोगकर्ताओं को आपके यूज़र इंटरफ़ेस (यूआई) पर नेविगेट करने और भरोसे के साथ कार्रवाई करने में मदद मिलती है.
नया क्या है
विज़ुअल डिज़ाइन सिस्टम में कई अहम अपडेट किए गए हैं. साथ ही, हमने स्टाइल फ़ाउंडेशन, कॉम्पोनेंट, और टाइल डिज़ाइन लाइब्रेरी में किए गए अपडेट के ज़रिए, बेहतर तरीके से एक्सप्रेशन दिखाने की सुविधा भी जोड़ी है.
Material 3 के एक्सप्रेशनिव कलर सिस्टम में ये सुविधाएं शामिल हैं:
- सुलभ रंग संबंधों का बिल्ट-इन सेट
- Material कॉम्पोनेंट के साथ मैप की गई 28 से ज़्यादा कलर भूमिकाएं
- काले रंग से बनाने के लिए, गहरे रंग वाली थीम के लिए पहले से मौजूद रंग
- बंद की गई कलर वैल्यू को बेहतर बनाया गया
- गड़बड़ी के लिए अन्य रंग
- हर कलर रोल के लिए असाइन किए गए डिफ़ॉल्ट रंगों के साथ स्टैटिक बेसलाइन कलर
- डाइनैमिक कलर की सुविधाएं. इनमें सिस्टम/स्मार्टवॉच की होम स्क्रीन और इमेज पर आधारित कलर थीम शामिल हैं
संसाधन
ज़्यादा जानने के लिए, नीचे दिए गए लेख पढ़ें.
Material Design के कलर से जुड़े दिशा-निर्देश
इस पेज पर मौजूद कॉन्टेंट और कोड सैंपल कॉन्टेंट के लाइसेंस में बताए गए लाइसेंस के हिसाब से हैं. Java और OpenJDK, Oracle और/या इससे जुड़ी हुई कंपनियों के ट्रेडमार्क या रजिस्टर किए हुए ट्रेडमार्क हैं.
आखिरी बार 2025-07-26 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2025-07-26 (UTC) को अपडेट किया गया."],[],[],null,["# Color\n\nCreate more accessible, personal color schemes communicating your product's\nhierarchy, state, and brand. When designing for wearables, color plays a crucial\nrole in enhancing legibility, usability, visual appeal, and expression,\nespecially on smaller screens.\n\nThe following principles explain how to use color across themes.\n\nBuild from black\n----------------\n\n\nWatches are designed with a black background, instead of the tinted background\nthat phone devices use. While dark themes are meant for low-light environments\nand light themes for daylight, watch UIs need to function seamlessly both day\nand night. Therefore, color tokens for watches must be specifically tailored. \n\n\u003cbr /\u003e\n\nNew color roles\n---------------\n\n\nThe Material 3 color system retains the structure of three accent colors and two\nneutral surface colors, but introduces container colors within the accent roles.\nThese new roles enable greater expressive potential without disrupting visual\nhierarchy, essentially providing surface color variations with increased chroma.\nContainer roles are particularly useful for highlighting states, such as toggle\nbuttons, or for providing complementary styling when the primary accent is\nalready utilized. \n\n\u003cbr /\u003e\n\nSemantic meaning\n----------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nColor accessibility (contrast compliance)\n-----------------------------------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nWhat's new\n----------\n\nThere are substantial updates to the visual design system and how we elevate\nexpression throughout updates to our style foundations, components, and tiles\ndesign libraries.\n\nThe Material 3 Expressive color system includes the following features:\n\n- Built-in set of accessible color relationships\n- 28+ color roles mapped to Material components\n- Built-in dark theme colors for building from black\n- Improved disabled color values\n- Additional error colors\n- Static baseline color with default colors assigned to each color role\n- Dynamic color features, including System/Watch face, and image-based color themes\n\nResources\n---------\n\nTo learn more, view the following resources.\n\n### Material Design color guidelines\n\n\n[Learn about the latest best practices](https://material.io/color) for color schemes using Material 3\nExpressive. \n\n\u003cbr /\u003e"]]