इस्तेमाल करने का तरीका
- बेस रंग डालें या चुनें। “New random base” आपके लिए एक रंग चुनता है।
- रंग-सामंजस्य चुनें। “Shades and tints” बहुत हल्के से बहुत गहरे तक 11 चरणों का स्केल बनाता है।
- जिस रंग को बनाए रखना हो उसे लॉक करें, फिर अन्य बेस रंग आज़माते रहें।
- HEX, CSS custom properties या JSON चुनें, नाम सेट करें और कोड कॉपी करें।
यह कैसे काम करता है
रंग चक्र पर ह्यू को घुमाकर रंग-सामंजस्य बनाए जाते हैं: complementary में विपरीत ह्यू (180°), analogous में दोनों ओर 30° और 60° दूर के पड़ोसी ह्यू, triadic में 120° के अंतर पर तीन ह्यू, tetradic में 90° के अंतर पर चार ह्यू, और split-complementary में पूरक ह्यू के पास के दो ह्यू (150° और 210°) शामिल होते हैं।
यह घुमाव HSL के बजाय OKLCH में होता है। OKLCH में महसूस होने वाली चमक स्थिर रहती है, इसलिए एक ही पैलेट के पीले और नीले रंग लगभग समान चमकीले दिखते हैं और पीला रंग आँखों को चुभता नहीं। जब घुमाया गया रंग sRGB स्क्रीन की सीमा से बाहर हो, तो उसे सीमा में लाने के लिए उसका क्रोमा घटाया जाता है और चमक तथा ह्यू स्थिर रखे जाते हैं।
शेड्स और टिंट्स स्केल में 50 से 950 तक के नाम वाले, निश्चित OKLCH चमक-चरण इस्तेमाल होते हैं। ये Tailwind CSS में इस्तेमाल होने वाले नामों जैसे हैं। सफ़ेद और काले के पास क्रोमा घटाया जाता है, ताकि सबसे हल्के टिंट्स नीयॉन जैसे न दिखें। रंग-सामंजस्य शुरुआत के लिए हैं: सामग्री में इस्तेमाल करने से पहले टेक्स्ट और बैकग्राउंड के जोड़ों को कॉन्ट्रास्ट चेकर से जाँचें।
उदाहरण
एक्सेंट रंग के साथ ब्रांड रंग
बेस रंग #3366cc चुनें और “Complementary” जोड़ें। इससे समान OKLCH चमक वाला गर्म गेरुआ रंग #8c6500 जुड़ता है। नीले ब्रांड के साथ एक्सेंट रंगों के लिए नीले और नारंगी-पीले रंगों के जोड़े आम हैं।
कंपोनेंट लाइब्रेरी के लिए डिज़ाइन टोकन
“Shades and tints” चुनें, नाम “primary” रखें और CSS variables एक्सपोर्ट करें। आपको --primary-50 से --primary-950 तक मिलेंगे, जो बैकग्राउंड (50–100), बॉर्डर (200–300) और टेक्स्ट (700–900) के लिए तैयार हैं।
एक रंग को स्थिर रखते हुए विकल्प तलाशना
triadic पैलेट का दूसरा रंग लॉक करें, फिर अलग-अलग बेस रंग आज़माएँ। बाकी रंग बदलने पर भी लॉक किए गए रंग का HEX मान वही रहता है।
अक्सर पूछे जाने वाले सवाल
मेरे रंग HSL रंग चक्र वाले टूल से अलग क्यों हैं?
यह टूल ह्यू को OKLCH में घुमाता है, जो एक परसेप्चुअल रंग स्पेस है। इसके ह्यू कोण HSL से बिल्कुल मेल नहीं खाते, इसलिए किसी रंग का “विपरीत” रंग HSL टूल के दिए गए रंग से थोड़ा अलग हो सकता है।
क्या मैं Tailwind CSS में JSON इस्तेमाल कर सकता हूँ?
JSON में नामों को HEX मानों से जोड़ा जाता है। इसका फ़ॉर्मैट वैसा ही है जैसा Tailwind अपने थीम कॉन्फ़िगरेशन में रंगों के लिए स्वीकार करता है। Tailwind 4 में नामों को --color-… में बदलकर CSS variables को @theme ब्लॉक में भी पेस्ट कर सकते हैं।
क्या बनाए गए पैलेट सुलभ हैं?
अपने-आप नहीं। रंग-सामंजस्य से टेक्स्ट और बैकग्राउंड के बीच कॉन्ट्रास्ट का पता नहीं चलता। इस्तेमाल करने वाले हर जोड़े को Contrast Checker से जाँचें।
गोपनीयता
पैलेट आपके ब्राउज़र में बनाए जाते हैं। आपके रंग कहीं भेजे या संग्रहीत नहीं किए जाते।