यादृच्छिक रंग जनरेटर

एखाद्या मॉकअप, आलेख किंवा कोऱ्या कॅनव्हाससाठी तुम्हाला रंगाची गरज आहे आणि सवयीने रंग निवडणे टाळायचे आहे का? हा विनामूल्य यादृच्छिक रंग जनरेटर स्क्रीन दर्शवू शकणाऱ्या संपूर्ण 24-bit श्रेणीमधून रंग निवडतो आणि प्रत्येक रंग त्याच्या कोडसह थेट रंग नमुन्यावर दाखवतो. “निवडीची संख्या” या क्षेत्रात 1 ते 50 दरम्यान तुम्हाला हवे तितके रंग निवडा, आवश्यक फॉरमॅट चिन्हांकित करा आणि “तयार करा” हे बटण दाबा. हे पृष्ठ सुरुवातीला HEX मधील एका रंगासह उघडते, त्यामुळे पहिला निकाल फक्त एका क्लिकवर मिळतो. सुरुवातीपासूनच “HEX कोड” हा पर्याय निवडलेला असतो, “RGB कोड” आणि “HSL कोड” हे पर्याय त्याच्या शेजारी असतात आणि तिन्हीपैकी कोणत्याही फॉरमॅटचे संयोजन एकाच वेळी चालू केले जाऊ शकते. “तयार करा” च्या शेजारील गिअर बटण “प्रगत पर्याय” उघडते, जिथे तुम्ही रंगांना एका प्रकारात किंवा श्रेणीत मर्यादित करू शकता, पुनरावृत्ती वगळू शकता आणि HEX कसा लिहिला जातो ते बदलू शकता.

प्रत्येक रंग तुमच्या ब्राउझरमध्ये Web Crypto API (crypto.getRandomValues) द्वारे तयार केला जातो, जो Math.random() सारख्या स्यूडो-रँडम फंक्शनऐवजी तुमच्या सिस्टमच्या स्वतःच्या यादृच्छिकतेच्या स्त्रोतामधून क्रिप्टोग्राफिकदृष्ट्या सुरक्षित यादृच्छिक बाइट्स पुरवतो. स्क्रीनवरील रंग हा लाल, हिरवा आणि निळा या तीन चॅनेल्सचा बनलेला असतो — प्रत्येकाचे मूल्य 0 ते 255 दरम्यानचा पूर्ण अंक असते आणि एक यादृच्छिक बाइट तंतोतंत 256 पैकी एक मूल्य घेऊ शकतो. त्यामुळे प्रत्येक चॅनेल हा थेट एक बाइट असतो, ज्यामध्ये काहीही मध्यस्थ नसते: कोणतीही बाकी काढली जात नाही आणि कोणत्याही रंगछटेला रूपांतरणाच्या प्रक्रियेत झुकते माप दिले जात नाही. यामुळे तुम्ही जेव्हा जेव्हा “तयार करा” हे बटण दाबता, तेव्हा हे पृष्ठ तयार करू शकणारे सर्व 16,777,216 रंग पूर्णपणे समान संभाव्यतेने येतात. “प्रगत पर्याय” मधील मर्यादित श्रेणी या नियमाचे त्या श्रेणीमध्येही पालन करते: रंग संपूर्ण जागेमधूनच निवडले जातात आणि श्रेणीबाहेरील रंग बाजूला ठेवले जातात, त्यामुळे श्रेणीत बसणाऱ्या प्रत्येक रंगाला समान संधी मिळते. सर्व्हरवर काहीही पाठवले जात नाही, कोणतीही नोंद ठेवली जात नाही आणि पृष्ठ एकदा लोड झाल्यावर इंटरनेट कनेक्शन बंद असले तरीही काम करत राहते.

