Sass blue() Function

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 15 - Views

⏳ 4 mins

💬 1 Comment

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

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

$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

$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

$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.