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

रोज़ा और उपयोग

CSS का color-mix() फ़ंक्शन दिये गए रंग-स्पेस में निर्दिष्ट अनुपात में दो रंग-मूल्यों को मिश्रित करने के लिए इस्तेमाल किया जाता है。

उदाहरण

उदाहरण 1

hsl रंग जीयोमेट्री में निर्दिष्ट अनुपातों में दोनों रंग मानों को मिश्रित करें:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

अपने आप साफ़ी करें

उदाहरण 2

oklab रंग जीयोमेट्री में विभिन्न अनुपातों में दोनों रंग मानों को मिश्रित करें:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

अपने आप साफ़ी करें

CSS व्याकरण

color-mix(color-interpolation-method, color1 %, color2 %)

तकनीकी विवरण

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

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

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

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