पाठ्यक्रम सिफारिश:

CSS oklch() फ़ंक्शन

निर्धारण और उपयोग oklch() CSS में

oklch() फ़ंक्शन, OKLCH रंग स्पेस में रंग निर्धारित करने के लिए इस्तेमाल किया जाता है。

फ़ंक्शन बहुत ही सरल है: आपको इस्तेमाल करने वाली चमकीलाई/चमक (L) की मात्रा, रंग का ग्रे की तीव्रता (C), और रंग को खुद (H) सोचना होगा। इसके अलावा, आप एक पारदर्शिता चैनल मान (A) भी जोड़ सकते हैं, जो रंग की अस्पष्टता को व्यक्त करता है。

अलग-अलग इंस्टांस निर्धारित करना: oklch() रंग:

/* अलग-अलग चमकीलाई के ग्रीन /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ 不同亮度的黄色 /
#p4 {background-color: oklch(30% 0.4 100);}
/ अलग-अलग चमकीलाई के लिए पीला /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ अलग-अलग चमकीलाई के लिए लाल */
#p7 {background-color: oklch(30% 0.4 20);}

#p8 {background-color: oklch(60% 0.4 20);}

#p9 {background-color: oklch(100% 0.4 20);}

स्वयं को प्रयोग करें

CSS वाक्यविन्यासfrom शब्द से शुरू होता है, इसके बाद आधार रंग का मान आता है。 0 (या 0%) श्वेत को प्रदर्शित करता है, 1 (या 100%) रेशम को प्रदर्शित करता है。 H / Aसापेक्षिक वाक्यविन्यास
oklch(from )
from शब्द से शुरू होता है, इसके बाद आधार रंग का मान आता है。

यह अपेक्षित रंग के आधार रंग है।

L

इसके बजाय none (इसका अर्थ 0% है) का उपयोग किया जा सकता है।
0 (या 0%) श्वेत को प्रदर्शित करता है, 1 (या 100%) रेशम को प्रदर्शित करता है。

C

अनिवार्य। रंग के रंगांक (रंग की मात्रा) को परिभाषित करता है, यह संख्या या प्रतिशत (0 से -0.4 तक की संख्या या -100% से 100% तक की प्रतिशत) हो सकता है。

सबसे निचले मान (0% या -0.4) पर, रंग अधिक ग्रे के निकट होता है。

इसके बजाय none (इसका अर्थ 0% है) का उपयोग किया जा सकता है।
H

अनिवार्य। रंग को परिभाषित करता है, यह संख्या या दूरी (0 से 360 तक) हो सकता है。

इसके बजाय none (इसका अर्थ 0 डिग्री है) का उपयोग किया जा सकता है।
/ A

वैकल्पिक। रंग के पारदर्शी चैनल के मान को प्रदर्शित करता है (0% या 0 का अर्थ पूरी तरह से पारदर्शी है, 100% या 100 का अर्थ पूरी तरह से अपारदर्शी है)。

अभिकर्ता वाक्यविन्यास

oklch(

इसके बजाय none (अस्पष्ट पारदर्शी चैनल के लिए) का उपयोग किया जा सकता है।

डिफ़ॉल्ट मान 100% है। वर्णन from शब्द से शुरू होता है, इसके बाद आधार रंग का मान आता है。 0 (या 0%) श्वेत को प्रदर्शित करता है, 1 (या 100%) रेशम को प्रदर्शित करता है。 H / Aसापेक्षिक वाक्यविन्यास
oklch(from )
मान वर्णन

from

color
from शब्द से शुरू होता है, इसके बाद आधार रंग का मान आता है。

यह अपेक्षित रंग के आधार रंग है।

L

इसके बजाय none (इसका अर्थ 0% है) का उपयोग किया जा सकता है।
0 (या 0%) श्वेत को प्रदर्शित करता है, 1 (या 100%) रेशम को प्रदर्शित करता है。

C

अनिवार्य। रंग के रंगांक (रंग की मात्रा) को परिभाषित करता है, यह संख्या या प्रतिशत (0 से -0.4 तक की संख्या या -100% से 100% तक की प्रतिशत) हो सकता है。

सबसे निचले मान (0% या -0.4) पर, रंग अधिक ग्रे के निकट होता है。

इसके बजाय none (इसका अर्थ 0% है) का उपयोग किया जा सकता है।
H

अनिवार्य। रंग को परिभाषित करता है, यह संख्या या दूरी (0 से 360 तक) हो सकता है。

इसके बजाय none (इसका अर्थ 0 डिग्री है) का उपयोग किया जा सकता है।
/ A

वैकल्पिक। रंग के पारदर्शी चैनल के मान को प्रदर्शित करता है (0% या 0 का अर्थ पूरी तरह से पारदर्शी है, 100% या 100 का अर्थ पूरी तरह से अपारदर्शी है)。

इसके बजाय none (अस्पष्ट पारदर्शी चैनल के लिए) का उपयोग किया जा सकता है। मूलभूत मान 100% है।

तकनीकी विवरण

संस्करण: CSS Color Module Level 4

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

तालिका में नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फ़ायरफॉक्स सैफारी ओपेरा
oklch()
111 111 113 15.4 97
पैरामीटर में नंबर और प्रतिशत का मिश्रण करना
116 116 113 16.2 102

संबंधित पृष्ठ

संदर्भःसीएसएस रंग

संदर्भःCSS hsl() फ़ंक्शन

संदर्भःCSS hwb() फ़ंक्शन

संदर्भःCSS lab() फ़ंक्शन

संदर्भःCSS lch() फ़ंक्शन

संदर्भःCSS oklab() फ़ंक्शन