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

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

रेचल ऐंड्रू

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

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

हमारे पास पहले से ही कई फ़ंक्शन हैं, जिनकी मदद से हम एसआरजीबी गैमट में रंगों को ऐक्सेस कर सकते हैं—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);
}

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

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

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

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

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

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

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

यह नई इंटरऑपरेबल सीरीज़ का हिस्सा है