हे तीन फॉरमॅट एकाच रंगाचे तीन प्रकारे वर्णन करतात. फॉरमॅट “HEX कोड” हे सहा अंकी स्वरूप आहे जे CSS आणि बहुतेक डिझाइन साधनांमध्ये वापरले जाते, जसे की #0778ff; हे सुरुवातीला # चिन्हासह लहान अक्षरांमध्ये लिहिले जाते, आणि “प्रगत पर्याय” मधील “मोठी अक्षरे” व “# शिवाय” हे पर्याय इतर स्वरूप अपेक्षित करणाऱ्या साधनांसाठी ते बदलतात. फॉरमॅट “RGB कोड” तिन्ही चॅनेल्स स्वतंत्रपणे दर्शवतो, जसे की rgb(7, 120, 255), जे प्रत्येक चॅनेलवर स्वतंत्रपणे काम करणाऱ्या कोडसाठी योग्य ठरते. फॉरमॅट “HSL कोड” रंगाचे वर्णन रंगछटा, संतृप्तता आणि हलकेपणा याद्वारे करतो, जसे की hsl(213, 100%, 51%), जे नंतर हाताने बदलण्यासाठी सर्वात सोपे स्वरूप आहे. हे तिन्ही फॉरमॅट थेट स्टाइलशीटमध्ये वापरले जाऊ शकतात. मात्र, ते सर्व तितकेच तंतोतंत नसतात. HEX आणि RGB अचूक असतात; HSL पूर्णांकित असते. हे पृष्ठ रंगछटा, संतृप्तता आणि हलकेपणा पूर्ण अंकांमध्ये लिहिते, आणि सुमारे 89% रंगांसाठी हे पूर्णांकित मूल्य पुन्हा तंतोतंत त्याच मूळ रंगात रूपांतरित होत नाही: #646503 हा hsl(61, 94%, 20%) म्हणून दर्शवला जातो, जो पुन्हा #616303 मध्ये रूपांतरित होतो. हा फरक चॅनेलमध्ये कधीही 5 पायऱ्यांपेक्षा जास्त नसतो आणि सहसा 1 किंवा 2 असतो — जो स्क्रीनवर अदृश्य असतो, परंतु तुम्ही HSL मूल्य जतन करून मूळ HEX परत मिळण्याची अपेक्षा केल्यास तो जाणवतो. त्यामुळे जतन करण्यासाठी HEX किंवा RGB हे मूल्य वापरा.

एकच रंग परिणामाच्या मध्यभागी एका कार्डाच्या स्वरूपात दिसतो; अनेक रंग एका क्रमांकांकित यादीत, प्रति ओळ एक रंग, निवडलेले फॉरमॅट शेजारी-शेजारी आणि शेवटी एक लहान कॉन्ट्रास्ट बॅज अशा स्वरूपात दिसतात. तीनपेक्षा जास्त रंगांची यादी बॉक्समध्ये स्क्रोल होते आणि कोपऱ्यातील बाण ती पूर्ण उंचीवर उघडतो; पृष्ठ तुम्ही ती जशी ठेवली होती तशी लक्षात ठेवते. फक्त तोच कोड कॉपी करण्यासाठी कोणत्याही कोडवर क्लिक करा. ओळीच्या शेवटी असलेले कॉपी करण्याचे बटण त्या रंगाचे सर्व कोड एकाच ओळीत रिकाम्या जागेने वेगळे करून कॉपी करते. थेट रंग नमुन्यावर क्लिक केल्यास तुमच्या ब्राउझरचा कलर पिकर उघडतो: तिथे दुसरा रंग निवडा आणि त्या ओळीतील प्रत्येक कोड तुम्ही चालू केलेल्या प्रत्येक फॉरमॅटमध्ये आणि बॅजसह जुळण्यासाठी पुन्हा लिहिला जातो. “सर्व कॉपी करा” हे बटण संपूर्ण संच प्रति ओळ एक रंग याप्रमाणे कॉपी करते, आणि “फाइलमध्ये जतन करा” हे बटण तोच मजकूर साध्या .txt फाइलमध्ये लिहितो; पिकरमध्ये बदललेला कोणताही रंग या दोन्हीमध्ये लागू होतो. “इतिहास” हा विभाग तुमचे शेवटचे 10 संच या ब्राउझरमध्ये अगदी जसे तयार झाले होते तसेच ठेवतो आणि “साफ करा” हे बटण परिणाम रिकामे करते. “प्रगत पर्याय” मधील पर्यायांसह तुमची सर्व सेटिंग्ज पुढील भेटीसाठी लक्षात ठेवली जातात.

