रैंडम ग्रेडिएंट

दो रंगों की ज्यामिति

एक CSS लीनियर ग्रेडिएंट तीन तत्वों द्वारा परिभाषित होता है: एक दिशा कोण, एक शुरुआती रंग, और एक अंतिम रंग। ब्राउज़र sRGB कलर स्पेस में लीनियर इंटरपोलेशन का उपयोग करके कोण अक्ष के साथ हर मध्यवर्ती शेड की गणना करता है। शून्य डिग्री ऊपर की ओर, 90 डिग्री दाईं ओर, और 180 डिग्री नीचे की ओर इंगित करती है। 0 से 359 के बीच हर कोण मान्य है। यह टूल Web Cryptography API से स्वतंत्र रूप से तीनों मान चुनता है, जो 16.7 मिलियन × 16.7 मिलियन × 360 ≈ 100 क्वाड्रिलियन विशिष्ट ग्रेडिएंट उत्पन्न करता है।

रैंडम ग्रेडिएंट क्यों चौंकाते हैं

जोसेफ अल्बर्स, बॉहॉस के उस्ताद जिन्होंने दशकों तक रंगों की परस्पर क्रिया का अध्ययन किया, ने प्रदर्शित किया कि एक ही रंग अपने पड़ोसी रंगों के आधार पर पूरी तरह अलग दिखता है। गहरे नीले के बगल में रखा गर्म नारंगी चमकता हुआ प्रतीत होता है। लाल के बगल में रखने पर, यह पीछे हट जाता है। रैंडम ग्रेडिएंट जनरेशन ऐसे संयोजन उत्पन्न करता है जो एक जानबूझकर डिज़ाइनर कभी प्रयास नहीं कर सकता, और इनमें से कुछ अप्रत्याशित जोड़ियां आश्चर्यजनक सुंदरता प्रकट करती हैं। नीचे दिया गया पूरक ग्रेडिएंट कलर व्हील के विपरीत पक्षों से उभरता है, केवल ह्यू कंट्रास्ट के माध्यम से अधिकतम दृश्य ऊर्जा बनाता है।

समरूप संयोजन, जहां दोनों रंग एक समान ह्यू क्षेत्र साझा करते हैं, नरम, अधिक वातावरणीय ग्रेडिएंट उत्पन्न करते हैं। ये पूरी तरह रैंडम जनरेशन में लगभग 25% बार दिखाई देते हैं।

सामंजस्य स्पेक्ट्रम

आंकड़े पैनल प्रत्येक ग्रेडिएंट को उसके रंग संबंध द्वारा लेबल करता है। मोनोक्रोम जोड़ियां कलर व्हील पर 15 डिग्री से कम भिन्न होती हैं, सूक्ष्म टोनल शिफ्ट उत्पन्न करती हैं। समरूप जोड़ियां (15 से 45 डिग्री अलग) एक रंग पड़ोस साझा करती हैं। विपरीत ग्रेडिएंट 90 से 150 डिग्री तक फैलते हैं। पूरक जोड़ियां व्हील के विपरीत पक्षों पर बैठती हैं (150 से 180 डिग्री अलग), सबसे मजबूत दृश्य तनाव पैदा करती हैं। लेबल हर जनरेशन के साथ अपडेट होता है, हर क्लिक को एक सूक्ष्म रंग-सिद्धांत पाठ में बदलता है।

व्यावहारिक CSS

जनरेट किया गया ग्रेडिएंट सीधे CSS linear-gradient() मान के रूप में कॉपी होता है। इसे किसी भी तत्व पर background प्रॉपर्टी के रूप में उपयोग करें। ग्रेडिएंट टाइपोग्राफी के लिए background-clip: text के साथ इसे टेक्स्ट के पीछे लगाएं। अर्ध-पारदर्शी संस्करण के साथ इसे छवियों पर ओवरले करें। इसे बटन, कार्ड, हीरो सेक्शन, या लोडिंग स्क्रीन पर लागू करें। कोण और रंग पूर्ण विनिर्देश हैं: पेस्ट करें, यदि आवश्यक हो तो ओपेसिटी समायोजित करें, शिप करें।

आर्किटेक्चर द्वारा गोपनीय

दोनों रंग और कोण आपके ब्राउज़र के Web Cryptography API से उत्पन्न होते हैं। सर्वर यह पेज डिलीवर करता है और उसका काम समाप्त हो जाता है। आपके जनरेट किए गए ग्रेडिएंट, आपका इतिहास, और आपकी जनरेशन गणना आपके ब्राउज़र में रहती है। सर्वर कुछ भी संग्रहीत नहीं करता। URL शेयर करना टूल शेयर करता है, कोई भी जनरेट किया गया आउटपुट कभी नहीं। प्रत्येक आगंतुक का ब्राउज़र पूरी तरह से स्वतंत्र परिणाम उत्पन्न करता है।

वास्तविक दुनिया से ग्रेडिएंट प्रेरणा

रैंडम जनरेशन अप्रत्याशित संयोजन प्रकट करता है, लेकिन वास्तविक दुनिया के प्रोजेक्ट दिखाते हैं कि रंग संबंध व्यवहार में कैसे काम करते हैं। जबकि यह टूल दो स्वतंत्र रंगों और एक रैंडम कोण से ताज़े CSS ग्रेडिएंट जनरेट करता है, Color Discovery आर्किटेक्चर, उत्पाद डिज़ाइन, पैकेजिंग, और इंटीरियर में पूर्ण रचनात्मक कार्य से लिए गए पैलेट की खोज करता है। ये पैलेट प्रदर्शित करते हैं कि वास्तविक सामग्री, प्रकाश स्थितियों, और दृश्य संदर्भों में ह्यू कैसे परस्पर क्रिया करते हैं। यदि रैंडमली जनरेट किया गया ग्रेडिएंट कोई विचार जगाता है, तो वास्तविक दुनिया के पैलेट ब्राउज़ करना इसे पेशेवर डिज़ाइन में सिद्ध संयोजन में परिष्कृत करने में मदद कर सकता है। चाहे आप UI बैकग्राउंड बना रहे हों, मटीरियल फिनिश चुन रहे हों, या सही रंगीन वातावरण खोज रहे हों, Color Discovery पर और अधिक खोजें।