Tutorials

Sass complement() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 47 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The complement() function in Sass is a handy tool for generating complementary colors. Complementary colors are opposite each other on the color wheel and, when paired, create a striking contrast.

This function is particularly useful in web design when you need to create dynamic and visually appealing color schemes.

💡 Syntax

The syntax for the complement() function is simple and straightforward. It takes a single argument:

Syntax

Copied

complement(color)

🔢 Parameters

color: The input color from which you want to generate the complementary color (e.g., #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)).

↩️ Return Value

The function returns the complementary color of the input color. The returned color is 180 degrees opposite on the color wheel.

📝 Example Usage

Let’s explore some examples to understand how the complement() function can be applied.

📜 Example 1: Basic Usage

example.scss

Copied

$original-color: #ff0000; // Red
$complement-color: complement($original-color);

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

In this example, the complementary color of red (#ff0000) is calculated, which is cyan (#00ffff). The body background is set to red, and the text color is set to its complement.

📜 Example 2: Using HSL Colors

example.scss

Copied

$original-color: hsl(120, 100%, 50%); // Green
$complement-color: complement($original-color);

header {
  background-color: $original-color;
  border-bottom: 2px solid $complement-color;
}

Here, the complementary color of green is calculated. The green color is defined using HSL, and its complement is a shade of magenta.

📜 Example 3: Creating Complementary Button Styles

example.scss

Copied

$primary-color: #336699; // Blue
$secondary-color: complement($primary-color);

button.primary {
  background-color: $primary-color;
}

button.secondary {
  background-color: $secondary-color;
}

In this example, complementary colors are used to style primary and secondary buttons. The primary button uses the original blue color, and the secondary button uses the complementary orange color.

🎉 Conclusion

The complement() function in Sass is an essential tool for creating balanced and contrasting color schemes. By generating complementary colors with ease, this function allows designers to enhance the visual appeal of their projects. Whether you're working on branding, UI design, or any other visual content, understanding how to use the complement() function can significantly improve the aesthetic quality of your work.

Experiment with different colors and see how their complements can be used to create visually appealing and dynamic designs. Mastering the complement() function will help you develop a keen eye for color and enhance your ability to create stunning designs.