समान संभाव्यता असलेले रंग एकसमान पसरलेले दिसत नाहीत, आणि काय अपेक्षा करावी हे माहिती असल्यास चुकीच्या कारणासाठी “तयार करा” दाबणे टाळता येते. संपूर्ण श्रेणीमध्ये मोजल्यास, सुमारे 35% रंग हे किमान 70% HSL संतृप्तता आणि 35% ते 65% दरम्यान हलकेपणा असलेले चमकदार आणि संतृप्त असतात. 20% पेक्षा कमी संतृप्तता असलेले राखाडी छटेच्या जवळ असणारे रंग केवळ सुमारे 4% असतात, आणि अत्यंत गडद रंग (20% पेक्षा कमी हलकेपणा) व अत्यंत फिकट रंग (80% पेक्षा जास्त हलकेपणा) प्रत्येकी सुमारे 3% असतात. त्यामुळे “सर्व रंग” या पर्यायातून घेतलेल्या दहा रंगांच्या संचामध्ये सहसा अनेक ठळक रंग असतात आणि क्वचितच पेस्टेल किंवा गडद राखाडी रंग आढळतो. जेव्हा तुम्हाला एखाद्या विशिष्ट प्रकारची गरज असते, तेव्हा “रंगाचा प्रकार” मधून तो निवडा: “भडक” हा पर्याय नेमका तोच संतृप्त गट ठेवतो, तर “पेस्टेल”, “गडद”, “सौम्य” आणि “ग्रेस्केल” हे पर्याय त्यांच्या संबंधित गटांसाठी तेच करतात. “सानुकूल” हा पर्याय तुम्हाला “ह्यू”, “संतृप्तता” आणि “हलकेपणा” यांची स्वतःची श्रेणी सेट करू देतो; रंगछटा श्रेणी 0 च्या पुढे जाऊ शकते, ज्यामुळे 330 ते 30 ही श्रेणी लाल रंग देते. ही श्रेणी पृष्ठ दर्शवत असलेल्या HSL कोडनुसार तपासली जाते, त्यामुळे कोणताही कोड या श्रेणीबाहेर जात नाही, आणि “निवडीची संख्या” मधील मूल्यासाठी या श्रेणीमध्ये पुरेसे रंग नसल्यास, रंगांची पुनरावृत्ती करण्याऐवजी पृष्ठ तुम्हाला श्रेणी रुंद करण्यास सांगते. अन्यथा पुनरावृत्ती शक्य आहे पण दुर्मिळ असते: ती वगळण्यासाठी “पुनरावृत्ती टाळा” हा पर्याय निवडा, आणि त्याशिवाय संपूर्ण श्रेणीतील 50 पैकी दोन रंग अगदी सारखे येण्याची शक्यता 13,700 मध्ये सुमारे 1 असते.

एखादा यादृच्छिक रंग सहसा पार्श्वभूमी म्हणून हवा असतो, ज्यामुळे रंग नमुना उघड्या डोळ्यांनी ज्याचे उत्तर देऊ शकत नाही असा एक प्रश्न निर्माण होतो: त्यावर मजकूर वाचता येईल का? वेब ॲक्सेसिबिलिटी मार्गदर्शक तत्त्वे, WCAG, सामान्य मजकुरासाठी किमान 4.5:1 इतके कॉन्ट्रास्ट गुणोत्तर मागतात. हे पृष्ठ तयार करू शकणाऱ्या प्रत्येक रंगावर मोजले असता, काळा मजकूर त्यांपैकी सुमारे 65% रंगांवर आणि पांढरा मजकूर सुमारे 36% रंगांवर हे गुणोत्तर गाठतो, आणि असा कोणताही रंग नाही ज्यावर दोन्ही अपयशी ठरतात: दोन्हींपैकी अधिक चांगला पर्याय नेहमीच किमान 4.58:1 गाठतो. त्यामुळे कोणत्याही यादृच्छिक पार्श्वभूमीसाठी काळा किंवा पांढरा मजकूर वाचता येतो आणि पृष्ठ तुम्हाला कोणता योग्य आहे ते दाखवते. प्रत्येक रंगाजवळ एक लहान बॅज दर्शवला जातो ज्यावर दोन्हींपैकी चांगल्या पर्यायानुसार Aa आणि त्यानंतर त्याचे कॉन्ट्रास्ट गुणोत्तर लिहिलेले असते. हे गुणोत्तर खाली पूर्णांकित केले जाते, त्यामुळे ते रंगाचे खोटे मोठेपण सांगत नाही, आणि तुम्ही पिकरमध्ये रंग बदलता तेव्हा ते अद्यतनित होते. हा बॅज केवळ काळ्या आणि पांढऱ्या मजकुराची तुलना करतो; ब्रँडचा रंग किंवा इतर कोणत्याही मजकूर रंगासाठी, ती जोडी कॉन्ट्रास्ट चेकरद्वारे तपासा.

