Sass रंग फ़ंक्शन

Sass रंग फ़ंक्शन

हम Sass में रंग फ़ंक्शन को तीन भागों में विभाजित करते हैं: रंग फ़ंक्शन सेट करना, रंग फ़ंक्शन प्राप्त करना और रंग फ़ंक्शन पर कार्य करना:

Sass रंग फ़ंक्शन सेटिंग

Sass रंग कैलिब्रेशन फ़ंक्शन फ़ंक्शन
rgb(लाल, ग्रीन, नीला)

Red-Green-Blue (RGB) मॉडल का उपयोग करके रंग सेट करें。
rgb(red, green, blue) के माध्यम से RGB रंग मान निर्धारित करें。
प्रत्येक पैरामीट इस रंग की तीव्रता को परिभाषित करता है, जो 0 से 255 तक का पूर्णांक हो सकता है या प्रतिशत मान (0% से 100% तक) हो सकता है。

实例：

rgb(0, 0, 255);
// नीला रंग में प्रदर्शित होता है क्योंकि blue पैरामीट को अधिकतम मान (255) दिया गया है और अन्य पैरामीट 0 के रूप में सेट किए गए हैं
rgba(लाल, ग्रीन, नीला, alpha)

Red-Green-Blue-Alpha (RGBA) मॉडल का उपयोग करके रंग सेट करें।
RGBA रंग मान RGB रंग मान का विस्तार है, जिसमें alpha चैनल है - यह रंग की अपारकता निर्दिष्ट करता है।
alpha पारामीटर 0.0 (पूर्ण रोशनी) और 1.0 (पूर्ण अपारकता) के बीच की संख्या है।

实例：

rgba(0, 0, 255, 0.3); // पारकता वाला नीला
hsl(उद्ग्रता, संतृप्ति, उज्ज्वलता)

Hue-Saturation-Lightness (HSL) मॉडल का उपयोग करके रंग सेट करें - यह रंग के गोलियारे निर्देशांक का प्रतिनिधित्व करता है।
Hue (उदाहरण) रंग चक्र पर की घंटी का घण्टा (0 से 360) है - 0 या 360 लाल है, 120 हरा है, 240 नीला है
Saturation (संतृप्ति) प्रतिशत है; 0% ग्रे शीघ्रांति, 100% पूर्ण रंग है।
Lightness (चमकीलापन) भी प्रतिशत है; 0% काला है, 100% श्वेत है।

实例：

hsl(120, 100%, 50%); // हरा
hsl(120, 100%, 75%); // हल्का हरा
hsl(120, 100%, 25%); // गहरा हरा
hsl(120, 60%, 70%); // हल्का हरा

hsla(उद्ग्रता, संतृप्ति, उज्ज्वलता, alpha)

Hue-Saturation-Lightness-Alpha (HSLA) मॉडल का उपयोग करके रंग सेट करें।
HSLA रंग मान HSL रंग मान का विस्तार है, जिसमें alpha चैनल है - यह रंग की अपारकता निर्दिष्ट करता है।
alpha पारामीटर 0.0 (पूर्ण रोशनी) और 1.0 (पूर्ण अपारकता) के बीच की संख्या है।

实例：

hsl(120, 100%, 50%, 0.3); // अपारकता वाला हरा
hsl(120, 100%, 75%, 0.3); // अपारकता वाला हल्का हरा

grayscale(color)

रंग के समान चमकीलापन वाला ग्रे सेट करें।

实例：

grayscale(#7fffd4);

परिणाम: #c6c6c6
complement(color)

रंग का संपूरक रंग सेट करें।

实例：

complement(#7fffd4);

परिणाम: #ff7faa
invert(color, रंग 1 और रंग 2 का मिश्रित रंग बनाएं।)

रंग का उल्टा रंग या नकारात्मक रंग सेट करें।
रंग 1 और रंग 2 का मिश्रित रंग बनाएं।पारामीटर वैकल्पिक है, वह 0% और 100% के बीच की संख्या होनी चाहिए। मूलभूत मान 100% है।

实例：

invert(white);

परिणाम: black

Sass रंग फ़ंक्शन

Sass रंग कैलिब्रेशन फ़ंक्शन फ़ंक्शन
red(color)

0 से 255 के बीच के संख्या से रंग के लाल रंग की मांग करें।

实例：

red(#7fffd4);

परिणाम: 127

red(red);

blue(blue);
green(color)

0 से 255 के बीच के संख्या से रंग के हरी रंग की मांग करें।

实例：

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
परिणाम: 0color)

blue(

实例：

0 से 255 के बीच के संख्या के रूप में रंग के नीला मान बाहर ले आएं।

blue(#7fffd4);

परिणाम: 212

blue(blue);
परिणाम: 255color)

hue(

实例：

0deg से 360deg के बीच के संख्या के रूप में रंग के उद्ग्रता बाहर ले आएं।

hue(#7fffd4);
परिणाम: 160degcolor)

saturation(

实例：

0% से 100% के बीच के संख्या के रूप में रंग के HSL संतृप्ति बाहर ले आएं।

saturation(#7fffd4);
परिणाम: 100%color)

lightness(

实例：

0% से 100% के बीच के संख्या के रूप में रंग के HSL उज्ज्वलता बाहर ले आएं।

lightness(#7fffd4);
परिणाम: 74.9%color)

opacity(

实例：

alpha(

alpha(#7fffd4);
परिणाम: 1color)

opacity(

实例：

0 से 1 के बीच के संख्या के रूप में रंग के alpha चैनल बाहर ले आएं।

opacity(rgba(127, 255, 212, 0.5));

परिणाम: 0.5

Sass रंग कैलिब्रेशन फ़ंक्शन फ़ंक्शन
वर्णीकरण & उदाहरणबड़े भार का मतलब है कि अधिक, color2, रंग 1 और रंग 2 का मिश्रित रंग बनाएं।)

mix(
रंग 1 और रंग 2 का मिश्रित रंग बनाएं। भार
पैरामीटरों को 0% और 100% के बीच होना चाहिए। मूलभूत मान 50% है। बड़े भार का मतलब है कि अधिक。
कम भार का मतलब है कि अधिक color2。

adjust-hue(color, डिग्री)

नीलामा के उद्ग्रता को -360 डिग्री से 360 डिग्री के बीच के डिग्री में समायोजित करें।

实例：

adjust-hue(#7fffd4, 80deg);

परिणाम: #8080ff
adjust-color(color, लाल, ग्रीन, नीला, उद्ग्रता, संतृप्ति, उज्ज्वलता, alpha)

निर्दिष्ट मात्रा में एक या अधिक पैरामीटरों को समायोजित करें।
यह फ़ंक्शन मौजूदा रंग मान में निर्दिष्ट मात्रा को जोड़े या घटाता है।

实例：

adjust-color(#7fffd4, blue: 25);

परिणाम:
change-color(color, लाल, ग्रीन, नीला, उद्ग्रता, संतृप्ति, उज्ज्वलता, alpha)

रंग के एक या अधिक पैरामीटरों को नए मान में सेट करें।

实例：

change-color(#7fffd4, red: 255);

परिणाम: #ffffd4
scale-color(color, लाल, ग्रीन, नीला, संतृप्ति, उज्ज्वलता, alpha) एक या अधिक रंग पैरामीटरों को फैलाएं।
rgba(रंग, alpha)

दिया गया alpha चैनल के आधार से नई रंग बनाएं।

实例：

उदाहरण:}}

rgba(#7fffd4, 30%);
rgba(127, 255, 212, 0.3)color, amount) lighten(
amount HSL भराव को प्रतिशत में बढ़ाया जाता है。
lighten(color, amount) HSL भराव को प्रतिशत में बढ़ाया जाता है。
amount darken(
HSL भराव को प्रतिशत में कम करके पाया जाता है。color, amount) saturate(
amount HSL भराव को प्रतिशत में बढ़ाया जाता है。
desaturate(color, amount) 0% और 100% के बीच की मात्रा का उपयोग करके भराव कम के रंग बनाया जाता है。
amount HSL भराव को प्रतिशत में कम करके पाया जाता है。
opacify(color, amount) 0 और 1 के बीच की संख्या का उपयोग करके अधिक अपारदर्शी रंग बनाया जाता है。
amount एल्फा चैनल को उसके मूल्य के अनुसार बढ़ाया जाता है。
fade-in(color, amount) 0 और 1 के बीच की संख्या का उपयोग करके अधिक अपारदर्शी रंग बनाया जाता है。
amount एल्फा चैनल को उसके मूल्य के अनुसार कम किया जाता है。
transparentize(color, amount) 0 और 1 के बीच की संख्या का उपयोग करके अधिक पारदर्शी रंग बनाया जाता है。
amount एल्फा चैनल को उसके मूल्य के अनुसार कम किया जाता है。
fade-out(color, amount) 0 और 1 के बीच की संख्या का उपयोग करके अधिक पारदर्शी रंग बनाया जाता है。
amount एल्फा चैनल को उसके मूल्य के अनुसार बढ़ाया जाता है。