रंगों पर गाइड
स्क्रीन के रंगों पर छोटे, काम के गाइड: फ़ॉर्मैट, कंट्रास्ट, पैलेट, डार्क मोड और CSS। हर संख्या गणना से निकली है, हर उदाहरण कॉपी किया जा सकता है।
- OKLCH क्या है: वह कलर फ़ॉर्मैट जो आख़िरकार आपकी आँखों से मेल खाता हैOKLCH किसी रंग को तीन बातों से बताता है: वह कितना हल्का दिखता है, कितना चटक है और उसका ह्यू क्या है। HSL के उलट, यहाँ एक जैसी लाइटनेस हर ह्यू में सच में एक जितनी हल्की दिखती है। इससे पैलेट, hover स्टेट और पढ़ने लायक कंट्रास्ट पहले से अनुमान लगाने लायक हो जाते हैं।28 सितंबर 2026पढ़ने में 4 मिनट
- APCA बनाम WCAG 2: कौन-सी कंट्रास्ट जाँच भरोसेमंद हैकानून WCAG 2 कंट्रास्ट अनुपात माँगता है। APCA एक नया मॉडल है जो पढ़ने में आसानी का अंदाज़ा कहीं बेहतर लगाता है, ख़ासकर डार्क थीम और चटक रंगों में। दोनों जाँचें करने से आपको ऐसा टेक्स्ट मिलता है जो नियमों पर खरा भी है और सच में आसानी से पढ़ा भी जाता है।28 सितंबर 2026पढ़ने में 3 मिनट
- कलर गैमट क्या है: sRGB, Display P3 और गैमट से बाहर के रंगगैमट उन रंगों का सेट है जिन्हें कोई स्क्रीन या कलर स्पेस दिखा सकता है। वेब sRGB पर बना था, लेकिन आज ज़्यादातर फ़ोन और कई लैपटॉप Display P3 दिखाते हैं, जिसमें लाल, हरे और नारंगी रंग साफ़ तौर पर ज़्यादा चटक होते हैं।28 सितंबर 2026पढ़ने में 2 मिनट
- कलर फ़ॉर्मैट समझिए: HEX, RGB, HSL, OKLCH और बाकी सबएक ही रंग को दर्जनों तरीकों से लिखा जा सकता है। यहाँ जानिए कि हर फ़ॉर्मैट का मतलब क्या है, उसे कब इस्तेमाल करें, और एक ही रंग सभी फ़ॉर्मैट में कैसा दिखता है।28 सितंबर 2026पढ़ने में 2 मिनट
- हेक्स कलर कोड समझिए: #RRGGBB कैसे काम करता है#1e90ff जैसा हेक्स कलर कोड हेक्साडेसिमल अंकों की तीन जोड़ियाँ है: लाल, हरी और नीली रोशनी की मात्रा, हर एक 00 (बिल्कुल नहीं) से ff (पूरी, 255) तक। चौथी जोड़ी जोड़ें तो ओपैसिटी तय होती है: 80 का मतलब लगभग 50%, ff का मतलब पूरी तरह ठोस।28 सितंबर 2026पढ़ने में 7 मिनट
- वेबसाइट या ऐप के लिए कलर पैलेट कैसे चुनेंएक ब्रांड रंग से शुरू करें, उससे 50 से 950 तक का स्केल बनाएँ, हल्की रंगत वाले ग्रे और चार सिमेंटिक रंग जोड़ें, फिर हर टेक्स्ट जोड़े का कंट्रास्ट और कलर ब्लाइंडनेस के लिए जाँच करें। शेड आँख से नहीं, OKLCH लाइटनेस से चुनें: सफ़ेद बैकग्राउंड पर टेक्स्ट WCAG AA तभी पास करता है जब लाइटनेस लगभग 0.55 तक गिर जाए, ह्यू चाहे कोई भी हो।28 सितंबर 2026पढ़ने में 7 मिनट
- डार्क मोड कलर: बैकग्राउंड, टेक्स्ट और एक्सेंट रंग कैसे चुनेंशुद्ध काले की जगह #121212 जैसा गहरा ग्रे बैकग्राउंड लें, शुद्ध सफ़ेद की जगह #e5e5e5 जैसा ऑफ़-व्हाइट टेक्स्ट लें, और अपने ब्रांड रंगों के हल्के, कम चटक रूप इस्तेमाल करें। टेक्स्ट को WCAG 2 के साथ APCA से भी जाँचें, क्योंकि डार्क बैकग्राउंड पर WCAG 2 कंट्रास्ट को असल से ज़्यादा आँकता है।28 सितंबर 2026पढ़ने में 7 मिनट
- कलर हार्मनी: पूरक, अनुरूप, त्रिकोणीय और दूसरी रंग योजनाएँकलर हार्मनी कलर व्हील पर तय कोणों पर ह्यू चुनती है: पूरक के लिए 180° दूर, अनुरूप के लिए 30° दूर, त्रिकोणीय के लिए 120° दूर। ह्यू को HSL की जगह OKLCH में घुमाइए, तो सभी रंग एक जितने हल्के रहते हैं और कोई एक ह्यू अनजाने में उभरकर नहीं दिखता।28 सितंबर 2026पढ़ने में 6 मिनट
- CSS color-mix() और रिलेटिव कलर: टिंट, hover और पारदर्शिताcolor-mix() दो रंगों को आपके चुने हुए कलर स्पेस में मिलाता है, और रिलेटिव कलर सिंटैक्स किसी मौजूदा रंग का एक चैनल बदलने देता है, जैसे oklch(from var(--brand) calc(l - 0.1) c h)। दोनों ब्राउज़र में चलते हैं, CSS वेरिएबल के साथ काम करते हैं और Sass के ज़्यादातर कलर फ़ंक्शन की जगह ले लेते हैं। टिंट और hover के लिए oklab में मिलाइए, पारदर्शिता के लिए srgb में।28 सितंबर 2026पढ़ने में 7 मिनट
- कलर ब्लाइंड फ़्रेंडली पैलेट: अपने रंग कैसे जाँचें और ठीक करेंकलर ब्लाइंड फ़्रेंडली पैलेट में हर रंग-जोड़ी प्रोटानोपिया, ड्यूटेरानोपिया, ट्राइटानोपिया और ग्रेस्केल में भी अलग पहचानी जाती है। सबसे भरोसेमंद हल कोई ख़ास ह्यू नहीं, बल्कि लाइटनेस का अंतर है: जिन रंगों की OKLCH लाइटनेस में लगभग 0.2 का अंतर था, वे हमारे हर सिम्युलेशन में अलग दिखे। इसके साथ आइकन या लेबल भी जोड़ें, क्योंकि सिर्फ़ रंग के भरोसे कोई न कोई हमेशा चूक जाता है।28 सितंबर 2026पढ़ने में 8 मिनट
- Tailwind CSS कलर: v4 का OKLCH पैलेट, कस्टम कलर और शेडTailwind CSS v4 में 26 कलर स्केल हैं और हर स्केल में 50 से 950 तक 11 शेड, यानी कुल 286 रंग, जो OKLCH में --color-blue-500 जैसे CSS वेरिएबल के रूप में परिभाषित हैं। अपने रंग आप @theme { --color-brand-500: oklch(...) } से जोड़ते हैं। एक जैसे स्टेप नंबर का मतलब एक जैसी लाइटनेस नहीं है: blue-600 सबसे हल्का नीला है जो सफ़ेद पर 4.5:1 पास करता है, जबकि पीले को 700 चाहिए।28 सितंबर 2026पढ़ने में 7 मिनट