SASS/SCSS #18: Built-in Functions

Welcome back to series about SASS/SCSS. If you like this topic, this is a link for you follow other articles. Series about SASS/SCSS

In this article, we will also discuss Built-in Modules Sass:Color.

Table of contents:

Overview
Functions return channels
Functions change color

Let’s go to the content!

Overview

Sass:Color Modules will be divided into two main parts, the first is the functions that give us the results of the parameters that the color has. For example, in RGB, how much is the red index, how much green is and how much blue is. Same for other color codes like HSL, HWB. Next functions will change the color we give according to a certain parameter.

We have a general formula for changing colors that is color.adjust($color, $arguments…). If in RGB we have the arguments Red, Green, and/or Blue. If in HSL we have arguments Hue, Saturation, and or Lightness. And if in HWB we have arguments Hue, White, and/or Black.

All optionall arguments be numbers. The $red, $green, $blue arguments must be unitless and between -255 and 255 (inclusive).

The $hue argument must have either the unit deg or no unit.

The $saturation, $lightness, $whiteness, and $blackness arguments must be between -100% and 100% (inclusive) and may not be unitless.

The $alpha (opacity) argument must be unitless and between -1 and 1 (inclusive).

Functions return channels

Color.{rgb}($color) – {rgb}($color)

This function will return the index of rgb channel.

// index.scss

@use 'sass:color';

