सास रंग मिसळणे. Sass सह वेबसाठी रंग मिक्स करणे. रंग बदलांसह आनुपातिक पॅलेट

125 पेक्षा जास्त वर्षांपूर्वी, महान प्रभाववादी कलाकार क्लॉड मोनेट यांनी प्रकाशासारख्या घटकाचा विचार करून रंगाबद्दलची आमची समज बदलली. आतापर्यंत त्यांचे संशोधन वेब डिझाईनसाठी लागू झालेले नाही. परंतु Sass सारखे प्रीप्रोसेसर तुम्हाला कलर पॅलेटबद्दल नवीन पद्धतीने विचार करण्याची परवानगी देतात:

क्लॉड मोनेट, हेस्टॅक्स: द इफेक्ट ऑफ स्नो (1891). स्कॉटिश नॅशनल गॅलरी; सार्वजनिक पाहण्यासाठी प्रतिमा.

ऐतिहासिकदृष्ट्या, वेबवर उत्कृष्ट रंग व्यक्त करण्याची क्षमता मर्यादित आहे आणि बहुतेक प्रकरणे स्थिरपणे पिन केलेल्या कोडवर अवलंबून आहेत. CSS रंग. रंग हाताळताना " फ्लाय वर"अप्राप्य राहिले.

सुदैवाने, नवीन साधने आम्हाला देतात अधिक शक्यतारंगासह काम करण्यासाठी. पण CSS अजूनही खूप नम्र आहे. येथेच प्रीप्रोसेसर आपल्यासाठी खूप उपयुक्त ठरू शकतात. चला त्यांची काही वैशिष्ट्ये पाहूया जी आमच्या शैलींमध्ये लक्षणीय सुधारणा करू शकतात:

• आपण कोणते रंग वापरतो हे टोपणनावे आपल्याला अधिक चांगल्या प्रकारे समजण्यास मदत करतात;
• लाइटिंग, शेडिंग आणि स्केलिंग बऱ्यापैकी उच्च रिझोल्यूशनवर लवचिक पॅलेटसाठी परवानगी देतात;
• रंगांचे मिश्रण केल्याने आपल्याला उघडण्याची परवानगी मिळते नवीन जगसूक्ष्म छटा आणि हाफटोन.

सहा-अंकी कोड

रंग कोड लागू करण्यासाठी तुम्हाला त्यांचा नेमका अर्थ माहित असणे आवश्यक आहे. याचा अर्थ असा की जोपर्यंत तुम्ही प्रीसेट रंगांची नावे वापरत नाही तोपर्यंत तुमची स्टाइलशीट नेहमी गुप्त सहा-अंकी कोड किंवा अस्पष्ट HSL क्रमांकांनी भरलेली असते. पण आपण वापरत असलेल्या रंगाला प्रत्यक्षात नाव नसेल तर? येथेच सास आपल्या बचावासाठी येतो. इतर प्रीप्रोसेसर्समध्ये समान कार्यक्षमता असण्याची शक्यता आहे, परंतु मी ते तुमच्या स्वतःच्या विवेकबुद्धीनुसार एक्सप्लोर करण्यासाठी तुमच्यावर सोडतो.

चला प्रारंभ करूया जेणेकरून तुम्हाला मला काय म्हणायचे आहे ते समजेल.

आम्ही तयार करू नवीन ब्रँडआणि ते प्रदर्शित करण्यासाठी दोन रंग निवडा. पहिली गोष्ट मी रंगांची नावे ठेवणार आहे: $toolbox आणि $ol-blue :

मी आता त्यांचा वापर Gullfoss Travel Supply Co. साठी वेबसाइट तयार करण्यासाठी करत आहे. या साइटची डिझाईन कल्पना म्हणजे सामानाच्या टॅगशी संबंध. IN वेगवेगळ्या जागासाइटवर विविध पर्याय आहेत ( फिकट) आणि शेड्स ( गडद) हे रंग:

Gullfoss Travel Supply Co. साठी काल्पनिक साइट.

उदाहरणार्थ, हे बटण विचारात घ्या:

मला हे बटण क्लिक करण्यायोग्य घटकासारखे दिसावे अशी माझी इच्छा होती, जी साध्या ग्रेडियंटसह सहज मिळवता येते. बटणाचा आधार $toolbox रंग आहे. आणि त्याचे ठळक वैशिष्ट्य म्हणजे त्याचे फिकट आणि गडद रंग.

पारंपारिकपणे मला ते याप्रमाणे CSS मध्ये सेट करावे लागतील:

बटण (पार्श्वभूमी-रंग: $टूलबॉक्स; // मुख्य पार्श्वभूमी-प्रतिमा: ग्रेडियंट(hsl(0, 33%, 52%), // हलका $टूलबॉक्स, hsl(0, 41%, 39%); // गडद) )

बटणाचा मुख्य रंग ब्रँड रंगांपैकी एक आहे, इतर दोन ( प्रकाश आणि गडद) Sass स्थिरांक नाहीत. मला त्यांना विचारावे लागेल. कलर पिकर उघडा आणि मॅन्युअली स्वॅच निवडा. पण जर मला $ol-blue या रंगावर आधारित बटण जोडायचे असेल, तर मला पुन्हा पॅलेटवर जावे लागेल आणि नवीन मूल्ये निवडावी लागतील.

आणि या प्रत्येक बटणासाठी तुम्हाला कर्सर फिरवण्याच्या स्थितीचे वर्णन करणे आवश्यक आहे! या स्थितीत, प्रकाश आणि गडद टोन बटणापेक्षा हलके असतील चांगल्या स्थितीत, म्हणून मला आणखी चार स्थिरांक घोषित करावे लागतील. किंवा फक्त एकदाच विशिष्ट मूल्ये प्रविष्ट करा आणि आशा आहे की मला या रंगांची इतरत्र गरज भासणार नाही.

पण सास माझ्यासाठी ते करू शकते. यामध्ये हे रंग हाताळण्यासाठी अंगभूत फंक्शन्स आहेत ज्यांचे वेगवेगळे प्रकार मॅन्युअली सेट न करता.

Sass साठी रंग निवडक पॅकेजिंग

रंग हलका करण्याचा एक मार्ग म्हणजे लाइटन फंक्शन वापरणे:

हलका करा($ टूलबॉक्स, 20%);

आणि रंग गडद करण्यासाठी, आम्ही गडद फंक्शन वापरू शकतो:

गडद ($ol-ब्लू, 30%);

खालील प्रकरणाचा विचार करा: जर आपण $toolbox 50% हलके केले तर आपल्याला त्या रंगाची अतिशय हलकी आवृत्ती मिळेल. पण जर आपण $ol-ब्लू 50% हलका केला तर आपल्याला पूर्णपणे पांढरा रंग मिळेल. कारण $ol-blue $toolbox पेक्षा खूपच हलका आहे.

रंग पूर्णपणे पांढरा न करता आपण किती हलका करू शकतो हे जाणून घेण्यासाठी आपल्याला त्या रंगाची चमक किती आहे हे आधीच माहित असणे आवश्यक आहे. ही माहिती HSL मूल्यांमध्ये सोयीस्करपणे एन्कोड केलेली आहे. जर आपण रंगाची चमक 100% मधून वजा केली, तर त्याचा परिणाम म्हणजे आपल्याला रंग पूर्णपणे पांढरा होण्यासाठी हलका करणे आवश्यक आहे:

X = 100% - l

$ol-blue चे ब्राइटनेस मूल्य 60% आहे आणि आम्ही ते पूर्णपणे पांढरे न होता 40% पर्यंत हलके करू शकतो. $toolbox साठी ब्राइटनेस 40% आहे, त्यामुळे आम्ही ते 60% ने ब्राइटनेस करू शकतो:

जेव्हा आपण रंग हलके करतो, तेव्हा $ol-blue $toolbox पेक्षा अधिक जलद पांढरा होईल कारण त्याचे मूळ ब्राइटनेस मूल्य जास्त असते.

जेव्हा आपण रंग गडद करतो, तेव्हा $toolbox $ol-blue पेक्षा अधिक वेगाने पूर्णपणे काळा होईल कारण त्याचे मूळ ब्राइटनेस मूल्य कमी असते.

या नवीन रंग पॅलेटमध्ये प्रभुत्व मिळविण्यासाठी, आम्हाला प्रत्येक रंगासाठी ब्राइटनेस मूल्ये लक्षात ठेवणे आवश्यक आहे.

रंग बदलांसह आनुपातिक पॅलेट

Sass मध्ये कलर फंक्शन स्केल-color() समाविष्ट आहे जे तुम्हाला रंगांचे घटक प्रमाणानुसार बदलण्याची परवानगी देते. स्केल-रंग() RGB तसेच HSL संपृक्तता आणि लुमा चॅनेलसह कार्य करते. अशाच प्रकारे रंगछटा समायोजित करण्यासाठी, तुम्हाला त्याच नावाचे adjust-hue() फंक्शन वापरावे लागेल.

मी आधी नमूद केल्याप्रमाणे, जर आपण $ol-blue ला ५०% ने हलके केले तर ते शुद्ध पांढऱ्या रंगात बदलेल, परंतु जर आपण स्केल-रंग() फंक्शन वापरून ब्राइटनेस प्रमाणानुसार ५०% ने वाढवले:

स्केल-रंग($ol-ब्लू, लाइटनेस, 50%);

याचा परिणाम मूळ रंग आणि शुद्ध पांढरा यांच्यातील ब्राइटनेस इंटरमीडिएट असलेल्या रंगात होईल.

आता मला माहित आहे की शुद्ध पांढरा होण्यासाठी मला माझा कोणताही रंग किती हलवावा लागेल: ते नेहमीच 100% असते. जर मी प्रमाणानुसार $ol-blue ची चमक 99% ने वाढवली, तरीही ती 1 टक्के $ol-blue असेल. तुम्ही $toolbox किंवा इतर कोणत्याही रंगावर त्याच प्रकारे प्रक्रिया करू शकता. आधीच खूप हलके असलेले आणि खूप लवकर शुद्ध पांढरे होऊ शकणारे रंग वगळता. त्यांच्यासाठी, प्रारंभिक चमक 100% असेल.

खालील कलर चार्ट पाहून मला काय म्हणायचे आहे ते तुम्ही सहज पाहू शकता:

रंगांची चमक जसजशी बदलते तसतसे ते हलके आणि अधिक अंदाज लावता येतात.

गडद रंग पर्याय देखील प्रमाणात सेट केले आहेत.

स्केल-रंग() फंक्शनसह, तुम्ही कलर पॅलेटमध्ये बेस कॉन्स्टंट्सची मर्यादित संख्या निर्दिष्ट करू शकता, परंतु तरीही हाफटोन आणि टिंट्स हाताळण्यासाठी लवचिकता टिकवून ठेवू शकता. आता आमची ग्रेडियंट घोषणा खालीलप्रमाणे परिभाषित केली जाऊ शकते:

बटण (पार्श्वभूमी-रंग: $टूलबॉक्स; // मुख्य पार्श्वभूमी-प्रतिमा: ग्रेडियंट(स्केल-रंग($टूलबॉक्स, लाइटनेस: 50%), $टूलबॉक्स, स्केल-रंग($टूलबॉक्स, लाइटनेस: -30%);)) बटण: फिरवा, बटण: फोकस (पार्श्वभूमी-रंग: स्केल-रंग($ टूलबॉक्स, लाइटनेस: 50%); // मुख्य पार्श्वभूमी-प्रतिमा: ग्रेडियंट(स्केल-रंग($ टूलबॉक्स, लाइटनेस: 60%), $ टूलबॉक्स स्केल -color($toolbox, lightness: -20%);) ) button.secondary(background-color: $ol-blue; // main background-image: gradient(scale-color($ol-blue, lightness: 50% ), $ol-ब्लू, स्केल-रंग($ol-ब्लू, लाइटनेस: -30%);) ) बटन.सेकंडरी:होव्हर, बटन.सेकंडरी:फोकस( बॅकग्राउंड-रंग: स्केल-रंग($ol-ब्लू, लाइटनेस: 50%), // फॉलबॅक बॅकग्राउंड-इमेज: ग्रेडियंट(स्केल-रंग($ol-ब्लू, लाइटनेस: 60%), $ol-ब्लू, स्केल-रंग($ol-ब्लू, लाइटनेस: -20%) ;))

या उदाहरणात मी फक्त दोन स्थिरांक वापरले आणि त्यांना हवे तसे शिफ्ट केले. खरं तर, ते संपूर्ण पृष्ठावर वापरले जाऊ शकतात. सामग्रीमध्ये मुख्यपृष्ठगुल्फॉस ट्रॅव्हल सप्लाय कं. फक्त दोन ब्रँड रंग वापरले जातात, भिन्न ब्राइटनेस मूल्यांवर शिफ्ट केले जातात. पॅलेटची साधेपणा असूनही, आम्ही ते लवचिकपणे सानुकूलित करू शकतो.

मिश्रण वापरून रंग निर्धारित करणे

आणखी एक मार्ग आहे ज्याद्वारे तुम्ही समान प्रमाणात पॅलेट तयार करू शकता - मिक्स() फंक्शन.
जर आम्हाला $ol-blue 60 टक्क्यांनी हलका करायचा असेल तर आम्ही लिहू:

मिक्स (पांढरा, $ol-ब्लू, 60%)

आपण याचा विचार करू शकता की आपण पांढऱ्या रंगाची नळी रंगीत पेंटच्या ट्यूबमध्ये मिसळली आहे $ol-निळा. अंधार करायचा असेल तर $ol-निळा, आम्ही लिहू:

मिक्स (काळा, $टूलबॉक्स, ३०%)

असे दिसून आले की पांढर्या किंवा काळ्या रंगात मिसळणे हे रंगाची चमक बदलण्यासारखेच समजले जाते, परंतु ते अधिक सोयीचे आहे कारण आपल्याला कमी वर्ण टाइप करणे आवश्यक आहे. Mix() तुम्हाला पूर्वी अनुपलब्ध असलेले वेबसाइटचे स्वरूप सहज तयार करण्यात मदत करेल.

मोनेटच्या गवताच्या ढिगाऱ्यांच्या रेखाचित्रांचा विचार करा. ते प्रकाशाचा खेळ अप्रतिमपणे टिपतात. परंतु डिझाइनच्या दृष्टिकोनातून आपण त्यांच्यापासून दूर जाऊ शकतो उपयुक्त धडा. दुसर्या फ्रेंच प्रभाववादी पियरे बोनार्डच्या मते, " रंग पेंटिंगची आनंददायी छाप निर्माण करत नाही - ते वाढवते"मोनेटच्या गवताच्या ढिगाऱ्यांच्या देखाव्यावर प्रकाशाच्या रंगाचा कसा परिणाम झाला हे लक्षात ठेवा. 1890 प्रमाणे आपण बेस रंग घेऊ शकलो आणि ते सहजपणे डिझाइनमध्ये बदलू शकलो तर?

Sass mix() फंक्शन आम्हाला ही संधी देते. चला आमचे रंग पॅलेट पुन्हा घेऊ आणि त्यात फक्त दोन अतिरिक्त रंग जोडू: प्रकाश आणि सावली. आता आमचे ब्रँडचे रंग पुन्हा मिसळूया, परंतु ते काळ्या आणि पांढर्या रंगात मिसळण्याऐवजी, आमचे नवीन रंग वापरूया:

ताबडतोब संपूर्ण पॅलेट उबदार आणि मऊ बनते आणि बरेच काही गडद रंग- श्रीमंत आणि तेजस्वी.

लाइटनिंग पिवळासंपूर्ण पॅलेटला सनी शेड्स देते.

सावलीच्या रंगाने गडद करणे पॅलेटला अधिक नैसर्गिक बनवते.

मला हे डिझाइन आवडत नसल्यास, मी या दोन स्थिरांकांसाठी नवीन मूल्ये निवडू शकतो आणि पुढील वेळी Sass त्यांना CSS मध्ये संकलित करेल आणि डिझाइन स्वयंचलितपणे बदल दर्शवेल.

यामध्ये दि नवीन योजनामी त्याच ब्रँड पॅलेटने पुन्हा सुरुवात करत आहे, पण आता हलक्या टोनसाठी मी हॉट पिंक रंग निवडतो आणि गडद टोनसाठी मी गडद हिरवा निवडतो:

हे पॅलेटचे स्वरूप पूर्णपणे बदलते, परंतु तरीही ते आमच्या दोन मुख्य ब्रँड रंगांवर आधारित आहे.

जेव्हा Sass CSS संकलित करते तेव्हा प्रकाश आणि गडद टोन बदलणे रंग पॅलेटमध्ये आपोआप प्रतिबिंबित होते.

तुमच्या साइटसाठी योग्य मूड किंवा थीम तयार करण्यासाठी हलके आणि गडद टोन बदलले जाऊ शकतात, आम्हाला सर्व शैलींमध्ये वेळ घेणारे बदल न करता.

Gullfoss Travel Supply Co. वेबसाइटवर परत येत आहे. , प्रत्येक स्टिकरच्या पृष्ठावर, मी काही शक्यता दाखवल्या आहेत ज्या अशा रंगांचे मिश्रण आपल्याला प्रदान करतात. जर आपण ऑलिंपियाचे पृष्ठ पाहिले तर, मूड मुख्य पृष्ठापेक्षा पूर्णपणे भिन्न आहे, परंतु सर्व मांडणी, फॉन्ट आणि मूलभूत मांडणी सारखीच आहे. प्रत्येक रंग पिवळा प्रकाश टोन किंवा गडद जांभळा टोनमध्ये मिसळला होता, म्हणून आम्ही पृष्ठ पाहतो ( अक्षरशः) नवीन प्रकाशात. सामग्रीची पार्श्वभूमी अंड्याचे शेल रंग बनली आहे आणि " बास्केटमध्ये जोडा" - अधिक नैसर्गिक दोलायमान रंग:

लिंकन स्टिकरमध्ये बरेच अंडरटोन आणि लाल रंगाच्या छटा आहेत, म्हणून मला ते पृष्ठाच्या सर्व घटकांमध्ये प्रतिबिंबित करायचे होते. चित्रासह डिझाइनशी जुळण्यासाठी मी लालसर प्रकाश आणि गडद टोन निवडले:

आपण साठी पृष्ठ पाहतो तर बार्टन स्प्रिंग्स पूल, तुम्हाला दिसेल की ते थंड पाणी आणि हिरव्या पानांच्या टोनचे वर्चस्व आहे. मूळ रंग आणि नवीन यांच्यातील फरक अगदी सूक्ष्म आहे, परंतु लक्षात येण्याजोगा आहे. रंग एकसंध रीतीने एकत्र केले पाहिजेत जेणेकरुन सौंदर्याची रचना वाढेल:

जर तुला गरज असेल " नाटक", तर ग्रिड पृष्ठ तुमच्यासाठी योग्य आहे. हलक्या आणि गडद शेड्स याला मूव्ही-स्टाईल लुक देतात" सिंहासन"असा नाट्यमय बदल फक्त काही स्थिरांक बदलून साध्य होतो.

तुम्हाला तुमचे स्वतःचे पॅलेट डिझाइन करण्यात मदत करण्यासाठी आणखी काही गोष्टी

या पृष्ठांवरील जवळजवळ प्रत्येक रंग हलक्या किंवा गडद छटासह मिसळलेला असतो, परंतु कधीकधी डिझाइन घटक खूप एकसारखे दिसू शकतात आणि त्यामुळे ते एकत्र मिसळतात. अशा परिस्थितीत, रंगीत नळांच्या नवीन सेटसह आपल्या प्रकल्पांना पूरक करण्यास घाबरू नका. हे आपल्या पृष्ठांना एक पॉप रंग देण्यास आणि त्यांना अधिक दोलायमान दिसण्यात मदत करेल.

लिंकनच्या पानावर आणखी एक नजर टाकूया. लक्षात ठेवा, मला ते लालसर रंग द्यायचे होते. चमकदार लाल पार्श्वभूमीवर मजकूर वाचणे कठीण आहे, म्हणून मी हलके रंग नवीन पद्धतीने सेट केले; जवळजवळ शुद्ध लाल. त्यानंतर मी पार्श्वभूमी सेट केली हिरवा रंग. हिरवा एकत्रितपणे लाल रंग तयार करतो व्हिज्युअल प्रभाव, ज्यामुळे कॉन्ट्रास्ट राखून हलके टोन अधिक खोल लाल दिसतात. हे वेगळे स्तर एकमेकांशी संवाद साधणारे भिन्न प्रकाश आणि गडद टोन वापरतात.

रंगसंगती विकसित करताना, ते स्पष्ट आणि वाचनीय असल्याची खात्री करणे महत्वाचे आहे. ग्रिड पृष्ठावर आणखी एक नजर टाका. जर तुम्हाला वाटत असेल की ते फार वाचनीय नाही, तर तुम्ही एकटे नाही आहात. पृष्ठाच्या शीर्षस्थानी असलेल्या मेनूमध्ये कमी कॉन्ट्रास्ट गुणोत्तर आहे. WCAG च्या शिफारशींनुसार, त्याचे इष्टतम मूल्य 4.5:1 आहे, परंतु 2.6:1 पेक्षा कमी नाही! मजकूर आणि पार्श्वभूमी रंगांमधील योग्य कॉन्ट्रास्ट गुणोत्तर डिझाइनला अधिक आनंददायी बनवेल.

मी पूर्ण करण्यापूर्वी, मी ब्राउझर समर्थनाचे थोडक्यात पुनरावलोकन करू इच्छितो. सर्व रंग प्रक्रिया मूलभूत CSS रंग घोषणांमध्ये संकलित केल्या जातात, सर्व आज सर्व ब्राउझर समर्थित असलेल्या स्थिर घोषणांमध्ये अनुवादित केले जातात. प्रीप्रोसेसर आम्हाला शेड्स आणि टोन तयार करण्यासाठी अभूतपूर्व संधी देतात जे आमचे पॅलेट वाढवतात आणि आमच्यातील मोनेट बाहेर आणतात.

लेखाचे भाषांतर " साठी रंग मिसळत आहे जाळे Sass सह» वेबसाइट बिल्डिंग फ्रॉम ए ते झेड प्रकल्पाच्या मैत्रीपूर्ण टीमने तयार केले होते.

कधीकधी वेब पृष्ठे डिझाइन करताना, आपल्याला काहीवेळा विशिष्ट घटक "लपवा" लागतात. तुम्ही अर्थातच हे घटक HTML मार्कअपमधून काढू शकता. पण हा मार्ग नाही. घटक ठेवण्यासाठी परंतु तो लपवण्यासाठी, तुम्ही CSS किंवा HTML लपवलेले वापरणे आवश्यक आहे.

अनुलंब संरेखन CSS सर्वोत्तम नाही साधे कार्य. विविध उपकरणांसाठी आजच्या प्रतिसादात्मक डिझाइन आवश्यकतांसह, प्रकरणे गुंतागुंतीची करण्यासाठी, विकसकांना "लवचिक" उंचीसह घटक तयार करण्यास भाग पाडले जाते आणि उभ्या केंद्राची गणना करणे एक अवघड काम बनते.

दोन रंगांमधील फरक कसा समजून घ्यावा? एका रंग योजनेतून 360 कसे बनवायचे? आम्ही आमच्याकडे असलेले स्कीमा रंग एका बेस कलरवर अवलंबून असलेल्या व्हेरिएबल्समध्ये कसे बदलू शकतो आणि ते CSS प्रीप्रोसेसरमध्ये कसे वापरू शकतो? याविषयी आपण पुढे शिकू: आपल्याला याची गरज का आहे, कमी (Sass) मधील रंग आणि योजनांसह कोणती प्रकरणे वापरणे शक्य आहे, तसेच कोणत्या सेवा आपल्याला दोन रंगांना एकात बदलण्यास आणि पहिल्यापेक्षा कार्य करण्यास मदत करतील. जे CSS प्रीप्रोसेसर, त्यांतील व्हेरिएबल्स, तसेच फंक्शन्स/मिक्सिन्स वापरतात त्यांच्यासाठी हा लेख स्वारस्यपूर्ण असेल.

प्रेरणा

तयार फुलांपासून तयार करा डायनॅमिक योजनामूळ रंगावर आधारित

चला तर्काने सुरुवात करूया - आपल्याला याची गरज का आहे? तर, आम्ही लेआउट डिझायनरच्या भूमिकेत आहोत आणि डिझाइनरने आम्हाला साइट/सिस्टम/एलिमेंट/ब्लॉकसाठी रंगांचा संच पाठवला आहे, ज्याची आम्ही रंगसंगती म्हणून व्याख्या करू. लेआउटमध्ये आपण पाहतो की रंग आश्चर्यकारकपणे एकमेकांवर अवलंबून असतात. समजा की डिझायनरने आम्हाला 5 रंग पाठवले आहेत आणि बहुधा HEX स्वरूपात: #FF0000, #E82C0C, #FF530D, #E80C7A, #FF0DFF. ही अक्षरे आणि संख्या आपल्याला काय सांगतात? काहीही नाही - हे एखाद्या व्यक्तीपेक्षा मॉनिटरला अधिक समजण्यासारखे आहे.

आ म्ही काय करू शकतो?

सर्वात सोपा पर्याय म्हणजे कमी मध्ये तयार करणे ( पुढे, साधेपणासाठी, आम्ही ते CSS प्रीप्रोसेसरच्या प्रतिनिधींपैकी एक म्हणून वापरू) 5 व्हेरिएबल्स, त्यांना या मूल्यांवर सेट करा आणि त्यांना विसरा:

@clr-base: #FF0000; @clr-header: #E82C0C; @clr-बटण: #FF530D; @clr-लिंक: #E80C7A; @clr-hover: #FF0DFF;
दुसरा पर्याय म्हणजे एचएसएल (रंग, संपृक्तता, हलकीपणा) मध्ये प्रत्येक रंगाचे प्रतिनिधित्व करणे, जे अधिक मानव-केंद्रित मूल्ये आहेत आणि त्यांना परिवर्तनीय मूल्ये म्हणून सोडा. Chrome मध्ये, हे "रंग स्वरूप" / "HSL" सेटिंग वापरून केले जाऊ शकते.

@clr-बेस: hsl(0, 100%, 50%); @clr-हेडर: hsl(9, 90%, 48%); @clr-बटण: hsl(17, 100%, 53%); @clr-लिंक: hsl(330, 90%, 48%); @clr-hover: hsl(300, 100%, 53%);
हे आधीच चांगले दिसते, परंतु ते अधिक चांगले केले जाऊ शकते? उदाहरणार्थ, केवळ मूळ रंगासाठी मूल्य सोडा आणि रंग फंक्शन्स वापरून इतरांची गणना करा!

@clr-बेस: hsl(0, 100%, 50%); @clr-हेडर: स्पिन(डेसॅच्युरेट(गडद(@clr-बेस, 2%), 10%), 8); @clr-बटण: फिरकी(हलका(@clr-base, 3%), 17); @clr-लिंक: स्पिन(डेसॅच्युरेट(गडद(@clr-बेस, 2%), 10%), -30); @clr-होवर: फिरकी(हलका(@clr-base, 3%), -60);
हे आपल्याला काय देते? प्रथम, फक्त एक व्हेरिएबल आहे - मूळ रंग, जो बदलल्यावर साइटची संपूर्ण रंगसंगती बदलेल. दुसरे म्हणजे, रंगांच्या परस्परावलंबनात अधिक स्पष्टता, जे शक्य तितक्या मानवी पद्धतीने व्यक्त केले जातात. उदाहरणार्थ, बटणाचा रंग हा कलर व्हीलवर १७ अंशांनी फिरवला जाणारा आणि थोडा हलका रंग आहे हे आपल्याला लगेच समजते.

तुमचा स्वतःचा कलर स्कीम डिझायनर आणि Adobe Kuler

आणखी एक वापर केस मूलभूत तयार करणे आहे रंग योजनास्वतंत्रपणे किंवा सेवांच्या मदतीने: समान, एकल-रंग (निश्चित टोन), ट्रायडिक, पूरक, संमिश्र, एकल-रंग (निश्चित टोन आणि संपृक्तता). मूळ रंगावर अवलंबून असलेल्या चलांचा संच म्हणून त्याची कल्पना करा. आणि नंतर, सेवा वापरल्याशिवाय, ती अधिक उबदार/थंड, फिकट/गडद, अधिक श्रीमंत/उलट करा. आणि हे सर्व फक्त एक व्हेरिएबल बदलून.

हे खरोखर कुठे उपयुक्त ठरू शकते? उदाहरणार्थ, आम्ही वेबसाइट्स प्रवाहित करतो आणि विशिष्ट डिझाइन टेम्पलेट वापरतो. त्याची अंमलबजावणी आपण करू शकतो एक समान योजनाआणि त्याचा मूळ रंग वापरून पुढच्या ग्राहकाला प्रोटोटाइप आणा, अक्षरशः काही सेकंदात.

हे आपल्याला एकदा सर्किट तयार करण्याची संधी देईल, आणि त्यापासून 360 सर्किट्स “जनरेट” करा.

रंगांमधील फरक स्पष्टपणे पहा

जरी आपल्याला गोष्टी खूप क्लिष्ट करण्याची आवश्यकता नसली तरीही, परंतु दोन रंगांमध्ये काय फरक आहे हे आपल्याला समजून घ्यायचे नाही, उदाहरणार्थ, भव्यतेची सुरुवात आणि शेवट, नंतर हे जाणून घेणे की रंगांना एचएसएल म्हणून प्रस्तुत केले जाऊ शकते. आम्हाला मदत करेल. पण लोकांनी संगणकाचा शोध लावला तर मानसिक गणिते का?

तुम्ही फरक कसा सांगू शकता?

वर नमूद केल्याप्रमाणे, मॅन्युअल थेरपीची पद्धत वापरून, हेक्स आरजीबी ते एचएसएलमध्ये रंग अनुवाद आणि घटकांमधील फरक मोजणे. यामुळे मला लगेच कंटाळा येऊ लागला आणि, node.js सह खेळल्यानंतर, मी एक छोटी उपयुक्तता/सेवा लिहिली जी स्वयंचलितपणे हे करण्यास मदत करते: garex.github.io/nodejs-colors-to-less-operations

पहिल्या स्तंभात आम्ही मूळ रंग/रंग प्रविष्ट करतो आणि दुसऱ्यामध्ये - अवलंबून असलेले. "गो" बटण दाबून आमच्याकडे रंग कमी फंक्शन्सचा संच आहे जो एका रंगात बदलण्यासाठी आवश्यक आहे. Sass साठी, कलर व्हील रोटेशन फंक्शन वगळता फंक्शनची नावे सारखीच आहेत: कमी मध्ये आपल्याकडे स्पिन आहे आणि Sass मध्ये आपल्याला अधिक स्पष्टपणे समायोजित-ह्यू नाव दिले आहे.

समस्या आणि पुल विनंत्या स्वागतार्ह आहेत. लक्ष दिल्याबद्दल धन्यवाद.

चला दुसर्या मनोरंजक आणि विस्तृत विषयाकडे जाऊया - कसे Sass वापरून/कंपास लेआउट दरम्यान रंगांसह कार्य करताना आपले जीवन सोपे करते.

प्रत्येक लेआउट डिझायनरला लेआउट दरम्यान CSS कोडमधील रंग किती वेळा परिभाषित आणि हाताळावे लागतात हे चांगले ठाऊक आहे. Sass प्रीप्रोसेसर आणि त्याच्या कंपास लायब्ररीमध्ये SCSS कोडमधील सर्व प्रकारच्या रंग ऑपरेशन्ससाठी डिझाइन केलेल्या फंक्शन्सचा समृद्ध संच आहे.

हा लेख सास आणि कंपास रंग वैशिष्ट्यांचे विहंगावलोकन आहे. चला, नेहमीप्रमाणे, सर्वात सोप्या फंक्शनसह प्रारंभ करूया आणि सोप्यापासून जटिलकडे सहजतेने जाऊ या.

प्रारंभिक कंपास प्रकल्प सेटअप

प्रथम, एक रिक्त कंपास प्रकल्प तयार करू आणि तो कॉन्फिगर करू. अनेक व्हेरिएबल्स सुरू करत आहे

1

$रंग

आणि

1

$color1

, ज्याचा वापर आपण रंग निश्चित करण्यासाठी करतो. आम्हाला नंतर या व्हेरिएबल्सची आवश्यकता असेल. @import "होकायंत्र/रीसेट" ; $color:hsla(120, 100%, 50%, .5); $color1:hsla(240, 100%, 50%, .5); $unit: 180px; div (उंची: $ युनिट; रुंदी: $ युनिट; सीमा: 1px ठोस #000; समास: 10px; फ्लोट: डावीकडे; मजकूर-संरेखित: केंद्र; फॉन्ट-वजन: ठळक; फॉन्ट-आकार: 1.3rem; रंग: गडद ( $color, 80% लाइन-उंची: $unit).origin(पार्श्वभूमी-रंग: $color;)

फंक्शन्स फिकट आणि गडद करा

चला सर्वात जास्त सुरुवात करूया साधी कार्ये -

मूळ रंग आणि फंक्शन हलका करते. दुसरा युक्तिवाद टक्केवारी मूल्य आहे ज्याद्वारे मूळ रंग हलका किंवा गडद करा: .लाइटन ( पार्श्वभूमी-रंग : फिकट करा ($ रंग , 10%); . गडद करा ( पार्श्वभूमी-रंग : गडद करा ($ रंग , 10%);)

फिकट आणि गडद फंक्शन्स SCSS कोडमध्ये कुठेही वापरली जाऊ शकतात - जिथे रंग लागू केला जातो. उदाहरणार्थ, वर दाखवलेले उदाहरण बदलू. फॉन्ट, बॉर्डर आणि बॅकग्राउंड रंग बदलण्यासाठी फिकट आणि गडद फंक्शन्स वापरू या:

.मिक्सिन (फॉन्ट-आकार: .95rem; पार्श्वभूमी-रंग: हलका ($color, 20%); सीमा: 1px घन गडद ($color, 30%); रंग: गडद ($color, 60%);)

चला फंक्शन्सकडे जाऊया व्यस्त रूपांतरणरंग. प्रथम कार्य

त्यात निर्दिष्ट केलेल्या रंगासह. चला हे पुढे करूया फंक्शन व्हेरिएबल. मूळ रंगाच्या तुलनेत 180 अंशांवर स्थित आहे. . हे मूळ रंगाचा रंग देखील उलटतो. परंतु कार्य असे आहे की ते रंग उलटे (लाल, हिरवे, निळे), परंतु पारदर्शकता - ते मूळ रंग उलटे करते. परंतु नंतरच्या विपरीत, त्यात अधिक लवचिकता आहे. जर फंक्शन "आउटपुट रंग" च्या स्थानाची डिग्री नियंत्रित करू शकते.

दुसऱ्या शब्दांत, आपण 180 अंशांव्यतिरिक्त कोन निर्दिष्ट करू शकता. याव्यतिरिक्त, कोन मूल्य एकतर सकारात्मक किंवा ऋण असू शकते:

समायोजित करा

Sass प्रीप्रोसेसरमध्ये रंग संपृक्तता नियंत्रित करण्यासाठी दोन कार्ये आहेत.

: .desaturate ( पार्श्वभूमी-रंग : desaturate ($ रंग , 80%); )

... उलटपक्षी, ते मूळ रंगापासून रंग संपृक्तता कमी करते.

1	पारदर्शक करणे

मूळ रंगात अल्फा चॅनेल जोडते आणि त्याद्वारे पारदर्शकता नियंत्रित करते मूळ रंग. या वैशिष्ट्याचे सौंदर्य हे आहे की स्त्रोत रंगात अल्फा चॅनेल नसले तरीही, आउटपुटमध्ये निर्दिष्ट पारदर्शकता पातळीसह अल्फा चॅनेल या रंगात जोडले जाईल. म्हणजेच, आरजीबीए फॉरमॅटमध्ये रूपांतरण केले जाईल.

पारदर्शकता मूल्य 0 (पूर्ण पारदर्शक) ते 1 (पूर्ण अपारदर्शक) पर्यंत असू शकते:

.पारदर्शक करा ( पार्श्वभूमी-रंग : पारदर्शक करा ($ रंग , .2); ) : .फेडआउट ( पार्श्वभूमी-रंग : फेड-आउट ($ रंग , .2); )

आणि

1

कोमेजणे

. ही फंक्शन्स रंग कमी पारदर्शक करतात: .opacify ( पार्श्वभूमी-रंग : opacify ($ रंग , .3); ) .fadein ( पार्श्वभूमी-रंग : fade-in ($ color , .3); )

मूळ रंग ग्रेस्केलमध्ये रूपांतरित करण्याचे कार्य वापरण्यास अत्यंत सोपे आहे. तत्वतः, येथे सांगण्यासारखे काही विशेष नाही:

.ग्रेस्केल(पार्श्वभूमी-रंग:ग्रेस्केल($रंग);)

जर मूळ रंग (व्हेरिएबल म्हणून निर्दिष्ट केलेले, HEX किंवा HSLA फॉरमॅटमध्ये) आरजीबीए फॉरमॅटमध्ये रूपांतरित करण्याचे कार्य असेल तर, या प्रकरणात, मदत येईलकार्य

आणि दोन व्हेरिएबल आर्ग्युमेंट्स (दोन रंग) आहेत. शेवटचा तिसरा युक्तिवाद, टक्केवारीच्या स्वरूपात, एक रंग दुसऱ्या रंगात मिसळला जाईल असे प्रमाण निर्दिष्ट करतो. आमच्या बाबतीत, रंग.

समायोजित-रंग कार्य

आता आपण Sass प्रीप्रोसेसरच्या अधिक जटिल वैशिष्ट्यांकडे आलो आहोत. यापैकी पहिले फंक्शन आहे

कलर अल्फा चॅनेल (पारदर्शकता) नियंत्रण देखील उपलब्ध आहे. , - एचएसएल आकृतीवरील रंग दर्शविणारे 0 ते 359 अंशांचे मूल्य; मूल्य एकतर सकारात्मक किंवा नकारात्मक असू शकते;

- 0 ते 1 च्या श्रेणीतील अल्फा चॅनेल मूल्य.

पुरेसे सिद्धांत, उदाहरणे वापरून समायोजित-रंग फंक्शन कसे कार्य करते ते पाहू.

1. मूळ पासून रंग बदला; दुसरा युक्तिवाद व्हेरिएबलद्वारे रंग बदल सेट करतो

   1

   $hue

   :

.adjustColorHue ( पार्श्वभूमी-रंग : समायोजित-रंग ( $color , $hue : 40); )

1. एकाच वेळी रंग आणि हलकीपणा बदलणे. पहिला युक्तिवाद $color प्रारंभिक रंग सेट करतो, दुसरा युक्तिवाद $hue रंग सेट करतो, तिसरा युक्तिवाद $lightness मध्ये बदल सेट करतो:

.adjustColorHueLightness ( पार्श्वभूमी-रंग : समायोजित-रंग ( $color , $hue : 40 , $lightness : 30); )

1. RGB कलर मॉडेलसाठी एकाच वेळी दोन रंगीत चॅनेल बदला. कार्ये, ग्रीन चॅनेल

   1

   $हिरवा

   :

.adjustColorRedGreen ( पार्श्वभूमी-रंग : समायोजित-रंग ( $color , $red : 40 , $green : 30); )

1. युक्तिवाद मिसळणे रंग मॉडेलसमायोजित-रंग कार्यामध्ये RGB आणि HSL. मूळ रंग $color, RGB मॉडेलचे red चॅनल आर्ग्युमेंट $red आणि HSL मॉडेलचे वितर्क $hue नुसार समायोजित-रंग फंक्शन पास करू:

.adjustColorError ( पार्श्वभूमी-रंग : समायोजित-रंग ( $color , $red : 40 , $hue : 20); )

हा कोड CSS मध्ये संकलित केल्यामुळे, आम्हाला खालील एरर मिळते:

वाक्यरचना त्रुटी : .../sass/style .scss च्या 38 व्या ओळीवर ` adjust-color " साठी एकाच वेळी रंगासाठी HSL आणि RGB मूल्ये निर्दिष्ट करू शकत नाही.

... जे फंक्शनमध्ये म्हणतात

त्यावर पास केलेल्या वितर्कांच्या मूल्यांवर आधारित रंग बदल केला. कार्य

1

स्केल-रंग

हे थोडे वेगळे कार्य करते - ते मूळ रंगावर आधारित रंग बदलते. आम्हाला काय म्हणायचे आहे ते लगेच स्पष्ट करण्यासाठी आम्ही बोलत आहोत, चला काही उदाहरणे पाहू: .origin (पार्श्वभूमी-रंग : $color ; ) .adjustcolor ( पार्श्वभूमी-रंग : समायोजित-रंग ($ रंग , $लाइटनेस : -20%); ) .scalecolor ( पार्श्वभूमी-रंग : स्केल- रंग ($रंग, $लाइटनेस: -20%);

IN या उदाहरणातकार्य

. कार्य. मूल्य हे फंक्शनच्या परिणामापेक्षा हलकेपणाची गणना करते आणि

1

रंगछटा

. , त्याउलट, दिलेल्या गुणोत्तरामध्ये मूळ रंगाचे पांढऱ्या रंगाचे मिश्रण करते. खाली दिलेला कोड व्हेरिएबलमधील रंगांच्या मिश्रणावर आधारित रंग तयार करेल

1

$रंग

आणि

1

30%

पांढरा: .टिंट ( पार्श्वभूमी-रंग : टिंट ($ रंग , 30%); )

निष्कर्ष

हे Sass प्रीप्रोसेसर आणि कंपास लायब्ररीच्या "रंग" कार्यांचे पुनरावलोकन पूर्ण करते. निष्कर्ष म्हणून, आम्ही असे म्हणू शकतो की अशा फंक्शन्सबद्दल धन्यवाद, वेबसाइट डिझाइन तयार करताना काम सोपे आणि वेगवान केले जाते.

शिवाय, या फंक्शन्सच्या मदतीने, इनपुट मूल्य म्हणून फक्त एका रंगासह, आपण व्यावसायिक रंग पॅलेटमध्ये उत्कृष्ट डिझाइन तयार करू शकता. आणि कोणत्याही ग्राफिकल साधनांचा अवलंब करू नका.

प्रत्येक वर चर्चा केलेली रंग फंक्शन्स स्वतंत्रपणे वापरण्याव्यतिरिक्त, आपण त्यांना एका अभिव्यक्तीमध्ये एकत्र करू शकता, जोरदार जटिल डिझाइन तयार करू शकता.

हा लेख बेन फ्रेनच्या "सॅस अँड कंपास फॉर डिझायनर्स" या अद्भुत पुस्तकाच्या "मॅनिप्युलेट कलर विथ इज" या अध्यायाचा विनामूल्य अनुवाद आहे.

डिझाइनमध्ये रंग खूप महत्वाचा आहे - ते दृश्य आणि मनोवैज्ञानिक भूमिका बजावते. तुमच्या डिझाइन हेतूशी जुळणारे योग्यरित्या निवडलेले पॅलेट तुमच्या वेबसाइटच्या सौंदर्याचा प्रभाव लक्षणीयरीत्या सुधारते.

तुम्ही (किंवा तुमचा डिझायनर) तयार पॅलेटसह प्रकल्पाशी संपर्क साधू शकता. नसल्यास, मी डिझाइनरसाठी रंग सिद्धांत वाचण्याची आणि आपले स्वतःचे पॅलेट तयार करण्याची शिफारस करतो. तद्वतच, चांगल्या पॅलेटमध्ये दोन विरोधाभासी "ब्रँड रंग" किंवा दोन समान रंग (मोनोक्रोम स्कीममधून) आणि लवचिकतेसाठी काही हलके किंवा गडद रंग असतात.

जर तुम्ही तुमच्या पॅलेटवर आधीच निर्णय घेतला असेल, तर Sass चे अंगभूत फंक्शन्स तुम्हाला त्याचे रंग हाताळण्यात मदत करू शकतात.

रंग पॅलेटचे दुवे

SASS व्हेरिएबल्स ($variables) देतात उत्तम मार्गसुव्यवस्थित आणि पुनरावृत्ती पद्धतीने रंगांचा संदर्भ घ्या. रंग पॅलेटला दिसण्यावर आधारित नाव देण्याऐवजी ते शब्दार्थाने नाव देण्यावर लक्ष केंद्रित करतात. $color-blue सारख्या व्हेरिएबलला काही अर्थ नाही (त्याशिवाय ते सूचित करते निळा रंग), परंतु $color-primary या रंगाची भूमिका दाखवते. थीमिंग किंवा ब्रँडचे रंग बदलताना हे आम्हाला लवचिकता देखील देते.

जरी $color-variables ही चांगली सुरुवात आहे, SASS नकाशा म्हणून रंग संग्रहित करणे ही चांगली कल्पना आहे. अशा प्रकारे रंग आयोजित केले जातील आणि संदर्भ आणि लूप करणे सोपे होईल.

खाली मूलभूत Scotch.io रंग पॅलेट आहे:

$scotch-colors: ("primary": #8e3329, "accent": #d98328, "secondary": #5a1321, "foreround": #191919, "background": #e9e9e9);

प्रत्येक रंगाचा एक अर्थपूर्ण अर्थ असतो जो त्याच्या भूमिकेचे वर्णन करतो. वैयक्तिक रंगांचा संदर्भ देण्यासाठी तुम्ही Sass map-get() फंक्शन किंवा तुमचे स्वतःचे युटिलिटी फंक्शन (शिफारस केलेले) वापरू शकता:

@function scotch-color($key: "primary") ( @return map-get($scotch-colors, $key); ) $button-color: scotch-color("primary"); // #8e3329

रंग पॅलेटला ठराविक रंगांमध्ये (4-7) मर्यादित करण्याचा सल्ला दिला जातो. उर्वरित रंग पॅलेटमधून रंगांच्या छटा आणि सावल्या म्हणून तयार केले जातात.

छाया आणि छाया

तुमच्या पॅलेटमध्ये टिंट आणि सावल्या जोडल्याने तुमच्या मूळ पॅलेटशी सुसंगतता राखून तुम्हाला तुमच्या प्रोजेक्टसाठी अधिक रंग मिळतील. सावल्या आणि रंगाची छटा तयार करण्यासाठी, SASS मध्ये मिक्स() फंक्शन आहे जे मूळ रंग काळ्या किंवा पांढर्या रंगात मिसळते:

$color-primary: scotch-color("प्राथमिक"); // #8e3329 $color-primary-tinted: मिक्स(पांढरा, $color-primary, 10%); // #99473e $color-primary-shaded: mix(black, $color-primary, 10%); // #7f2d24

डॉज/बर्निंग इंटरव्हल सेट केले असल्यास, युटिलिटी फंक्शन इच्छित रंगाच्या संबंधित मंद/लाइटनिंग डिग्रीची इच्छित सावली परत करू शकते (जादुई संख्या वापरण्याऐवजी):

$color-interval: 10% !global; @function scotch-color-level($color-name: "primary", $level: 0) ( $color: scotch-color($color-name); $color-base: if($level< 0, black, white); @return mix($color-base, $color, $level * $color-interval); } // Example: .panel { background-color: scotch-color-level("primary", 2); } @function scotch-color-alpha($name: "primary", $opacity: 0) { $color: scotch-color($name); // Get the named opacity level, if it exists @if map-key-exists($scotch-opacity, $opacity) { $opacity: map-get($scotch-opacity, $opacity); } // Use rgba() to manipulate the color"s alpha level @return rgba($color, $opacity); } // Example usage: $button-transparent-color: scotch-color-alpha("primary", "light"); // =>rgba(#8e3329, 0.8)

बेस (डीफॉल्ट) रंग $scotch-color-key मध्ये परिभाषित केला आहे. scotch-color() फंक्शन काढण्यासाठी सुधारित केले एक निश्चित पर्यायपास की ('बेस', 'लाइट', 'डार्क', इ.) आणि पास केलेल्या पारदर्शकतेवर आधारित रंग. हे आपल्याला काढण्याची परवानगी देते इच्छित रंगएका युक्तिवादासह, उदाहरणार्थ $color: scotch-color("प्राथमिक")

पूर्ण करणे

रंग खूप आहेत एक महत्त्वाचा भागप्रकल्प डिझाइन. म्हणून, प्रकल्पाचे रंग त्वरित व्यवस्थित करणे चांगले आहे वेगळे कार्ड SASS नंतर त्यांना मॅप-गेट किंवा कस्टम फंक्शनद्वारे पुनर्प्राप्त करण्यासाठी. रंगांसह कार्य करण्यासाठी आणि प्राथमिक रंगांचे टिंट आणि सावल्या तयार करण्यासाठी SASS मध्ये अनेक अंगभूत कार्ये आहेत. शेड्स पूर्वनिर्धारित असल्यास, ते व्यवस्थित करण्यासाठी SASS बहुआयामी नकाशे वापरा.

SASS मधील सौंदर्याचा रंग डिझाइनचे एकंदर उद्दिष्ट हे सक्षम असणे आहे:

• निवडलेल्यांशी सुसंगत रंग प्रदान करा आणि बदला रंग पॅलेट
• "जादू" क्रमांक वापरणे टाळा

आमच्या मालिकेच्या पुढील भागात, आम्ही टायपोग्राफी आणि उभ्या लय पाहू.

वेबवर रंगासह कार्य करण्यासाठी अनेक साधने आणि तंत्रे आहेत. माझा विश्वास आहे की आपण कशासह कार्य करत आहात हे आपल्याला नेहमीच माहित असले पाहिजे आणि रंग अपवाद नाही. वेबवर रंगासह काम करण्याचे तांत्रिक तपशील पाहू या.

रंग मिसळणे

हे समजून घेणे फार महत्वाचे आहे की संगणकावर लहानपणाप्रमाणे रंग वापरणे रंग मिसळल्याने कार्य होणार नाही. तुम्ही लहान असताना रंग लावला होता. पेंट आणि प्रिंटर शाई रंगद्रव्यांपासून बनलेले असतात - लहान कण जे दृश्यमान रंग तयार करण्यासाठी मिसळतात. ही वजाबाकी रंग निर्मिती योजना आहे. तुम्ही जितके अधिक रंग जोडाल तितका गडद रंग असेल. मूलभूत रंग- हे निळसर, किरमिजी आणि पिवळे आहेत, परंतु जेव्हा तुम्ही वजाबाकी योजना वापरून त्यांना मिसळता तेव्हा तुम्हाला काळा होतो.

संगणकावर (किंवा कोणत्याही मॉनिटरवर) तुम्ही काम करता प्रकाश सह, म्हणजे, जेव्हा तुम्ही सर्व रंग मिसळता तेव्हा तुम्हाला पांढरे रंग मिळतात. आयझॅक न्यूटनने त्यांचा प्रसिद्ध प्रिझम प्रयोग करण्यापूर्वी, लोकांचा असा विश्वास होता की रंग वस्तूंमध्ये शोषून घेण्याऐवजी किंवा त्यांच्यापासून परावर्तित होण्याऐवजी असतो. न्यूटनने प्रिझम वापरला आणि सिद्ध केले की तेजस्वी प्रकाश हा अनेक रंगांचे मिश्रण आहे, इंद्रधनुष्य तयार करतो. तथापि, इंद्रधनुष्याचे वैयक्तिक रंग वेगळे केले गेले नाहीत, हे दर्शविते की प्रिझममध्ये रंग नाही. अशा योजनेला ऍडिटीव्ह म्हणतात.

मॉनिटर्स हे प्रकाशाच्या लहान तुकड्यांचे अनेक संयोजन आहेत जे असंख्य रंग तयार करतात. रिझोल्यूशन म्हणजे या तुकड्यांची संख्या - पिक्सेल - जे स्क्रीनवर आहेत. विशेष म्हणजे, मॉनिटरच्या आगमनापूर्वीच कलाकारांनी हा दृष्टिकोन वापरला होता (उदाहरणार्थ खाली पाहिले जाऊ शकते).

मॉनिटर्समध्ये अनेक डिस्प्ले मोड असतात जे आम्हाला प्रतिमा कशा समजतात हे ठरवतात. याला सामान्यतः कलर डेप्थ असे म्हणतात. ही रंगाची खोली आहे जी प्रदर्शित रंगांची संख्या निर्धारित करते. जर खोली 1 बिट असेल, तर आम्हाला फक्त दोन रंग उपलब्ध आहेत - काळा आणि पांढरा. दोन बिट्सची खोली 4 रंग देते, आणि 32 पर्यंत, जरी नियमित मॉनिटर्ससपोर्ट कलर डेप्थ 24 पर्यंत, जे आम्हाला 16,777,216 रंग देते (ट्रू कलर आणि अल्फा चॅनेल).

खरा रंग ( खरा रंग) असे म्हटले जाते कारण मानवी डोळा सुमारे 10 दशलक्ष रंगांमध्ये फरक करण्यास सक्षम आहे आणि यासाठी 24-बिट खोली पुरेसे आहे. लाल, हिरवा आणि निळा रंग प्रत्येकी 8 बिट घेतात आणि उर्वरित पारदर्शकतेसाठी (अल्फा चॅनेल) वापरले जातात.

चला ही माहिती घेऊ आणि आपल्यासाठी उपलब्ध रंग गुणधर्म पाहू.

रंग मूल्ये

RGB मूल्ये

मागील भागाच्या शेवटी, rbga(x, x, x, y) म्हणजे काय ते ओळींच्या दरम्यान सांगितले होते; तथापि, हे अधिक चांगल्या प्रकारे समजून घेणे योग्य आहे. जर आम्ही आरजीबी मॉडेलसह काम केले तर आम्ही 0 ते 255 मूल्यांसह रंग तीन चॅनेलमध्ये विभागतो.

X ही 0-255 y मधील संख्या आहे 0.0 ते 1.0 rgb(x, x, x); किंवा rgba(x, x, x, y); उदाहरण: rbga(150, 150, 150, 0.5);

हेक्स मूल्ये

हेक्साडेसिमल रंग हे थोडे वेगळे रंग प्रदर्शन स्वरूप आहेत आणि ते वेबवर सर्वाधिक वापरले जातात.

तुम्हाला माहिती आहे की, एक बाइट 8 बिट आहे, म्हणजेच, प्रत्येक हेक्साडेसिमल रंग 1 बाइटने निर्दिष्ट केला आहे. प्रत्येक बाइट 00 ते FF मध्ये एका संख्येद्वारे निर्दिष्ट केला जातो हेक्साडेसिमल प्रणालीनोटेशन, किंवा दशांश मध्ये 0 ते 255 पर्यंतची संख्या. अशा प्रकारे, काळा #000000 आणि पांढरा #FFFFFF आहे.

जर बिट्स जोड्यांमध्ये पुनरावृत्ती होत असतील तर ते लहान केले जाऊ शकतात, उदाहरणार्थ, #00FFFF #0FF होते. ही रेकॉर्डिंग प्रणाली समजून घेण्यासाठी आणि रेकॉर्डिंगसाठी तसेच प्रोग्रामिंगमध्ये वापरण्यासाठी अतिशय सोयीस्कर आहे. जर तुम्ही सखोल स्तरावर रंगावर काम करत असाल, तर एचएसएल सिस्टमचा विचार करणे योग्य आहे.

HSL मूल्ये

HSL RGB प्रमाणेच कार्य करते, परंतु रंगांऐवजी ते रंग, संपृक्तता आणि हलकेपणा निर्दिष्ट करते.

HSL 3D मॉडेल

ह्यू 360 अंश फिरते आणि संपृक्तता आणि हलकीपणा 0 ते 1 पर्यंत मूल्ये घेतात.

X ही 0 - 360 y मधील संख्या आहे 0% ते 100% z ही 0.0 ते 1.0 hsl(x, y, y) मधील संख्या आहे; किंवा hsla(x, y, y, z); उदाहरण: hsla(150, 50%, 50%, 0.5);

या दोन प्रणालींमधील संक्रमण अगदी सोपे आहे, परंतु मानवी आकलनासाठी एचएसएल अधिक अनुकूल आहे. हा डेमो आणि हे साधन तुम्हाला अधिक चांगल्या प्रकारे समजून घेण्यात मदत करेल.

भविष्यातील लेखात HSL देखील समाविष्ट केले जाईल.

नामांकित रंग

नामांकित रंग देखील विकसकांसाठी उपलब्ध आहेत. तथापि, आकलनातील फरक आणि त्यांच्या अयोग्यतेमुळे त्यांच्यासोबत काम करणे सोपे नाही. एक ज्वलंत उदाहरण म्हणजे " गडद राखाडी"(गडद राखाडी) "राखाडी" पेक्षा हलका आहे. एक खेळ देखील आहे जिथे आपल्याला रंगांचा अंदाज लावावा लागेल. पूर्वी, उदाहरणार्थ, रक्ताच्या लाल रंगाला चकनोरिस म्हटले जायचे (आता हे फक्त HTML मध्ये समर्थित आहे, माझ्या माहितीनुसार). एक ना एक मार्ग, व्हेरिएबल्समध्ये रंग साठवण्यासाठी Sass सारखे प्रीप्रोसेसर वापरणे अधिक सोयीचे आणि व्यावसायिक असेल.

कलर व्हेरिएबल्स

एक चांगला सराव म्हणजे कलर व्हेरिएबल्स संग्रहित करणे परंतु त्यांचा कधीही वापर करू नका, त्यांना अधिक वाचनीय नावांसह पुन्हा परिभाषित करा. CSS मध्ये मूळ व्हेरिएबल्स आहेत:

: रूट ( --brandColor: लाल; ) मुख्य भाग (पार्श्वभूमी: var(--brandColor); )

परंतु हे पूर्णपणे नवीन वैशिष्ट्य आहे आणि मायक्रोसॉफ्ट ब्राउझर लिहिण्याच्या वेळी त्यास समर्थन देत नाहीत.

CSS प्रीप्रोसेसरव्हेरिएबल्सनाही सपोर्ट करते, त्यामुळे तुम्ही $brandPrimary सारखे व्हेरिएबल्स तयार करून त्यांचा वापर करू शकता. किंवा नकाशा वापरा:

$colors: (मुख्य ब्रँड: #FA6ACC, दुय्यम ब्रँड: #F02A52, हायलाइट: #09A6E4); @function color($key) ( @if map-has-key($colors, $key) ( @return map-get($colors, $key); ) @warn "अज्ञात `#($key)` $ मध्ये रंग."; @return null; ) // _component.scss .element ( पार्श्वभूमी-रंग: रंग(हायलाइट); // #09A6E4 )

लक्षात ठेवा की नावे महत्वाची आहेत. अमूर्त नावे कधीकधी उपयुक्त असतात कारण जर तुम्ही एखादे व्हेरिएबल बदलले ज्याने निळा रंग सेट केला आणि आता केशरी रंग सेट केला, तर तुम्हाला इतर सर्व व्हेरिएबल्सचे नाव बदलण्याची गरज नाही, किंवा वाईट म्हणजे अशी टिप्पणी जोडा « $निळा आता नारंगी झाला आहे."

चालू रंग

currentColor हे अतिशय महत्त्वाचे मूल्य आहे. हे घरटे विचारात घेते, आणि सावल्या, किनारी आणि अगदी पार्श्वभूमीवर रंग हस्तांतरित करण्यासाठी वापरले जाते.

समजा तुम्ही त्यामध्ये एक div आणि नेस्टेड div तयार केला आहे. खालील कोड अंतर्गत div साठी नारिंगी बॉर्डर तयार करेल:

Div-बाह्य ( रंग: नारिंगी; ) .div-अंतर्गत (सीमा: 1px घन वर्तमान रंग; )

आयकॉन सिस्टमसह कार्य करताना हे खूप उपयुक्त आहे. तुम्ही currentColor हे डीफॉल्ट मूल्य म्हणून सेट करू शकता आणि नंतर स्टाइलिंगसाठी आवश्यक CSS वर्ग वापरू शकता.

प्रीप्रोसेसर

CSS प्रीप्रोसेसर रंगासह काम करण्यासाठी उत्तम आहेत. विविध फंक्शन्ससाठी दस्तऐवजीकरणाच्या काही लिंक येथे आहेत.