Sass invert() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 45 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The invert() function in Sass is a handy tool for color manipulation, designed to flip the colors, producing a complementary or opposite color.

This function is particularly useful for creating color contrasts, generating alternative color schemes, or simply adding a bit of visual variety to your designs.

💡 Syntax

The invert() function in Sass takes one required argument:

Syntax

Copied

invert(color, weight)

🔢 Parameters

color: The input color that you want to invert.
color (optional): A percentage that allows you to control the amount of inversion applied to the color. By default, Sass inverts the color completely when this parameter is not provided.

↩️ Return Value

The function returns the inverted color, which is a color opposite to the original in terms of its RGB components.

📝 Example Usage

Let's explore some examples to understand how the invert() function can be applied in real-world scenarios.

📜 Example 1: Basic Inversion

example.scss

Copied

$original-color: #000000; // Black
$inverted-color: invert($original-color);

body {
  background-color: $original-color;
  color: $inverted-color;
}

In this example, the black color #000000 is inverted to white #ffffff, providing a stark contrast.

📜 Example 2: Partial Inversion Using Weight

example.scss

Copied

$original-color: #ff5733; // A shade of red
$partially-inverted-color: invert($original-color, 50%);

button {
  background-color: $original-color;
  border-color: $partially-inverted-color;
}

Here, the red color #ff5733 is partially inverted by 50%, resulting in a color that is halfway between the original and its full inversion.

📜 Example 3: Inverting RGB Colors

example.scss

Copied

$original-color: rgb(100, 150, 200); // A light blue
$inverted-color: invert($original-color);

header {
  background-color: $original-color;
  color: $inverted-color;
}

In this case, a light blue color is inverted to a darker shade, creating a high-contrast design.

🎉 Conclusion

The invert() function in Sass is a powerful yet simple way to reverse the colors of your design elements. Whether you're looking to create high-contrast themes, alternative color schemes, or just experiment with color theory, invert() offers a quick and effective solution.

Understanding and utilizing the invert() function can significantly enhance your design toolkit, allowing you to craft visually striking and dynamic web pages. By experimenting with different colors and inversion levels, you can discover new possibilities in your design work.