सीधे कंटेंट पर जाएँ
Toolars
एक्सप्लोर करें
बग रिपोर्ट करें

डिज़ाइन · लोकल उपयोगिता

कलर हार्मनी जनरेटर

Color Harmony Builder

सीड रंग और हार्मनी नियम से पैलेट बनाएँ, कंट्रास्ट टारगेट सेट कर बैज देखें, और नतीजा CSS कस्टम प्रॉपर्टी या JSON में एक्सपोर्ट करें।

टास्क पथ / इनपुट से परिणाम तक

सीड रंग सेट करें

लोकल रूप से चलता है · कुछ भी अपलोड नहीं होता

कलर हार्मनी जनरेटर कैसे काम करता है, निजता और संबंधित टूल

टास्क पथ / इनपुट से परिणाम तक

पांच-रंगी हार्मनी कैसे बनाएं

  1. 01

    सीड रंग सेट करें

    सीड HEX में छह-अंकीय hex मान लिखें — # प्रीफ़िक्स वैकल्पिक है — या सीड पिकर से रंग विज़ुअली चुनें। दोनों फ़ील्ड तालमेल में रहते हैं, और वर्कस्पेस सीड #5D4DF1 के साथ खुलता है।

  2. 02

    हार्मनी नियम चुनें

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

  3. 03

    कंट्रास्ट लक्ष्य सेट करें

    टेक्स्ट कंट्रास्ट लक्ष्य चुनें: बड़े टेक्स्ट के लिए 3:1, AA बॉडी टेक्स्ट के लिए 4.5:1, या AAA बॉडी टेक्स्ट के लिए 7:1 — डिफ़ॉल्ट 4.5:1 है। हर स्वैच काले या सफ़ेद के मुकाबले मापा जाता है, जो भी उस पर बेहतर पढ़ा जाए।

  4. 04

    पैलेट बनाएं

    पैलेट बनाएं दबाएं। पांच स्वैच दिखते हैं, और बीच वाला हमेशा आपका सटीक सीड रंग होता है — बाकी चार उसके इर्द-गिर्द सीमित रेंज के भीतर ह्यू, सैचुरेशन और हल्कापन बदलते हैं, ताकि रैंप नियॉन या मट्टी की ओर भटकने के बजाय उपयोगी बनी रहे।

  5. 05

    कंट्रास्ट बैज पढ़ें

    हर स्वैच अपना hex मान, अपना कंट्रास्ट अनुपात और उत्तीर्ण या लक्ष्य से नीचे बैज दिखाता है, स्वैच टेक्स्ट काले या सफ़ेद में रेंडर होता है — जो रंग कंट्रास्ट तुलना जीता हो। लक्ष्य से नीचे बैज का मतलब है टेक्स्ट के लिए गहरा या हल्का पड़ोसी चुनें, यह नहीं कि रंग खराब है।

  6. 06

    CSS कॉपी करें या JSON डाउनलोड करें

    CSS कॉपी करें कमेंट किया हुआ :root ब्लॉक कॉपी करता है, जिसमें --palette-1 से --palette-5 तक कस्टम प्रॉपर्टी होती हैं। JSON डाउनलोड करें toolars-palette.json सहेजता है, जो सीड, हार्मनी, कंट्रास्ट लक्ष्य और हर रंग का कंट्रास्ट डेटा स्पष्ट aiModel व api फ़ील्ड null पर सेट किए दर्ज करता है।

टूल के तथ्य

प्रोसेसिंग
आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है
कभी नहीं
रिटेंशन
कुछ भी स्टोर नहीं होता
कीमत
मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

कलर हार्मनी जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

कलर हार्मनी जनरेटर असल में क्या करता है

किसी साइड प्रोजेक्ट को ऐसी पैलेट चाहिए जो बेतरतीब नहीं, सोची-समझी लगे: एक प्राइमरी रंग, उसके सहायक टोन, और इस बात का प्रमाण कि टेक्स्ट हर एक पर पठनीय रहता है। आंख से हार्मनी चुनना हर संशोधन पर भटकता है, इसलिए कलर हार्मनी बिल्डर आपके सीड पर एक तय नियम लगाता है और हर स्वैच के बगल में कंट्रास्ट गणित दिखाता है। इंजन डिटर्मिनिस्टिक है — वही सीड और नियम हमेशा वही पांच रंग लौटाते हैं — इसलिए कोई टीममेट पैलेट को ठीक-ठीक दोहरा सकता है। पूरा रन बिना नेटवर्क के चलता है, और एक्सपोर्ट सीधे स्टाइलशीट या डिज़ाइन-टोकन फ़ाइल में बैठ जाते हैं।

आम सवाल

