हांवें हालींच म्हज्या वेबसायटीचेर एनिमेटेड ग्राफिक्स नव्या विशयान आनी आद्यप्रवर्तक पात्रांच्या पंगडान रिफ्रेश केलां, ह्या माळेंत हांवें वांटून घेतिल्ल्या भरपूर तंत्रांक वेव्हारांत हाडलां. कोण तरी तांचे कडेन संवाद सादता तेन्ना वा दिसाच्या वेगवेगळ्या वेळार म्हज्या कांय एनिमेशनांचें रूप बदलता.
म्हज्या ब्लॉग पानांचेर आशिल्ल्या ग्राफिकांतले रंग दर दिसा सकाळीं सावन रात मेरेन बदलतात. मागीर, स्नो मोड आसा, जो थंड रंग आनी गिमाचो थीम जोडटा, ओव्हरले थर आनी ब्लेंडिंग मोडाच्या सौजन्यान.
हाचेर काम करतना, CSS सापेक्ष रंग मोलां म्हाका चड नियंत्रण दिवंक शकतात आनी तेच बरोबर प्रक्रिया सोपी करपाक शकतात काय कितें असो प्रस्न म्हाका पडपाक लागलो. टिप: ह्या ट्युटोरियलांत, हांव सापेक्ष रंग मोलां आनी थीमिंग ग्राफिक्स आनी एनिमेशनां खातीर OKLCH रंग जाग्याचेर लक्ष केंद्रीत करतलों. सापेक्ष रंगांत खोल बुडपाचें आसल्यार अहमद शदीदान एक भव्य परस्पर संवादात्मक मार्गदर्शक तयार केला. रंग जागो, गॅमट आनी ओकेएलसीएच हांचे विशीं म्हणल्यार आमच्याच जॉफ ग्राहान तांचे विशीं बरयलां.
घटकांचो परत परत वापर करप म्हत्वाचें आशिल्लें. शक्य आसल्यार पार्श्वभूंय परत वापरताले, जूम आनी आच्छादन त्याच कलाकृतींतल्यान नवे दृश्य तयार करपाक मदत करताले. गरजेक लागून जल्माक आयिल्लो, पूण तातूंत वैयक्तीक प्रसंगांपरस माळेच्या नदरेन विचार करपाकय प्रोत्साहन मेळ्ळें. रंग पॅलेट हाताळणीन अद्ययावत करपाची समस्या सरळ म्हज्या आव्हाना कडेन वचूंया. ह्या सारकिल्या टून टायटल्सांत — १९५९ वर्साच्या योगी बेअर शोच्या एपिसोडाचेर आदारीत “लुलाबाय-बाय बेअर” — आनी म्हज्या वावरांत सादारणपणान, पॅलेट कांय वेंचून काडिल्ल्या रंगां मेरेन मर्यादीत आसात.
हांव म्हज्या “फाउंडेशन” रंगा वयल्यान शेड्स आनी टिंट तयार करतां, चड रंग घालिनासतना पॅलेट वाडोवपा खातीर.
स्केचांत हांव एचएसएल रंग जाग्यार काम करतां, देखून हे प्रक्रियेंत म्हज्या फावंडेशन रंगाचें हळुवारपण मोल वाडोवप वा उणें करप आसता. प्रामाणीकपणान सांगचें जाल्यार, हें एक कठीण काम न्हय — पूण वेगळो फावंडेशन रंग वेंचपाक शेड्स आनी टिंट हांचो एक पुराय नवो संच तयार करचो पडटा. तें हाताळणीन करप, परत परत करप, रोखडेंच श्रमीक जाता.
हांवें HSL — H (hue), S (saturation), आनी L (lightness) — रंग जागो उल्लेख केला, पूण रंग वर्णन करपाच्या जायत्या मार्गांतलो तो फकत एक मार्ग. आरजीबी — आर (तांबडो), जी (पाचवो), बी (निळो) — हो घडये सगळ्यांत वळखीचो आसूं येता, उण्यांत उणो हेक्स रुपांत. तशेंच LAB — L (हलकेपण), A (पाचवें–तांबडें), B (निळें–हळडुवें) — आनी नवें, पूण आतां सगळेकडेन आदार मेळिल्लें LCH — L (हळदुवो), C (क्रोमा), H (हळदुवो) — मॉडेल ताच्या OKLCH रुपांत आसा. LCH — खास करून CSS त OKLCH — वरवीं हांव म्हज्या फावंडेशन रंगाचें हळुवारपण मोल समायोजीत करूंक शकता.
वा ताच्या क्रोमांत बदल करूं येता. एलसीएच क्रोमा आनी एचएसएल संतृप्ती ह्या दोनूय प्रकारांनी रंगाची तीव्रता वा गिरेस्तकाय वर्णन करतात, पूण ते वेगवेगळ्या तरेन करतात. एलसीएच म्हाका रंगां मदीं चड व्यापक श्रेणी आनी चड अदमासाक येवपी मिश्रण दिता.
तशेंच हांवें रंगांत बदल करून रंगांचो पॅलेट तयार करूंक शकता जो समान हळुवारपण आनी क्रोमा मोलां वांटून घेता. एचएसएल आनी एलसीएच ह्या दोनूय प्रकारांत रंग वर्णपट तांबड्या रंगासावन सुरू जावन पाचव्या आनी निळ्या रंगांतल्यान वता आनी तांबड्या रंगांत परत येता.
ओकेएलसीएच कित्याक बदललो हांव रंगा विशीं कसो विचार करतां OKLCH रंग जाग्या खातीर ब्राउझर आदार आतां व्यापक आसा, जरी डिझायन साधनां — Sketch सयत — धरूंक नात. सुदैवान ताका लागून तुमकां OKLCH वापरपाक आडावंक फावना. ब्राउझर तुमकां Hex, HSL, LAB, आनी RGB मोलां OKLCH त खोशीन रुपांतरीत करतले. तुमी खंयच्याय जाग्यार फावंडेशन रंगा वांगडा CSS सानुकूल गुणधर्म व्याख्या करूंक शकतात, हेक्स सयत: /* फावंडेशन रंग */ --बुन्याद: # 5accd6;
तातूंतल्यान मेळिल्ले खंयचेय रंग आपोआप ओकेएलसीएचांत रुपांतरीत जातले: --बुनियादी-उजवाड: oklch (var (--फाउंडेशन) पासून [...]; } --फाउंडेशन-मध्य: oklch (var (--फाउंडेशन) पासून [...]; } --फाउंडेशन-डार्क: oklch (var (--फाउंडेशन) पासून [...]; }
सापेक्ष रंग एक डिझायन प्रणाली म्हणून सापेक्ष रंग म्हणल्यार अशें समजून घेयात: “हो रंग घेयात, ताका ट्वीक करात, मागीर म्हाका परिणाम दिवचो.” रंग समायोजीत करपाचे दोन मार्ग आसात: निरपेक्ष बदल आनी प्रमाणबध्द बदल. कोडांत ते सारके दिसतात, पूण एकदां फावंडेशन रंग अदलाबदल करपाक सुरवात केल्या उपरांत ते सामके वेगळे वागतात. तो फरक समजून घेवप होच सापेक्ष रंगाचो वापर करून यंत्रणेंत रुपांतरीत करूंक शकता. /* फावंडेशन रंग */ --बुन्याद: # 5accd6;
देखीक, म्हज्या फावंडेशन रंगाचें हळदुवेंपण मोल 0.7837, जाल्यार गडद आवृत्तीचें मोल 0.5837 आसा. फरक मेजपाक, हांव उंचेल्या मोलांतल्यान सकयलें मोल वजा करतां आनी calc() फंक्शन वापरून परिणाम लागू करतां: --बुन्याद-काळो: . oklch(var(--फाउंडेशन पासून) कॅल्क (एल - 0.20) सी एच);
हळदुवो रंग मेळोवपा खातीर हांव ताचे बदला फरक जोडटां: --बुन्याद-उजवाड: १. oklch(var(--फाउंडेशन पासून) कॅल्क (एल + 0.10) सी एच);
क्रोमा हें नांवसमायोजनां हीच प्रक्रिया करतात. म्हज्या फावंडेशन रंगाची तीव्रता 0.1035 वयल्यान 0.0035 मेरेन उणी करपाक, हांव एक मोल दुसऱ्या वयल्यान वजा करतां: oklch(var(--फाउंडेशन पासून) एल कॅल्क (सी - 0.10) एच);
रंगांचो पॅलेट तयार करपाक, हांव म्हज्या फावंडेशन रंगाच्या (200) आनी म्हज्या नव्या रंगाच्या (260) रंग मोलाचो फरक मेजतां: oklch(var(--फाउंडेशन पासून) एल सी कॅल्क (ज + 60));
तीं गणना निरपेक्ष आसतात. जेन्ना हांव एक थारावीक रक्कम वजा करतां तेन्ना हांव प्रभावीपणान म्हणटां, “सदांच इतलें वजा करात.” स्थिर मोलां जोडटना तेंच लागू जाता: कॅल्क (सी - 0.10) 1.1. कॅल्क (सी + 0.10) 1.1.
ह्या पद्दतीची मर्यादा हांवें कठीण रितीन शिकली. स्थिर क्रोमा मोलां वजा करपाचेर आदारून रावलो तेन्ना फावंडेशन बदलतकूच रंग राशीचे वटेन कोसळटाले. एका रंगा खातीर काम करपी पॅलेट दुसऱ्या रंगा खातीर कुशीक पडलो. गुणाकार वेगवेगळे तरेन वागता. क्रोमा गुणाकार करतना हांव ब्राउझराक सांगतां: “ह्या रंगाची तीव्रता एका प्रमाणांत उणी करात.” रंगांमदलो संबंद अखंड उरता, जेन्ना बुन्याद बदलता: कॅल्क (सी * 0.10) 1.1.
माय मूव इट, स्केल इट, रोटेट इट रुल्स
हळुवारपण हालयप (जोडप वा वजा करप), २. स्केल क्रोमा (गुणाकार), २. रंग घुंवडावप (अंश जोडप वा वजा करप).
तीव्रता बदल बेस रंगाच्या प्रमाणांत उरचे अशें म्हाका दिसता म्हणून हांव क्रोमा स्केल करतां. ह्यू संबंद घुंवपी आसतात, देखून ह्यू गुणाकार करप हाका अर्थ ना. हळुवारपण हें बोधात्मक आनी निरपेक्ष आसता — ताका गुणाकार केल्यार चड करून विचित्र परिणाम मेळटात.
एक रंग ते एक पुराय विशय सापेक्ष रंग म्हाका फावंडेशन रंग व्याख्या करपाक आनी तातूंतल्यान म्हाका जाय आशिल्लो दरेक रंग — भरप, स्ट्रोक, ग्रेडियेंट थांबप, सावळी — तयार करपाक परवानगी दिता. त्या वेळार रंग पॅलेट जावप बंद जाता आनी प्रणाली जावपाक लागता. एसव्हीजी चित्रांनी भरप, स्ट्रोक आनी ग्रेडियेंट हांचे मदीं समान थोडे रंग परतून वापरपाची प्रवृत्ती आसता. सापेक्ष रंग तुमकां त्या संबंदांची एकदां व्याख्या करूंक दिता आनी सगळेकडेन तांचो परत वापर करूंक दिता — जशें एनिमेटरांनी नवे दृश्य तयार करपाक पार्श्वभूंय परत वापरली.
फावंडेशन रंग एकदां बदलात, आनी दरेक व्युत्पन्न रंग आपोआप अद्ययावत जाता, हातान कांयच परतून गणीत करिनासतना. एनिमेटेड ग्राफिक्स भायर, बटण आनी दुवे अशा परस्पर घटकांच्या स्थिती खातीर रंग व्याख्या करपाक हांवें होच पद्दत वापरूं येतालो. हांवें म्हज्या “लुलाबाय-बाय बेअर” टून टायटलांत वापरिल्लो फावंडेशन रंग सायन दिसपी निळो. पार्श्वभूंय म्हज्या फावंडेशन आनी गडद आवृत्ती मदलो रेडियल ग्रेडियेंट.
पुरायपणान वेगवेगळ्या मूड आशिल्लीं पर्यायी आवृत्ती तयार करपाक, म्हाका फकत फावंडेशन रंग बदलपाची गरज आसा: --बुन्याद: # 5accd6; --ग्रेड-अंत: var (--बुन्याद); --grad-start: oklch (var (--फाउंडेशन कडल्यान) कॅल्क (एल - 0.2357) कॅल्क (सी * 0.833) एच);
रंग मोलाची डुप्लीकेट करिनासतना त्या सानुकूल गुणधर्मांक म्हज्या SVG ग्रेडियेंटाक बांदपाक, हांवें हार्ड-कोडेड स्टॉप-रंग मोलां इनलायन शैलींनी बदलल्यांत:
<मार्ग भरप="url (# bg-grad)" भरप="#5DCDD8" d="[...]"/>
फुडें, म्हजो Toon Text सदांच हांवें वेंचून काडिल्ल्या खंयच्याय फावंडेशन रंगा कडेन विपरीत आसा हाची खात्री करपाची गरज आशिल्ली. 180deg ह्यू घुंवडावप एक पूरक रंग तयार करता जो खात्रीन पॉप करता — पूण अस्वस्थपणान कंपन करूंक शकता: .मजकूर-उजवाड { . भरप: oklch(var(--फाउंडेशन पासून) एल सी कॅल्क (ज + 180)); } .
९०° स्थलांतरीत पुरायपणान पूरक नासतना जिवो दुय्यम रंग तयार जाता: .मजकूर-उजवाड { . भरप: oklch(var(--फाउंडेशन पासून) एल सी कॅल्क (ज - 90)); } .
Quick Draw McGraw’s 1959 Toon Title “El Kabong“ ची म्हजी मनरिजवण तशीच तंत्रां वापरता पूण चड विंगड विंगड पॅलेटान. देखीक, फावंडेशन रंग आनी गडद सावळी हांचे मदीं आनीक एक रेडियल ग्रेडियेंट आसा.
फाटल्यान आशिल्ली इमारत आनी झाड फकत एकाच बुन्यादी रंगाचीं वेगवेगळीं सावळी. त्या मार्गां खातीर म्हाका दोन अतिरिक्त भरपाचे रंग जाय आशिल्ले: .बग-मध्य { . भरप: oklch(var(--फाउंडेशन पासून) कॅल्क (एल - 0.04) कॅल्क (सी * 0.91) एच); } .
.बग-काळो { . भरप: oklch(var(--फाउंडेशन पासून) कॅल्क (एल - 0.12) कॅल्क (सी * 0.64) एच); } .
जेन्ना फावंडेशनां हालपाक लागतात आतां मेरेन हांवें दाखयल्लें सगळेंच स्थिर जालां. फावंडेशनाचे रंग बदलपाक कोणूय रंग पिकर वापरता तेन्ना लेगीत तो बदल क्षणांत जाता. पूण एनिमेटेड ग्राफिक्स क्वचितच एके सुवातेर उबे रावतात — सुचोवणी नांवांत आसा. म्हणल्यार, रंग जर प्रणालीचो भाग आसत जाल्यार ताकाय एनिमेट करपाक मेळना अशें कांयच कारण ना. फावंडेशन रंग एनिमेट करपाक म्हाका पयलीं ताच्या ओकेएलसीएच चॅनलांनी विभागपाची गरज आसा— हळुवारपण, क्रोमा, आनी रंग. पूण एक म्हत्वाचें अतिरिक्त पावल आसा: म्हाका तीं मोलां टायप केल्ले सानुकूल गुणधर्म म्हणून नोंद करपाची गरज आसा. पूण ताचो अर्थ कितें? पूर्वनिर्धारीतपणान, CSS सानुकूल गुणधर्म मोल रंग, लांबाय, क्रमांक वा हेर कितेंय पुरायपणान दाखयता काय ना हें ब्राउझराक खबर ना. ताचो अर्थ चड करून एनिमेशनाच्या वेळार तांकां सुटसुटीतपणान इंटरपोलेट करूंक मेळनात, आनी एका मोला वयल्यान दुसऱ्या मोलाक उडी मारतात. सानुकूल गुणधर्म नोंद केल्यार ब्राउझराक तो प्रतिनिधित्व करता त्या मोलाचो प्रकार आनी काळा प्रमाण ताणें कसो वागपाक जाय तें सांगता. ह्या प्रकरणांत, म्हाका ब्राउझरान म्हज्या रंग चॅनलांक क्रमांक म्हणून वागचो अशें दिसता, जाका लागून ते सुटसुटीतपणान एनिमेटेड जावंक शकतले. @ मालमत्ता --f-l { वाक्यरचना: "<संख्या>"; वारसो मेळटा: खरे; सुरवातीचें-मोल: 0.40; } .
@ मालमत्ता -- f-c { वाक्यरचना: "<संख्या>"; वारसो मेळटा: खरे; सुरवातीचें-मोल: 0.11; } .
@ मालमत्ता --f-h { वाक्यरचना: "<संख्या>"; वारसो मेळटा: खरे; सुरवातीचें-मोल: 305; } .
एकदां नोंदणी केल्या उपरांत, हे सानुकूल गुणधर्म मुळ CSS सारके वागतात. ब्राउझर तांकां फ्रेम-दर-फ्रेम इंटरपोलेट करूंक शकता. उपरांत त्या चॅनलांतल्यान फावंडेशन रंग परतून तयार करतां: --बुन्याद: oklch (var (--f-l) var (--f-c) var (--f-h));
हाका लागून फावंडेशन रंग हेर खंयच्याय संख्यात्मक मोलाभशेन सजीव जाता. हांगा एक सादें “श्वास” एनिमेशन आसा जें काळा प्रमाण हळूच हळुवारपण स्थलांतरीत करता: @कीफ्रेम्स उस्वास घेतात { 0%, 100% { --f-l: 0.36; } . 50% { --f-l: 0.46; } . } .
.टून-शीर्षक { . एनिमेशन: 10s सोयी-इन-आउट अनंत श्वास घेवप; } .
कारण भरप, ग्रेडियेंट आनी स्ट्रोकांतलो हेर दरेक रंग --foundation कडल्यान मेळ्ळा, ते सगळे एकठांय एनिमेट जातात, आनी हाताळणीन कांयच अद्ययावत करपाची गरज ना. एक एनिमेटेड रंग, जायते परिणाम हे प्रक्रियेचे सुरवेक, CSS सापेक्ष रंग मोलां चड शक्यताय दिवंक शकतात आनी तेच बरोबर तीं चालीक लावपाक सोपी करपाक शकतात काय कितें असो प्रस्न म्हाका पडलो. हालींच हांवें म्हज्या वेबसायटीच्या संपर्क पानाचेर नवी भांगराची खण पार्श्वभूंय जोडल्या, आनी पयल्या पुनरावृत्तींत चकचकीत आनी झूलपी तेल दिवे आशिल्ले.
CSS सापेक्ष रंग एनिमेटेड कशे तरेन खणाच्या भितरल्या भागाक दिव्यांतल्यान रंगांनी टिंट करून चड वास्तववादी करूं येता हाचो अभ्यास करपाचो आशिल्लो. खऱ्या उजवाडाचो जसो परिणाम तांच्या भोंवतणच्या संवसाराचेर जावचो अशें म्हाका दिसतालें. देखून, एका परस चड रंगांक एनिमेट करचे परस हांवें एक ल्हानशी लायटींग सिस्टीम तयार केली जी फकत एक रंग एनिमेट करता.
म्हजें पयलें काम म्हळ्यार पार्श्वभूंय आनी म्हज्या दिव्यां मदीं एक ओव्हरले थर स्लॉट करप: <मार्ग id="ओव्हरले" fill="var (--ओव्हरले-टिंट)" [...] style="मिश्रण-मिश्रण-मोड: रंग". />
हांवें मिक्स-ब्लेंड-मोड वापरलो: रंग कारण तें ताचे सकयल आशिल्लें टिंट करता आनी तेच बरोबर ताचे सकयल आशिल्ली प्रकाशमानताय तिगोवन दवरता. म्हाका फकत एनिमेशन चालू आसतना ओव्हरले दिसपाक जाय म्हणून, हांवें ओव्हरले ऑप्ट-इन केला: .svg-mine # ओव्हरले { . प्रदर्शन: ना; } .
@media (पसंत-उणें-गती: ना-पसंत) { .svg-mine [डेटा-एनिमेशन = चालू] # ओव्हरले { प्रदर्शन: ब्लॉक; अपारदर्शकता: ०.५; } . } .
ओव्हरले जाग्यार आशिल्लो, पूण अजून दिव्यां कडेन जोडिल्लो नाशिल्लो. म्हाका उजवाडाचो स्त्रोत जाय आशिल्लो. म्हजे दिवे सादे आसतात, आनी दरेक दिवेंत एक वर्तुळ घटक आसता, जो हांवें फिल्टरान धूसर केला. फिल्टराक लागून पुराय वर्तुळाचेर खूब मोव धूसरपण येता.
ओव्हरले आनी दिवे वेगळे एनिमेट करचे परस, हांव एकूच “ज्वाला” रंग टोकन एनिमेट करतां आनी तातूंतल्यान हेर सगळें मेळयता. पयलीं, हांव OKLCH चॅनलांक तीन टायप केल्ले सानुकूल गुणधर्म नोंद करतां: @ मालमत्ता --fl-l { वाक्यरचना: "<संख्या>"; वारसो मेळटा: खरे; सुरवातीचें-मोल: 0.86; } . @ मालमत्ता --fl-c { वाक्यरचना: "<संख्या>"; वारसो मेळटा: खरे; सुरवातीचें-मोल: 0.12; } . @ मालमत्ता --fl-h { वाक्यरचना: "<संख्या>"; वारसो मेळटा: खरे; सुरवातीचें-मोल: ९५; } .
हांवें त्या चॅनलांक एनिमेटेड केलें, मुद्दाम कांय फ्रेम संत्र्या कडेन धुकळ्ळे म्हणजे झिलमिल उज्याच्या उजवाडा प्रमाण स्पश्ट वाचता:
@कीफ्रेम्स ज्वाला { ०%, १००% { --fl-l: ०.८६; --fl-c: 0.12 आनी डी. --fl-h: ९५ आनी डी. } . 6% { --fl-l: 0.91; --fl-c: 0.10 आनी 0.10; --fl-h: ९२ हें; } . 12% { --fl-l: 0.83; --fl-c: 0.14 आनी डी. --fl-h: 100 हें नांव; } . १८% { --fl-l: ०.८८ आनी डी. --fl-c: 0.11 आनी डी. --fl-h: ९४ आनी डी. } . २४% { --fl-l: ०.८२ आनी डी. --fl-c: 0.16 आनी 0.16; --fl-h: ८२ हें; } . 30% { --fl-l: 0.90; --fl-c: 0.12 आनी डी. --fl-h: ९० आनी डी. } . ३६% { --fl-l: ०.७९ आनी डी. --fl-c: 0.17 आनी डी. --fl-h: ७६ आनी डी. } . ४४% { --fl-l: ०.८७ आनी डी. --fl-c: 0.12 आनी डी. --fl-h: ९६ आनी डी. } . ५२% { --fl-l: ०.८१ आनी डी. --fl-c: 0.15 आनी डी. --fl-h: १०२ हें; } . 60% { --fl-l: 0.89; --fl-c: 0.11 आनी डी. --fl-h: ९३ आनी डी. } . ६८% { --fl-l: ०.८३ आनी डी. --fl-c: 0.16 आनी 0.16; --fl-h: ८५ हें; } . ७६% { --fl-l: ०.९१ आनी डी. --fl-c: 0.10 आनी 0.10; --fl-h: ९१ आनी डी. } . ८४% { --fl-l: ०.८५ आनी डी. --fl-c: 0.14 आनी डी. --fl-h: ९८ आनी डी. } . ९२% { १.--fl-l: 0.80 आनी डी. --fl-c: 0.17 आनी डी. --fl-h: ७४ आनी डी. } . } .
मागीर हांवें तें एनिमेशन SVG कडेन स्कॉप केलें, देखून शेअर केल्ले चड-उणे दिवे आनी म्हज्या ओव्हरले ह्या दोनूय प्रकारांक उपलब्ध आसात:
@media (पसंत-उणें-गती: ना-पसंत) { .svg-mine [डेटा-एनिमेशन = चालू] { एनिमेशन: ज्वाला 3.6s अनंत रेखीव; एकांतवास: वेगळे करप;
/* एनिमेटेड चॅनलांतल्यान ज्वाला रंग तयार करचो */ --ज्वाला: oklch (var (--fl-l) var (--fl-c) var (--fl-h));
/* ज्वालापसून मेळपी दिव्याचो रंग */ --दीप-कोर: oklch (var (--ज्वाला) पासून calc (एल + 0.05) calc (सी * 0.70) एच);
/* त्याच ज्वालापसून मेळपी ओव्हरले टिंट */ --ओव्हरले-टिंट: oklch (var (--ज्वाला पासून) कॅल्क (एल + 0.06) कॅल्क (सी * 0.65) कॅल्क (एच - 10)); } . } .
निमाणें हांवें ते व्युत्पन्न रंग चकचकीत दिव्यांक आनी तांचो परिणाम जावपी आच्छादनाचेर लायलो: @media (पसंत-उणें-गती: ना-पसंत) { .svg-mine [डेटा-एनिमेशन = चालू] # खण-दीप-1 > मंडळ, .svg-mine [डेटा-एनिमेशन = चालू] # खण-दीप-2 > मंडळ { भरप: var (--दीप-कोर); } .
.svg-mine [डेटा-एनिमेशन = चालू] # ओव्हरले { प्रदर्शन: ब्लॉक; भरप: var (--ओव्हरले-टिंट); अपारदर्शकता: ०.५; } . } .
ज्वाला संत्रे कडेन वळटा तेन्ना दिवे उबें जातात आनी तांचे वांगडा दृश्य उबें जाता. ज्वाला थंड जातकच सगळें एकठांय बसता. सगळ्यांत बरो म्हणल्यार कांयच हाताळणीन बरयल्लें ना. जर हांवें फावंडेशन रंग बदललो वा ज्वाला एनिमेशन रेंज ट्वीक केल्यार, पुराय प्रकाश प्रणाली एकाच वेळार अद्ययावत जाता. निमाणो निकाल तुमकां म्हज्या संकेतथळार पळोवंक मेळटा. पुनर्वापर, पुनर्उद्देश्य, परतून भेट दिवप त्या हान्ना-बार्बेरा एनिमेटरांक गरजे भायर घटकांचो परतून उद्देश करचो पडलो, पूण हांव रंग परतून वापरतां कारण ताका लागून म्हजें काम चड सुसंगत आनी सांबाळपाक सोंपें जाता. CSS सापेक्ष रंग मोलां म्हाका परवानगी दितात:
एकूच फावंडेशन रंग व्याख्या करप, . हेर रंग ताचे कडेन कशे संबंदीत आसात हाचें वर्णन करात, सगळेकडेन त्या संबंदांचो परत वापर करचो, आनी... एक मोल बदलून प्रणाली सजीव करात.
सापेक्ष रंग फकत थीमिंग सोंपें करपाक शकना. जंय रंग, गती सारको, हेतून आसता — आनी जंय एक मोल बदलल्यार ताचे सकयल आशिल्लें काम परतून बरयनासतना पुराय दृश्याचें रुपांतर जावंक शकता अशें विचार करपाची पद्दत प्रोत्साहन दिता.