यादृच्छिक असणे म्हणजेच सुसंवादी असणे नव्हे. एका संचातील प्रत्येक रंग इतरांची माहिती न ठेवता स्वतंत्रपणे निवडला जातो, त्यामुळे हा जनरेटर डिझाइनरच्या दृष्टीने पॅलेट कधीही तयार करत नाही — पूरक जोड्या नाहीत, एकसारखी रंगश्रेणी नाही, सामायिक हलकेपणा नाही. संकुचित श्रेणी संचाचे स्वरूप बदलते, पण हा नियम नाही: पेस्टेल रंग किंवा निळ्या रंगांच्या छटा अजूनही एकमेकांना जोडणारे काहीही नसताना एकामागून एक येतात. हेच त्याचे वैशिष्ट्य आहे: हे तुम्हाला असा रंग देते जो तुम्ही स्वतः निवडला नसता, ज्यामुळे सवय किंवा सर्जनशील अडथळा दूर होतो. यादृच्छिकपणे सापडलेल्या रंगाचे उपयुक्त रंगात रूपांतर करण्यासाठी, तुम्हाला आवडलेला रंग ठेवा आणि इतर रंग त्यातून मिळवा; संपूर्ण संच योगायोगाने जुळेपर्यंत “तयार करा” दाबत बसू नका. फिकट आणि गडद रूपांसाठी त्याचा ह्यू कायम ठेवून हलकेपणा टप्प्याटप्प्याने बदला, किंवा विरुद्ध रंग मिळवण्यासाठी ह्यू 180 अंशांनी फिरवा. फॉरमॅट “HSL कोड” या हालचाली केवळ अंदाजाऐवजी अंकगणिती बनवतो.

हा यादृच्छिक रंग जनरेटर का निवडावा?

• प्रत्येक रंग तुमच्या ब्राउझरमध्ये Web Crypto API द्वारे तयार केला जातो, काहीही अपलोड होत नाही
• सर्व 16,777,216 रंग पूर्णपणे समान संभाव्यतेने, प्रति चॅनेल एक यादृच्छिक बाइट
• एकाच रंगासाठी कोणत्याही संयोजनात HEX, RGB आणि HSL कोड
• एकाच वेळी 50 पर्यंत रंग, प्रत्येक रंग मजकूर-कॉन्ट्रास्ट बॅजसह रंग नमुन्यावर
• भडक, पेस्टेल, गडद, सौम्य आणि ग्रेस्केल, किंवा तुमची स्वतःची ह्यू, संतृप्तता आणि हलकेपणा श्रेणी
• आवश्यकतेनुसार पुनरावृत्ती टाळा पर्याय, आणि मोठ्या अक्षरांमध्ये किंवा # शिवाय HEX
• कोड कॉपी करण्यासाठी त्यावर क्लिक करा, किंवा ब्राउझरच्या कलर पिकरमध्ये कोणताही रंग बदला
• सर्व कॉपी करा, फाइलमध्ये जतन करा आणि ब्राउझरमध्ये ठेवलेला शेवटच्या 10 संचांचा इतिहास
• विनामूल्य आणि अमर्यादित: कोणतीही नोंदणी नाही, मर्यादा नाही, आमच्या सर्व्हरवर काहीही साठवले जात नाही