क्या पैलेट AI से बनती है?
नहीं, और वर्कस्पेस इसे कंट्रोल के ऊपर घोषित करता है: यह बिना AI मॉडल या API का डिटर्मिनिस्टिक लोकल हार्मनी इंजन है। वही सीड और नियम हमेशा वही पांच रंग बनाते हैं, इसलिए नतीजा डिज़ाइन रिव्यू में दोहराया जा सकता है।
कौन से सीड मान स्वीकार होते हैं?
छह-अंकीय हेक्साडेसिमल रंग जैसे #5D4DF1, शुरुआती # के साथ या बिना। तीन-अंकीय शॉर्टहैंड और अन्य नोटेशन अपेक्षित फ़ॉर्मैट बताने वाले संदेश के साथ अस्वीकार होते हैं, और कलर पिकर हमेशा मान्य सीड बनाता है।
बीच का स्वैच मेरे सीड से ठीक-ठीक क्यों मिलता है?
डिज़ाइन से: रैंप की तीसरी स्थिति सीड मान से पिन रहती है ताकि पैलेट आपके चुने रंग पर अंकित रहे। दोनों ओर के दो-दो स्वैच उसके इर्द-गिर्द निकाले जाते हैं — हार्मनी नियम ह्यू घुमाता है, जबकि हल्कापन बाहर की ओर बढ़ता है और सैचुरेशन किनारों की ओर घटती है।
कंट्रास्ट बैज कैसे गिना जाता है?
हर स्वैच का कंट्रास्ट अनुपात काले और सफ़ेद के मुकाबले सापेक्ष ल्यूमिनेंस से गिना जाता है, और दोनों में से बेहतर hex मान के बगल में दिखाया जाता है। स्वैच तब पास होता है जब वह अनुपात आपके चुने 3:1, 4.5:1 या 7:1 लक्ष्य को पूरा करे। HEX रंग डालें, अल्फ़ा समेत। अंतिम कैनवास अपारदर्शी होना चाहिए। बैकग्राउंड पहले कैनवास पर कम्पोज़िट होता है, फिर फ़ोरग्राउंड का मूल्यांकन होता है। अनुपात चार दशमलव तक दिखता है। पास/फ़ेल बिना गोल किए मान का इस्तेमाल करता है। सिर्फ़ ठोस sRGB रंग; यह पूरे पेज का ऑडिट नहीं है। .
दोनों एक्सपोर्ट में ठीक-ठीक क्या होता है?
CSS कॉपी करें हार्मनी और सीड के नाम वाले कमेंट के नीचे --palette-1 से --palette-5 तक का :root ब्लॉक देता है। JSON डाउनलोड इंजन का नाम, null पर सेट aiModel व api फ़ील्ड, आपका सीड, हार्मनी और कंट्रास्ट लक्ष्य, और हर रंग को उसके hex, जीतते टेक्स्ट रंग, कंट्रास्ट अनुपात और पास फ़्लैग के साथ दर्ज करता है। CSS हर स्वैच के लिए --palette-N-text भी एक्सपोर्ट करता है; JSON बिना गोल किया कंट्रास्ट अनुपात रखता है।
क्या कुछ मेरे ब्राउज़र से बाहर जाता है?
नहीं। पैनल स्पष्ट रूप से कोई नेटवर्क नहीं चिह्नित है: सीड, बने रंग और एक्सपोर्ट इसी टैब में रहते हैं, और किसी खाते की ज़रूरत नहीं।

पढ़ते रहें

डिज़ाइन में जारी रखें

संबंधित काम, कोई बंद गली नहीं।

पूरे इंडेक्स पर लौटे बिना किसी दूसरे केंद्रित वर्कस्पेस में जाएँ।

CSS लोडिंग एनिमेशन जनरेटर

CSS Loader Generator

लोडिंग स्पिनर की स्टाइल, फ़्रेम साइज़, स्ट्रोक, रफ़्तार और रंग विज़ुअली सेट करें; तैयार CSS कॉपी या डाउनलोड करें और सीधे अपने मार्कअप में जोड़ें।

बनाएँ

CSS चेकबॉक्स जनरेटर

CSS Checkbox Generator

कस्टम चेकबॉक्स का साइज़, फ़्रेम और दोनों स्टेट के रंग डिज़ाइन करें, चुनी और बिना चुनी हालत प्रीव्यू करें और नेटिव मार्कअप के साथ CSS कॉपी करें।

बनाएँ

CSS टॉगल स्विच जनरेटर

CSS Switch Generator

सिर्फ़ CSS वाले टॉगल स्विच का ट्रैक, थंब और दोनों स्टेट के रंग सेट करें, ट्रांज़िशन प्रीव्यू करें और मार्कअप समेत पूरा कोड कॉपी या डाउनलोड करें।

बनाएँ

CSS क्लिप पाथ जनरेटर

CSS Clip Path Generator

खींचकर, कीबोर्ड या निर्देशांक से बिंदु संपादित करें। चार प्रीसेट से शुरू करके clip-path घोषणा या पूरा CSS स्थानीय रूप से कॉपी करें।

बनाएँ