CSS3 का उपयोग करके इमेज सैचुरेशन एडजस्ट करना

फिल्टर सैचुरेट

CSS3 में इमेज को सैचुरेट करने के लिए filter प्रॉपर्टी के लिए saturate() मान का उपयोग करें।

सिंटैक्स:

filter: saturate(percentage | number);

मान:

• 0% / 0: पूरी तरह असंतृप्त (ग्रेस्केल)
• 100% / 1: मूल सैचुरेशन (डिफ़ॉल्ट)
• 100% से अधिक: सुपर-सैचुरेटेड (ज्वलंत रंग)

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: saturate(500%);
}
</style>
</head>
<body>
<h1>Spring Framework सीखें</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Spring Framework सीखें</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

आउटपुट

दूसरी इमेज 500% सैचुरेशन के साथ - अत्यधिक ज्वलंत, तीव्र रंग।

सैचुरेशन व्यावहारिक रेंज:

• 0-50%: म्यूटेड, फीके रंग
• 100%: प्राकृतिक रंग
• 150-200%: उन्नत, विविड (फोटोग्राफी के लिए अच्छा)
• 300%+: कलात्मक, सुपर-सैचुरेटेड

अन्य फिल्टर्स के साथ संयोजन:

img.vivid {
  filter: saturate(150%) contrast(110%) brightness(105%);
}

img.vintage {
  filter: saturate(50%) sepia(30%) contrast(90%);
}

एनिमेशन उदाहरण:

@keyframes pulse-saturation {
  0%, 100% { filter: saturate(100%); }
  50% { filter: saturate(200%); }
}
img.hover-saturate:hover {
  animation: pulse-saturation 1s ease-in-out;
}

उपयोग के मामले:

• फोटो एन्हांसमेंट (विविड लुक)
• होवर/इंटरैक्शन फीडबैक
• थीमिंग (डार्क मोड में कम सैचुरेशन)
• कलात्मक इफेक्ट्स
• लोडिंग स्टेट्स (ग्रेस्केल → रंग)

ब्राउज़र सपोर्ट:

सभी आधुनिक ब्राउज़र्स। IE में सपोर्ट नहीं।