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

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

Rachel Andrew

सेलिब्रेशन: यह वेब सुविधा अब सभी तीन मुख्य ब्राउज़र इंजन में उपलब्ध है!

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

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

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

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 111
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 111
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 113
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 15

सोर्स

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

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 111
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 111
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 113
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 15

सोर्स

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

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

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

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

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 111
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 111
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 113
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 16.2

सोर्स

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

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