कोणीही निश्चित निर्णय घेण्यापूर्वी रंगाची आवश्यकता असते तिथे यादृच्छिक रंग उपयुक्त ठरतात. डिझाइनर सर्जनशील अडथळा दूर करण्यासाठी आणि त्यांच्या नेहमीच्या पॅलेटच्या पलीकडे जाणारा सुरुवातीचा बिंदू शोधण्यासाठी त्यांचा वापर करतात. डेव्हलपर्स मॉकअप्स, प्लेसहोल्डर आणि अवतारांमध्ये रंग भरतात, वास्तविक थीम ठरत असताना आलेखातील प्रत्येक मालिकेसाठी स्वतःचा रंग देतात, आणि इंटरफेस सुरुवातीला डिझाइन न केलेल्या पार्श्वभूमीवर कसा दिसतो ते तपासतात — “सर्व रंग” मधून घेतलेल्या 50 रंगांच्या संचामध्ये जवळजवळ नेहमीच किमान एक अत्यंत गडद किंवा अत्यंत फिकट रंग असतो, आणि “गडद” किंवा “पेस्टेल” हे पर्याय चाचणीला एका बाजूला केंद्रित करतात. जनरेटिव्ह कलाकार आणि गेम प्रोटोटायपर्स ही मूल्ये थेट कोडमध्ये वापरतात, जिथे RGB हे स्वरूप बहुतेक ग्राफिक्स लायब्ररींशी जुळते. एकच रंग कोड म्हणून, तीन चॅनेल्स म्हणून किंवा कलर व्हीलवरील स्थिती म्हणून कसा लिहिला जाऊ शकतो आणि HSL आवृत्ती का पूर्णांकित केली जाते हे दाखवण्यासाठी शिक्षक तिन्ही फॉरमॅट शेजारी-शेजारी ठेवतात. आणि यादीला लेबलिंग, टॅगिंग किंवा कलर-कोडिंग करणारी कोणतीही व्यक्ती कोणता रंग निवडावा या विवंचनेशिवाय स्पष्टपणे वेगळे दिसणारे रंग मिळवू शकते.

काही प्रामाणिक मर्यादा जाणून घेणे योग्य ठरेल. हा एक जनरेटर आहे, पॅलेट टूल नाही: हे रंगांचे सुसंवाद तयार करत नाही आणि इतर रंग बदलत असताना एका रंगाला स्थिर ठेवत नाही, आणि संकुचित श्रेणी एकाच प्रकारातील रंग देते, एकत्र जुळण्यासाठी निवडलेले रंग नाही. कॉन्ट्रास्ट बॅज केवळ काळ्या आणि पांढऱ्या मजकुराची तुलना करतो. हे पृष्ठ स्क्रीन दर्शवत असलेल्या sRGB रंगांमध्ये — HEX, RGB आणि HSL — पारदर्शकतेशिवाय आणि CMYK, Pantone, OKLCH किंवा नावांकित CSS रंगांशिवाय काम करते; मुद्रणासाठी स्क्रीनवरील कोडवर अवलंबून राहण्याऐवजी छपाईच्या पूर्वतयारीत रंग जुळवा. स्क्रीनचे कॅलिब्रेशन सारखे नसल्यामुळे एकाच कोडचा रंग वेगवेगळ्या डिस्प्लेवर किंचित वेगळा दिसू शकतो. HSL मूल्ये वर वर्णन केल्याप्रमाणे पूर्णांकित केली जातात, आणि जोपर्यंत “पुनरावृत्ती टाळा” हा पर्याय निवडला जात नाही, तोपर्यंत संचामध्ये पुनरावृत्तीसाठी तपासणी केली जात नाही. हे पृष्ठ जी हमी देते ती नेमकी आणि अचूक आहे: त्याच्या 16,777,216 रंगांपैकी प्रत्येक रंगाला, किंवा तुम्ही सेट केलेल्या श्रेणीतील प्रत्येक रंगाला, तुमच्या ब्राउझरच्या क्रिप्टोग्राफिक स्त्रोतामधून निवडले जात असताना आणि कुठेही पाठवले जात नसताना प्रत्येक वेळी तयार करताना समान संधी मिळते.