रंग और उन्नत फ़ंक्शन: oklch, color-mix, min/max

perceptual रंग स्थानों, relative color syntax और typed गणित फ़ंक्शनों का लाभ उठाएँ ताकि ऐसे डिज़ाइन सिस्टम बनाएँ जिन्हें ब्राउज़र आपके लिए गणना करता है।

10 मिनट · 3 प्रश्न

hsl() की संरचनात्मक कमी: इसकी lightness perceptual नहीं है। hsl(60 100% 50%) (पीला) चौंधियाने वाला दिखता है जबकि hsl(240 100% 50%) (नीला) गहरा दिखता है, समान L पर। oklch इसे ठीक करता है: इसका L घटक (0 से 1) अनुभूत lightness मापता है, C chroma है (निरपेक्ष संतृप्ति, 0 से लगभग 0.37) और H hue का कोण है। समान L पर H बदलने से अनुभूत चमक बनी रहती है: आपकी पैलेट की विविधताएँ आख़िरकार पूर्वानुमेय बन जाती हैं। relative color syntax (from) के साथ मिलकर, ब्राउज़र आपके hover, muted या dark वैरिएंट्स को स्वयं व्युत्पन्न कर लेता है।

:root {
  --brand: oklch(0.65 0.19 255);
  --dark: oklch(from var(--brand) calc(l - 0.15) c h);
  --muted: oklch(from var(--brand) l calc(c / 2) h);
  --accent: oklch(from var(--brand) l c calc(h + 180));
}

oklch ऐसे रंगों का वर्णन कर सकता है जो sRGB gamut के बाहर हों, या Display-P3 के भी बाहर। जब स्क्रीन उन्हें नहीं दिखा सकती तो ब्राउज़र क्या करता है? कोई कठोर चैनल-दर-चैनल clip नहीं: स्पेसिफ़िकेशन एक gamut mapping निर्धारित करती है जो lightness और hue को संरक्षित रखते हुए chroma को क्रमशः घटाती है, जब तक रंग लक्षित gamut में फ़िट न हो जाए। आप @media (color-gamut: p3) के साथ wide-gamut स्क्रीनों को स्पष्ट रूप से लक्षित कर सकते हैं। एक और मिश्रण उपकरण: color-mix(), जिसका पहला तर्क - interpolation स्थान - वास्तव में परिणाम बदल देता है: नीले और पीले का एक in srgb मिश्रण धूसर हो जाता है, जबकि in oklch चटख hues में से होकर गुज़रता है।

.badge {
  background: color-mix(in oklch, crimson 70%, white);
  border-color: color-mix(
    in oklch,
    var(--brand),
    transparent 60%
  );
}

min(), max() और clamp() typed गणित फ़ंक्शन हैं: वे ऐसी इकाइयों को मिलाना स्वीकार करते हैं जो parse समय पर असंगत हैं (rem + vw) क्योंकि समाधान used-value समय पर होता है, एक बार viewport ज्ञात हो जाने पर। clamp(MIN, VAL, MAX) बिल्कुल max(MIN, min(VAL, MAX)) के तुल्य है - एक स्पेक परिणाम: यदि MIN, MAX से अधिक हो, तो MIN जीतता है। fluid typography के लिए, बीच वाली वैल्यू में हमेशा एक rem घटक शामिल करें: बिना rem का font-size: clamp(1rem, 2.5vw, 3rem) उपयोगकर्ता के text zoom को अनदेखा कर देगा, जो एक वास्तविक accessibility समस्या है।

h1 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 3rem);
}
.sidebar {
  width: min(30%, 20rem);
  padding-left: max(1rem, env(safe-area-inset-left));
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. oklch, hsl की तुलना में कौन-सा निर्णायक लाभ देता है?
   • लिखने के लिए एक छोटी syntax
   • एक L lightness जो एक hue से दूसरे तक perceptually एक समान है
   • sRGB gamut के भीतर बने रहने की गारंटी
   • alpha चैनल का समर्थन करने वाला एकमात्र रंग स्थान
2. जब कोई oklch रंग स्क्रीन के gamut से अधिक हो जाता है तो ब्राउज़र क्या करता है?
   • यह घोषणा को अनदेखा करता है और पिछला रंग बनाए रखता है
   • यह एक gamut mapping लागू करता है जो मुख्यतः chroma घटाती है
   • यह हर RGB चैनल को स्वतंत्र रूप से clip करता है, बिना किसी आगे की प्रोसेसिंग के
3. clamp(MIN, VAL, MAX) में, यदि गणना की गई MIN वैल्यू MAX से अधिक हो जाए तो क्या होता है?
   • घोषणा अमान्य हो जाती है और अनदेखी कर दी जाती है
   • MAX जीतता है और परिणाम को सीमित करता है
   • MIN जीतता है, क्योंकि clamp, max(MIN, min(VAL, MAX)) में विस्तारित होता है