"ग्रे dead zone" के बिना सुंदर CSS gradients बनाना
(joshwcomeau.com)- पीले से नीले में बदलने वाला linear gradient बनाने पर बीच में "gray dead zone" बन जाता है
→ ऐसा इसलिए होता है क्योंकि CSS linear-gradient algorithm RGB का गणितीय average निकालकर pixels के color values तय करता है
→ RGB color space में अगर सभी RGB values बराबर हों, तो रंग हमेशा grayscale बनता है
-
अगर average HSL (Hue / Saturation / Lightness) में निकाला जाए, तो gray dead zone नहीं बनता
-
लेकिन सिर्फ HSL से gradient बनाने पर, "क्योंकि यह human perception को ध्यान में नहीं रखता", यह बहुत ज़्यादा bright और vivid दिखता है
→ समान brightness वाले रंग होने पर भी पीला रंग अधिक bright महसूस होता है
-
इसलिए HCL जैसे modes, जो human vision को model करते हैं, ज़्यादा बेहतर हो सकते हैं
-
समस्या यह है कि CSS अभी HSL/HCL जैसे color modes को specify करने की सुविधा नहीं देता
→ CSS Gradient सिर्फ 2 colors तक सीमित नहीं है, इसलिए 10 या उससे अधिक कई colors specify करके इसका समाधान किया जा सकता है
- साथ में जारी किए गए Gradient Generator की मदद से LRGB/HSL/HSV/HCL जैसे color modes का उपयोग करके CSS gradients बनाकर इस्तेमाल किए जा सकते हैं
1 टिप्पणियां
HSL से जुड़ी सामग्री मैंने पहले की पोस्ट में संकलित की थी.