CSS में रंग इंटरपोलेशन: OKLCH क्यों जीतता है

हर बार जब CSS दो रंगों को मिलाता है — ग्रेडिएंट में, color-mix() में, या ट्रांजिशन में — यह रंग इंटरपोलेशन करता है। आधुनिक CSS के साथ, आप अब इंटरपोलेशन के लिए रंग स्थान चुन सकते हैं। और OKLCH लगातार सर्वोत्तम परिणाम देता है।

RGB इंटरपोलेशन समस्या: गंदे मिडपॉइंट

जब आप रंग स्थान निर्दिष्ट किए बिना CSS ग्रेडिएंट लिखते हैं, तो ब्राउज़र sRGB में इंटरपोलेट करता है।

/* डिफ़ॉल्ट: sRGB में इंटरपोलेट */
background: linear-gradient(to right, #FF0000, #00FF00);

इस ग्रेडिएंट का मिडपॉइंट sRGB में #808000 है — एक सुस्त जैतून। मूल समस्या यह है कि sRGB अवगत रूप से समान नहीं है।

गामा समस्या

background: linear-gradient(in srgb-linear, red, blue);

Linear sRGB gamma sRGB से बेहतर है, लेकिन यह अभी भी hue-shift और saturation-drop समस्याओं को हल नहीं करता।

HSL Hue शिफ्ट

HSL इंटरपोलेशन की अपनी विशेषता विफलता मोड है: hue शिफ्ट। गहरी समस्या यह है कि HSL की Lightness अवगत रूप से समान नहीं है।

/* HSL ग्रेडिएंट — हुए के पार अवगत चमक असमान है */
background: linear-gradient(in hsl, hsl(60 100% 50%), hsl(240 100% 50%));

OKLCH: संगति और अवगत एकरूपता

OKLCH को Björn Ottosson ने 2020 में डिजाइन किया था। इसके तीन चैनल — L (lightness), C (chroma), और H (hue angle) — इस तरह कैलिब्रेटेड हैं कि L में समान संख्यात्मक परिवर्तन hue की परवाह किए बिना अवगत चमक में समान परिवर्तन उत्पन्न करते हैं।

/* OKLCH ग्रेडिएंट — जीवंत, अवगत रूप से समान */
background: linear-gradient(in oklch, red, blue);

साथ-साथ तुलना

color-mix() फंक्शन

color: color-mix(in oklch, #FF5733 50%, #3498DB);

व्यावहारिक color-mix() उपयोग

पारदर्शी वेरिएंट बनाना:

:root {
  --brand: #2563EB;
  --brand-10: color-mix(in oklch, var(--brand) 10%, transparent);
  --brand-50: color-mix(in oklch, var(--brand) 50%, transparent);
}

सफेद या काले की ओर टिंटिंग:

:root {
  --brand: #2563EB;
  --brand-light: color-mix(in oklch, var(--brand) 70%, white);
  --brand-dark:  color-mix(in oklch, var(--brand) 70%, black);
}

होवर स्टेट व्युत्पत्ति:

.button:hover {
  background: color-mix(in oklch, var(--brand) 80%, black);
}

ग्रेडिएंट इंटरपोलेशन रंग स्थान

/* sRGB (डिफ़ॉल्ट, अक्सर गंदा) */
background: linear-gradient(to right, red, blue);

/* OKLCH (अनुशंसित: जीवंत, अवगत रूप से समान) */
background: linear-gradient(in oklch to right, red, blue);

OKLCH में Hue इंटरपोलेशन दिशा

/* छोटा चाप (डिफ़ॉल्ट) */
background: linear-gradient(in oklch, hsl(30 100% 50%), hsl(270 100% 50%));

/* लंबा चाप — पीले, हरे, सियान से गुज़रता है */
background: linear-gradient(in oklch longer hue, hsl(30 100% 50%), hsl(270 100% 50%));

ब्राउज़र समर्थन

• Chrome/Edge: संस्करण 111 (मार्च 2023) से पूर्ण समर्थन
• Firefox: संस्करण 113 (मई 2023) से
• Safari: संस्करण 16.2 (दिसंबर 2022) से

पुराने ब्राउज़र के लिए फॉलबैक:

background: linear-gradient(to right, #FF5733, #3498DB);

@supports (background: linear-gradient(in oklch, red, blue)) {
  background: linear-gradient(in oklch to right, #FF5733, #3498DB);
}

मुख्य निष्कर्ष

• sRGB इंटरपोलेशन (CSS डिफ़ॉल्ट) गंदे, असंतृप्त मिडपॉइंट उत्पन्न करता है।
• HSL इंटरपोलेशन असंगत अवगत चमक का परिचय देता है।
• OKLCH इंटरपोलेशन जीवंत, अवगत रूप से सुसंगत मिडपॉइंट उत्पन्न करता है।
• किसी भी ग्रेडिएंट में in oklch का उपयोग करें।
• Color Converter आपको hex मान OKLCH में बदलने देता है।
• Gradient Generator आपको किसी भी रंग जोड़े के लिए ग्रेडिएंट का पूर्वावलोकन करने देता है।