सभी प्रमुख इंजन में नए सीएसएस कलर स्पेस और फ़ंक्शन

सभी मुख्य इंजन अब नए सीएसएस कलर स्पेस और फ़ंक्शन के साथ काम करते हैं. जानें कि इनका इस्तेमाल करके, आपके डिज़ाइन को ज़्यादा आकर्षक कैसे बनाया जा सकता है.

Rachel Andrew

सीएसएस अब ऐसे कलर स्पेस के साथ काम करती है जिनकी मदद से, sRGB गैमट से बाहर के रंगों को ऐक्सेस किया जा सकता है. इसका मतलब है कि एचडी (हाई डेफ़िनिशन) गैमट के रंगों का इस्तेमाल करके, एचडी डिसप्ले के साथ काम किया जा सकता है. वेब पर रंग का बेहतर इस्तेमाल करने के लिए, इस सुविधा में नए फ़ंक्शन जोड़े गए हैं.

सीएसएस से कलर स्पेस ऐक्सेस करना

हमारे पास पहले से ही कई फ़ंक्शन हैं, जिनकी मदद से sRGB गैमट—rgb(), hsl(), और hwb() में रंगों को ऐक्सेस किया जा सकता है. अब ब्राउज़र में color() फ़ंक्शन काम करता है. यह किसी भी आरजीबी कलर स्पेस में रंगों को ऐक्सेस करने का सामान्य तरीका है. इसमें sRGB, Display P3, और Rec2020 शामिल हैं. यहां दी गई सीएसएस में कुछ उदाहरण देखे जा सकते हैं:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

सोर्स

साथ ही, lch(), lab(), oklch(), और oklab() का इस्तेमाल करके, sRGB के अलावा अन्य कलर स्पेस को ऐक्सेस करने की सुविधा देने वाले कई फ़ंक्शन भी काम करते हैं.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

सोर्स

हाई डेफ़िनिशन सीएसएस कलर गाइड में, इन सभी अलग-अलग कलर स्पेस के बारे में जानकारी मिल सकती है.

color-mix() फ़ंक्शन

इन नए कलर स्पेस के साथ-साथ, सभी इंजन अब color-mix() फ़ंक्शन के साथ काम करते हैं. इस फ़ंक्शन की मदद से, किसी भी कलर स्पेस में एक रंग को दूसरे रंग में मिलाया जा सकता है. नीचे दी गई सीएसएस में, srgb कलर स्पेस में सफ़ेद में 25% नीला रंग मिलाया गया है.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

सोर्स

color-mix() के बारे में ज़्यादा जानें

इन नए फ़ंक्शन और कलर स्पेस की मदद से, वेब पर बेहतरीन एचडी कलर का इस्तेमाल किया जा सकता है. प्रेरणा पाने के लिए, gradient.style पर जाकर एचडी ग्रेडिएंट जनरेटर का इस्तेमाल करके, कुछ सुंदर ग्रेडिएंट बनाएं.