Course Progress 100%

Sass Color Functions

← Sass Introspection Sass Color →

Sass Color Functions क्या है?

Sass Color Functions का उपयोग colors के साथ काम करने के लिए किया जाता है। ये functions colors को modify, mix, lighten, darken और analyze करने में मदद करती हैं। Sass Color Functions की मदद से हम manually नए color codes बनाए बिना ही dynamic और consistent color schemes बना सकते हैं।

Beginner के लिए आसान भाषा में:

  • Color Functions existing color से नया color बनाती हैं
  • Theme और design consistency बनाए रखती हैं
  • Hover effects, shadows और variations बनाना आसान हो जाता है

Sass में colors कई formats में हो सकते हैं जैसे hex, rgb, rgba, hsl और hsla, और Color Functions इन सभी के साथ काम करती हैं।

Sass में Color कैसे define किया जाता है

$primary-color: #3498db;

यहां $primary-color एक Sass variable है जिसमें blue color store किया गया है।

अब हम सभी important Sass Color Functions को detail में समझते हैं।

lighten() Function

lighten() क्या करता है

lighten() function किसी color को light बनाता है।

Syntax

lighten(color, amount)

Example

p {
  color: lighten(#3498db, 20%);
}

Explanation

इस code में:

  • #3498db original blue color है
  • 20% का मतलब color को 20% ज्यादा light करना

यह function इसलिए उपयोग किया जाता है ताकि same color का light shade बनाया जा सके।

Compile होने के बाद output CSS में एक हल्का blue color apply होगा।

darken() Function

darken() क्या करता है

darken() function किसी color को dark बनाता है।

Syntax

darken(color, amount)

Example

h1 {
  color: darken(#3498db, 15%);
}

Explanation

यहां:

  • original color को 15% तक dark किया गया है

यह function hover effects, headings और emphasis text के लिए बहुत उपयोगी होता है।

Result में original color से गहरा blue दिखाई देगा।

mix() Function

mix() क्या करता है

mix() function दो colors को आपस में mix करता है।

Syntax

mix(color1, color2, weight)

Example

div {
  background-color: mix(red, blue, 50%);
}

Explanation

इस example में:

  • red और blue colors को mix किया गया है
  • 50% का मतलब दोनों colors बराबर मात्रा में mix होंगे

Result में purple जैसा color बनेगा।

यह function custom color creation के लिए उपयोगी है।

rgba() Function

rgba() क्या करता है

rgba() function किसी color में transparency add करता है।

Syntax

rgba(red, green, blue, alpha)

Example

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

Explanation

यहां:

  • black color में 0.5 transparency दी गई है

यह function overlay, modal background और shadow effects के लिए उपयोगी होता है।

Result में semi-transparent black background मिलेगा।

adjust-hue() Function

adjust-hue() क्या करता है

adjust-hue() function color के hue value को change करता है।

Syntax

adjust-hue(color, degrees)

Example

.box {
  background-color: adjust-hue(#3498db, 90deg);
}

Explanation

इस code में:

  • original color का hue 90 degrees rotate किया गया है

यह function color wheel पर color को shift करता है।

Result में एक completely different color shade मिलेगा।

saturate() Function

saturate() क्या करता है

saturate() function color की saturation बढ़ाता है।

Syntax

saturate(color, amount)

Example

p {
  color: saturate(#95a5a6, 30%);
}

Explanation

यह function:

  • color को ज्यादा vibrant और strong बनाता है

Result में color ज्यादा bright दिखाई देगा।

desaturate() Function

desaturate() क्या करता है

desaturate() function color की saturation कम करता है।

Syntax

desaturate(color, amount)

Example

p {
  color: desaturate(#3498db, 40%);
}

Explanation

यह function:

  • color को dull और grayish बनाता है

यह subtle backgrounds और disabled elements के लिए उपयोगी होता है।

grayscale() Function

grayscale() क्या करता है

grayscale() function color को gray shade में convert करता है।

Syntax

grayscale(color)

Example

img {
  filter: grayscale(100%);
}

p {
  color: grayscale(#3498db);
}

Explanation

यह function:

  • color से saturation हटा देता है

Result में gray color मिलेगा।

यह disabled states और muted UI elements के लिए उपयोगी है।

invert() Function

invert() क्या करता है

invert() function color को opposite color में बदल देता है।

Syntax

invert(color)

Example

.box {
  background-color: invert(#ffffff);
}

Explanation

यह function:

  • white color को black में बदल देता है

Result में background black हो जाएगा।

यह function contrast और dark mode logic में उपयोगी होता है।

Sass Color Functions List

Function NameDescription
lighten()color को light बनाता है
darken()color को dark बनाता है
mix()दो colors को mix करता है
rgba()transparency add करता है
adjust-hue()hue value change करता है
saturate()saturation बढ़ाता है
desaturate()saturation घटाता है
grayscale()color को gray बनाता है
invert()opposite color बनाता है

Sass Color Functions का Practical Use

Sass Color Functions का real-world उपयोग:

  • Theme और color palette generate करने में
  • Hover और active states बनाने में
  • Dark mode और light mode logic में
  • Professional और scalable UI design systems बनाने में

इस chapter को पढ़ने के बाद beginner-level user Sass Color Functions को clearly समझ सकता है और बिना extra effort के powerful और dynamic color styling कर सकता है।

← Sass Introspection Sass Color →
  • Home