@debug color.red(#789); // => 119

@debug red(#789); // => 119

@debug color.green(#456); // => 85

@debug green(#456); // => 85

@debug color.blue(#123); // => 51

@debug blue(#123); // => 51

Besides using the formula color.{rgb}($color). We can also use {rgb}($color}, we get the same result Returns the red, green, and blue channel of $color as a number between 0 and 255.

Color.{hsl}($color) – {rgb}($color)

This function will give us the result as the index of the hsl channel.

// index.scss

@use 'sass:color';

@debug color.hue(#789); // => 210deg

@debug hue(#789); // => 210deg

@debug color.saturation(#456); // => 20%

@debug saturation(#456); // => 20%

@debug color.lightness(#123); // => 13.33333333%

@debug lightness(#123); // => 13.33333333%

Like RGB we also have alternative functions. Returns the hue, saturation, lightness channel of $color. Hue function returns a number with degree. Saturation function and lightness function return numbers between -100% and 100% (inclusive).

Color.{hwb}($color)

This function will return parameters about hwb channel.

// index.scss

@use 'sass:color';

@debug color.hue(#789); // => 210deg

@debug hue(#789); // => 210deg

@debug color.blackness(#456); // => 60%

@debug color.whiteness(#123); // => 6.6666666667%

We have two more special cases where we don't get replacement functions for color.blackness and colors.whiteness. color.blackness and color.whiteness return numbers with percent.

Color.alpha($color) – alpha($color)

One parameter found in most colors is alpha, also known as opacity.

// index.scss

@use 'sass:color';

@debug color.alpha(#333); // => 1

@debug alpha(#333); // => 1

@debug color.alpha(hsl(24 25% 25% / 10%)); // => 0.1

@debug alpha(hsl(24 25% 25% / 10%)); // => 0.1

Returns a number with unitless, between 0 and 1. Depending on the type of color code, it can be hex code, hsla, rgba, then we get the corresponding alpha (opacity). For rgb, hsl, the default alpha (opacity) is returned as 1.

Functions change color

Color.scale($color, …) – scale-color(…)

Fuildly scales one or more properties of $color.

// index.scss

@use 'sass:color';

// => lightness = 20% becomes 14%

@debug color.scale(hsl(20 50% 20%), $lightness: -30%); // => #361e12

@debug hsl(20, 50%, 14%); // => #361e12

// => lightness = 25% becomes 17%

@debug color.scale(hsl(20 50% 25%), $lightness: -30%); // => #432516

@debug hsl(20, 51%, 17%); // => #432516

You have a given color; you will change the channels of that color by a certain ratio. Now you will use color.scale(). If you don't like this, you want to change the channels of colors by fixed numbers you need to use color.change().

Color.change

You have a given color; you want to change the color based on fixed numbers. Color.change will return a new color based on the data you have given.

// index.scss

@use 'sass:color';

@debug color.change(#333, $hue: 20, $alpha: 0.3);

// => rgba(51, 51, 51, 0.3)

@debug color.change(hsl(20 20% 20%), $lightness: 40%, $alpha: 0.3);

// => rgba(122, 95, 82, 0.3)

@debug color.change(rgb(20, 25, 30), $red: 135);

// => #87191e

You can change the channels you want. If you do not know how to choose colors, or want to do interesting things with colors by increasing or decreasing the given parameters to produce different colors.

You need to distinguish between color.scale() and color.change() to apply to each specific case. If you want to change channels of colors by fixed number use color.change(). If you want to scale the channel, use color.scale().

Color.complement

Return the RGB complement of $color.

Color.complement is similar to using the function color.adjust($color, $hue: 180deg).

// index.scss

@use 'sass:color';

// hue 20% becomes 200%

@debug color.complement(hsl(20 20% 30%)); // => #3d525c

@debug hsl(200 20% 30%); // => #3d525c

// hue 210% becomes 30%

@debug color.complement(hsl(210 20% 30%)); // => #5c4d3d

@debug hsl(30 20% 30%); // => #5c4d3d

// hue 120% becomes 300%

@debug color.complement(hsl(120 20% 30%)); // => #5c3d5c

@debug hsl(300 20% 30%); // => #5c3d5c

// hue 180% becomes 360% or 0%

@debug color.complement(hsl(180 20% 30%)); // => #5c3d3d

@debug hsl(360 20% 30%); // => #5c3d5d

@debug hsl(0 20% 30%); // => #5c3d5d

Above is how to use function color.complement($color). To give you a clearer view, I used hsl(), this doesn't mean you can't apply it to hex code or hwb(). You can see that $hue channel is increased by 180%. And you know that $hue between 0% and 360% (inclusive), if it passes 360% then the hue channel returns to 0% and keeps adding.

Color.darken($color, $amount)

Makes $color darker.

The $amount must be a number between 0% and 100% (inclusive). Decreases the HSL lightness of $color by that amout.

// index.scss

@use 'sass:color';

// lightness 50% becomes 20%

@debug darken(hsl(20 50% 50%), 30); // => #4d2b1a

@debug hsl(20 50% 20%); // => #4d2b1a

We have in the above example a color code of the form hsl(). Using the darken() function means that we change the lightness channel in hsl, more specifically, we reduce this channel.

There is a note when we use the darken() function that if the lightness channel is less than the fixed amount that we want to change, the result will always be "black".

// index.scss

@use 'sass:color';

@debug darken(hsl(20 50% 20%), 30); // => black

@debug darken(hsl(20 50% 25%), 30); // => black

@debug darken(hsl(20 50% 30%), 30); // => black

This is completely unreasonable. To solve this problem, we will replace function darken() with function scale() to solve the above examples..

// index.scss

@use 'sass:color';

@debug darken(hsl(20 50% 20%), 30); // => black

@debug color.scale(hsl(20 50% 20%), $lightness: -30%); // => #361e12

@debug hsl(20, 50%, 14%); // => #361e12

@debug darken(hsl(20 50% 25%), 30); // => black

@debug color.scale(hsl(20 50% 25%), $lightness: -30%); // => #432516

@debug hsl(20, 51%, 17%); // => #432516

The difference between function darken() and color.scale() is, darken() substract $amount with lightness channel. And color.scale() make $color $amount darker than it was originally. This ensures that the lightness channel never becomes negative.

Function tương tự như darken()

Desaturate($color, $amount).

Color.invert($color)

Lighten($color, $amount)

Saturate($color, $amout)

Opacify($color, $amout)

Fade-in($color, $amount)

Color.hwb()

You are familiar with color.hsl(), so we have color.hwb() which is a color generated by the components $hue, $white, and $black. If you add a channel $alpha at the end, you get a hwba() color system..

// index.scss

@use 'sass:color';

@debug color.hwb(50, 50%, 50%); // => gray

@debug color.hwb(50, 20%, 20%, 0.5); // => rgba(204, 179, 51, 0.5)

@debug color.hwb(20 20% 20% / 0.2); // => rgba(204, 102, 51, 0.2)

Above are some examples of how to create colors according to the hwb color system. We have $hue is a number 0deg and 360deg (inclusive) or a number with unitless. The whiteness and blackness are numbers between 0% and 100% (inclusive). The alpha channel can be specified as either a unitless number between 0 and 1 (inclusive).

Color.ie-hex-str($color) – ie-hex-str($color)

Returns an unquoted string that represents $color in the $AARRGGBB format expected by Internet Explorer's -ms-filter property.

// index.scss

@use 'sass:color';

@debug color.ie-hex-str(#333); // => #FF333333

@debug color.ie-hex-str(rgba(118, 135, 152, 0.2)); // => #33768798

Color.mix($color1, $color2, $weight: 50%) – mix($color1, $color2, $weight: 50%)

Returns a color that’s a mixture of $color1 and $color2.

Both the $weight and relative opacity of each color determines how much of each color is in the result. The $weight must be a number between 0% and 100% (inclusive). A larger weight indicates that more of $color1 should be used, and a smaller weight indicates that more of $color2 should be used.

// index.scss

@use 'sass:color';

@debug color.mix(#444, #888); // => #666666

@debug color.mix(#455, #789, 20%); // => 6d7e8b

@debug color.mix(hsl(20 20% 20% / .5), hsl(10 10% 10% / 0.2), .7);

// => rgba(28, 24, 23, 0.2021)

Conclusion

We have learned through the functions included in sass:color. We divide it into two big categories that give the result a number, the second one that changes color based on the paramenters.

If you have any ideas, feel free to comment below. Thank you to joining with me. Having a good day!