Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass complement() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 26 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass complement() Function

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
Copy To Clipboard
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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy