Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass blue() Function

Posted in Sass Tutorial
Updated on Sep 29, 2024
By Mari Selvan
👁ī¸ 12 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass blue() Function

Photo Credit to CodeToFun

🙋 Introduction

The blue() function in Sass is used to extract the blue component from a color. In the RGB color model, every color is made up of red, green, and blue components.

The blue() function allows you to retrieve the blue value from any color, enabling precise control over color manipulations in your stylesheets.

💡 Syntax

The syntax of the blue() function is simple and takes only one argument:

Syntax
Copied
Copy To Clipboard
blue(color)

đŸ”ĸ Parameters

  • color: A color value in any valid CSS format (e.g., #ff5733, rgb(255, 87, 51), hsl(14, 100%, 60%)).

↩ī¸ Return Value

The function returns an integer between 0 and 255, representing the blue component of the specified color.

📝 Example Usage

Let's look at some examples to see how the blue() function can be utilized in different scenarios.

📜 Example 1: Extracting Blue from a Hex Color

example.scss
Copied
Copy To Clipboard
$color: #ff5733; // A shade of orange
$blue-component: blue($color); // Extract the blue component

p {
  color: $color;
  border-bottom: 3px solid rgb(0, 0, $blue-component);
}

In this example, the blue component of the hex color #ff5733 is extracted. The resulting value is used to set the blue channel of an RGB color for the border.

📜 Example 2: Extracting Blue from an RGB Color

example.scss
Copied
Copy To Clipboard
$color: rgb(60, 179, 113); // Medium sea green
$blue-component: blue($color); // Extract the blue component

div {
  background-color: $color;
  box-shadow: 0 4px 10px rgba(0, 0, $blue-component, 0.5);
}

Here, the blue component of the RGB color rgb(60, 179, 113) is extracted and applied to the shadow of a div element.

📜 Example 3: Combining Blue with Other Functions

example.scss
Copied
Copy To Clipboard
$color: hsl(240, 100%, 50%); // Pure blue
$blue-component: blue($color);

a {
  color: adjust-hue($color, 45); // Adjust hue by 45 degrees
  text-shadow: 2px 2px 2px rgba(0, 0, $blue-component, 0.7);
}

In this example, the blue component of a color defined in HSL format is used in combination with the adjust-hue() function to create a text shadow with varying opacity.

🎉 Conclusion

The blue() function in Sass is an essential tool for extracting the blue component from any color, allowing you to fine-tune your color schemes and design elements with precision. Whether you're working with RGB, hex, or HSL color formats, blue() provides a straightforward way to access and manipulate the blue value.

By leveraging the blue() function, you can create dynamic and responsive color manipulations in your Sass code, ensuring that your designs remain flexible and consistent. Experimenting with this function will open up new possibilities for color management in your projects, giving you greater control over the visual aspects of your web 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