---
title: "रंग"
description: "कलर रोल, मोनोक्रोम प्राइमरी, अकेला ऐक्सेंट, और हर स्कीम कैसे जनरेट और जाँची जाती है।"
url: "https://tanrei.chnotchy.com/hi/foundations/color/"
last_updated: 2026-10-23T21:17:12.000Z
---

# रंग

> कलर रोल, मोनोक्रोम प्राइमरी, अकेला ऐक्सेंट, और हर स्कीम कैसे जनरेट और जाँची जाती है।

Tanrei किसी कंपोनेंट से कभी रंग चुनने को नहीं कहता। कंपोनेंट एक **रोल** माँगते हैं, जैसे `primary` या `surface-container`, और सक्रिय थीम तय करती है कि उस रोल में कौन-सा रंग भरेगा। रोल Tanrei की शब्दावली से तय होते हैं, और उनके मान हर डिज़ाइन सिस्टम की लेयर से।

## रोल

- **इंटेंट:** `primary`, `secondary`, और स्टेटस के चार इंटेंट `error`, `success`, `warning` और `info`। हर एक चार के सेट में आता है: रंग, उस पर रखे कॉन्टेंट के लिए उसका `on-` रंग, एक हल्का `-container`, और `on-…-container`।
- **सरफ़ेस:** `surface`, पाँच स्टेप की सीढ़ी `surface-container-lowest` … `surface-container-highest`, और साथ में `surface-dim` और `surface-bright`। किसी भी सरफ़ेस पर रखा कॉन्टेंट `on-surface` या उससे हल्का `on-surface-variant` इस्तेमाल करता है।
- **आउटलाइन:** `outline` और `outline-variant` (नीचे देखें)।
- **इनवर्स** रोल, उन एलिमेंट के लिए जो जान-बूझकर थीम को पलट देते हैं, जैसे स्नैकबार।
- **फ़िक्स्ड** रोल, जो लाइट और डार्क में एक ही टोन रखते हैं।
- **यूटिलिटी:** `scrim`, `shadow`, `focus-ring` और एलिवेशन में इस्तेमाल होने वाले रिंग और शैडो के रंग।

फ़िल को हमेशा उसके अपने `on-` रोल के साथ जोड़ें। कंट्रास्ट की जाँचें इसी जोड़ी की गारंटी देती हैं।

## मोनोक्रोम प्राइमरी

डिफ़ॉल्ट थीम में `primary` लाइट मोड में लगभग काला और डार्क मोड में लगभग सफ़ेद है। इसलिए स्क्रीन की सबसे अहम क्रिया उस पर सबसे ज़्यादा कंट्रास्ट वाली चीज़ होती है, और वह प्रॉडक्ट के अपने रंगों से कभी होड़ नहीं करती। `secondary` सहायक क्रियाओं के लिए एक नरम न्यूट्रल है।

## एक ऐक्सेंट, किफ़ायत से

ऐक्सेंट कोर शब्दावली का हिस्सा नहीं है। यह एक पैलेट है जिसे डिफ़ॉल्ट Tanrei सिस्टम **घोषित** करता है (सीड `#30a3f0`), जिससे उसे वही चार रोल मिलते हैं जो किसी भी इंटेंट को: `accent`, `on-accent`, `accent-container`, `on-accent-container`। कोर रोल `focus-ring` इसी से रंग लेता है, और कोई नहीं: डिफ़ॉल्ट सिस्टम में `link` प्राइमरी का रंग लेता है, और लिंक अपने पास के टेक्स्ट से अपनी अंडरलाइन से पहचाना जाता है। प्रॉडक्ट अपने पैलेट इसी तरह घोषित करता है — ब्रैंड का ऐसा रंग जिसकी दोबारा गणना नहीं होनी चाहिए, या किसी क्विज़ का “सही” और “ग़लत” — और Material Design 3 की नक़ल करने वाला प्रीसेट `tertiary` को इसी तरह घोषित करता है, बजाय इसके कि Tanrei वह जगह सबके लिए ढोए। ऐक्सेंट को सजावट के लिए इस्तेमाल न करें; जब सब कुछ नीला हो, तो कुछ भी नीला नहीं रहता।

## outline और outline-variant

आउटलाइन के दोनों रोल देखने में मिलते-जुलते हैं और काम उलटे करते हैं।

| रोल | उद्देश्य | कंट्रास्ट |
| --- | --- | --- |
| `outline` | एक **कार्यात्मक सीमा**: अकेली चीज़ जो बताती है कि कंट्रोल कहाँ है, जैसे ख़ाली टेक्स्ट फ़ील्ड, बिना चेक का चेकबॉक्स या आउटलाइन वाला बटन। | हर सरफ़ेस रोल के मुक़ाबले कम से कम 3:1 |
| `outline-variant` | एक **सजावटी बारीक रेखा**: डिवाइडर, कार्ड के बॉर्डर, एलिवेशन की रिंग। इसे हटाने से कोई जानकारी छिपनी नहीं चाहिए। | स्टैंडर्ड कंट्रास्ट पर कोई आवश्यकता नहीं, जहाँ यह कम अल्फ़ा वाला काला या सफ़ेद है। हर सरफ़ेस रोल के मुक़ाबले मध्यम कंट्रास्ट पर कम से कम 3:1 और उच्च पर 4.5:1, और हमेशा `outline` से हल्की |

> [!WARNING]
> **सावधानी**
>
> अगर बॉर्डर ही इस बात का अकेला संकेत है कि कंट्रोल मौजूद है, तो उसे `outline` इस्तेमाल करना होगा। 8% अल्फ़ा की बारीक रेखा देखने में सुहावनी है, और बहुत-से लोगों को दिखती ही नहीं।

## कंट्रास्ट के स्तर

हर थीम कंट्रास्ट के तीन स्तरों पर मौजूद है। **स्टैंडर्ड** डिफ़ॉल्ट है। **मध्यम** और **उच्च** कॉन्टेंट के रोल को छोरों की ओर ले जाते हैं और आउटलाइन के दोनों रोल को मज़बूत करते हैं। वेब पर `prefers-contrast: more` के लिए उच्च कंट्रास्ट अपने आप लागू होता है; नेटिव प्लैटफ़ॉर्म अपनी-अपनी सिस्टम सेटिंग के अनुसार चलते हैं। इसे यहाँ आज़माएँ (स्विच पूरे पेज पर लागू होता है):

## स्कीम कैसे जनरेट होती हैं

रंग हाथ से नहीं चुने जाते। एक सिस्टम फ़ाइल (`tokens/systems/core.system.json`) पैलेट घोषित करती है — ऐक्सेंट और error के लिए एक-एक सीड रंग, न्यूट्रल का ह्यू और क्रोमा — और डेटा के रूप में बताती है कि हर रोल लाइट और डार्क में, कंट्रास्ट के हर स्तर पर, किस पैलेट का कौन-सा टोन लेता है। बिल्ड के समय एक जनरेटर:

1. Apache-2.0 लाइसेंस वाली `material-color-utilities` लाइब्रेरी से हर मुख्य रंग को HCT कलर स्पेस में एक **टोनल पैलेट** में बदलता है, जहाँ टोन का कंट्रास्ट से अनुमान लगाने लायक़ संबंध है;
2. न्यूट्रल पैलेट को थीम के क्रोमा तक सीमित करता है, जो शुद्ध धूसर रंगों के लिए डिफ़ॉल्ट रूप से शून्य है;
3. लाइट और डार्क के लिए, कंट्रास्ट के हर स्तर पर, हर रोल को एक टोन देता है;
4. नतीजे को `tokens/generated/` के अंतर्गत DTCG फ़ाइलों के रूप में लिखता है।

जनरेटर के एल्गोरिदम का एक वर्शन होता है (`specVersion`), इसलिए मैपिंग में बदलाव हर रंग में चुपचाप आया खिसकाव नहीं, बल्कि सोच-समझकर किया गया, रिव्यू हो सकने वाला क़दम होता है।

## CI में लागू किए गए इनवेरिएंट

थीम और कंट्रास्ट के सभी छह संयोजनों के लिए टोकन बिल्ड तब तक विफल रहता है जब तक:

- हर `(role, on-role)` जोड़ी **4.5:1** तक, और दोनों उच्च-कंट्रास्ट स्कीमों में **7:1** तक, न पहुँचे;
- `outline` हर सरफ़ेस रोल के मुक़ाबले **3:1** तक न पहुँचे;
- `focus-ring` उन सरफ़ेस के मुक़ाबले **3:1** तक न पहुँचे जिन पर वह बनती है।

बिल्ड पास कराने के लिए थ्रेशोल्ड ढीला नहीं किया जा सकता। रोल और मानों की पूरी सूची [कलर टोकन रेफ़रेंस](https://tanrei.chnotchy.com/hi/tokens/color/) में देखें।