Color functions in Sass and Compass. From ready-made colors, create a dynamic scheme based on the base color
More than 125 years ago, the great impressionist artist Claude Monet changed our understanding of color by considering such an element as light. Until now, his research has not been applicable to web design. But preprocessors like Sass allow you to think about color palettes in a new way:
Claude Monet, Haystacks: The Effect of Snow (1891). Scottish National Gallery; image for public viewing.
Historically, the ability to convey fine colors on the Web has been limited, and most cases have relied on statically pinned codes CSS colors. While on-the-fly manipulation of colors remained elusive.
Fortunately, new tools give us more options for working with color. But CSS is still quite inflexible. This is where preprocessors can be very useful to us. Let's look at some of their features that can significantly improve our styles:
- Nicknames help us better understand what colors we use;
- Lighting, shading and scaling allow for flexible palettes at fairly high resolutions;
- Mixing colors allows you to open new world subtle shades and halftones.
Six-digit codes
You must know exact values color codes to apply them. This means that unless you use predefined color names, your stylesheet is always full of cryptic six-digit codes or obscure HSL numbers. But what if the color we're using doesn't actually have a name? This is where Sass comes to our rescue. Other preprocessors likely have similar functionality, but I leave it up to you to explore this at your own discretion.
Let's get to work so you can understand what I mean.
We will create new brand and choose two colors to display it. The first thing I'm going to do is name the colors: $toolbox and $ol-blue :
I'm now using them to create a website for Gullfoss Travel Supply Co. The design idea for this site is the association with luggage tags. IN different places site meet various options(lighter) and shades (darker) of these colors:
Hypothetical site for Gullfoss Travel Supply Co.
Consider, for example, this button:
I wanted this button to look like a clickable element, which can be easily achieved with a simple gradient. The basis of the button is the $toolbox color. And its highlight was its lighter and darker tones.
Traditionally I would have to set them in CSS like this:
button( background-color: $toolbox; // main background-image: gradient(hsl(0, 33%, 52%), // light $toolbox, hsl(0, 41%, 39%); // dark) )
The main color of the button is one of the brand colors, the other two ( light and dark) are not Sass constants. I would need to ask them. Open the color picker and manually select a swatch. But if I wanted to add a button based on the color $ol-blue , then I would need to go back to the palette again and select new values.
And for each of these buttons you still need to describe the state for hovering the cursor! In this state, the light and dark tones will be lighter than on the button in the normal state, so I would have to declare four more constants. Or just enter specific values once and hope that I won’t need these colors somewhere else.
But Sass can do it for me. It contains built-in functions to handle these colors without having to manually set different variations of them.
Packaging a color picker for Sass
One way to make a color lighter is to use the lighten function:
lighten($toolbox, 20%);
And to darken the color, we can use the darken function:
darken($ol-blue, 30%);
Let's consider next case: If we lighten $toolbox by 50%, we get a very light version of this color. But if we lighten the $ol-blue by 50%, we get a completely white color. Because $ol-blue is much lighter than $toolbox .
To know how much we can lighten a color without it going completely white, we need to know the brightness value of that color in advance. This information is conveniently encoded in HSL values. If we subtract the brightness of a color from 100%, the result is the amount we need to lighten the color to get completely white:
The brightness value for $ol-blue is 60%, and we can lighten it up to 40% so it doesn't go completely white. The brightness for $toolbox is 40%, so we can brighten it by 60%:
When we lighten the colors, $ol-blue will turn white faster than $toolbox because it has more high value base brightness.
When we darken colors, $toolbox will go completely black faster than $ol-blue because it has a lower base brightness value.
In order to master this new color palette, we need to remember the brightness values for each of the colors.
Proportional palettes with color shifts
Sass includes a color function scale-color() that allows you to shift the components of colors proportionally. scale-color() works with RGB as well as HSL saturation and luma channels. To similarly adjust the hue, you need to use the adjust-hue() function of the same name.
As I noted earlier, if we lightened $ol-blue by 50%, it would turn into pure white, but if we increased the brightness proportionally by 50% using the scale-color() function:
scale-color($ol-blue, lightness, 50%);
- then we would get a color with a brightness intermediate between the original color and pure white.
Now I know exactly how much I need to move any of my colors to get pure white: it's always 100%. If I proportionally increase the brightness of $ol-blue by 99%, it will still be 1 percent $ol-blue. You can process $toolbox or any other color in the same way. Except for colors that are already too light and can turn pure white much sooner. For them, the initial brightness will be 100%.
You can easily see what I mean by looking at the color chart below:
As the brightness of colors shifts, they become lighter and more predictable.
Darker color options are also set proportionally.
With the scale-color() function, you can specify a limited number of base constants in color palettes, but still retain the flexibility to handle halftones and tints. Now our gradient declaration can be defined as follows:
button( background-color: $toolbox; // main background-image: gradient(scale-color($toolbox, lightness: 50%), $toolbox, scale-color($toolbox, lightness: -30%);) ) button: hover, button: focus( background-color: scale-color($toolbox, lightness: 50%); // main background-image: gradient(scale-color($toolbox, lightness: 60%), $toolbox scale -color($toolbox, lightness: -20%);) ) button.secondary( background-color: $ol-blue; // main background-image: gradient(scale-color($ol-blue, lightness: 50% ), $ol-blue, scale-color($ol-blue, lightness: -30%);) ) button.secondary:hover, button.secondary:focus( background-color: scale-color($ol-blue, lightness: 50%), // fallback background-image: gradient(scale-color($ol-blue, lightness: 60%), $ol-blue, scale-color($ol-blue, lightness: -20%) ;) )
In this example, I used only two constants and shifted them as desired. In fact, they can be used throughout the entire page. In content home page Gullfoss Travel Supply Co.
Only two brand colors are used, shifted to different brightness values. Despite the simplicity of the palette, we can customize it flexibly.
Prescribing colors using admixtures
There is another way that you can create similar proportional palettes - the mix() function.
If we want to lighten $ol-blue by 60 percent, we'll write:
mix(white, $ol-blue, 60%) You can think of it as if we mixed a tube of white paint with a tube of color paint$ol-blue You can think of it as if we mixed a tube of white paint with a tube of color paint. If we want to darken
, we will write:
mix(black, $toolbox, 30%) It turns out that mixing with white or black is perceived in the same way as shifting the brightness of a color, but it is more convenient because we need to type fewer characters. Also mix() will help you easily create appearance
sites that were previously inaccessible. Consider Monet's drawings of haystacks. They capture the play of light wonderfully. But from a design point of view we can take away from them useful lesson . According to another French impressionist, Pierre Bonnard, " Color does not create a pleasant impression of a painting - it enhances it
". Remember how the color of light affected the appearance of Monet's haystacks. What if we could take basic colors and easily change them in designs, like he did in 1890?
The Sass mix() function gives us this opportunity. Let's take our color palette again and add just a couple of additional colors to it: light and shadow. Now let's mix our brand colors again, but instead of mixing them with black and white, let's use our new colors: Immediately the entire palette becomes warm and soft, and more dark colors
- rich and bright. Lightening yellow
gives the entire palette sunny shades.
Darkening with shadow color makes the palette more natural.
If I don't like this design, I can choose new values for these two constants, and next time Sass will compile them into CSS, and the design will automatically reflect the changes.
In this new scheme, I'm starting with the same brand palette again, but now I'm choosing hot pink for the light tones and dark green for the darks:
This completely changes the look of the palette, but it is still based on our two main brand colors. Changes in light and dark tones are automatically displayed in when Sass compiles the CSS.
Light and dark tones can be changed to create the appropriate mood or theme for your site without us having to make time-consuming changes to all the styles.
Returning to the Gullfoss Travel Supply Co. website. , on the page of each of the stickers, I demonstrated some of the possibilities that such color mixing provides us. If we look at Olympia's page, the mood is completely different from the home page, but all the layout, fonts and basic layout remain the same. Each color was mixed with a yellow light tone or a dark purple tone, so we see the page ( literally) in a new light. The content background has become an eggshell color, and the " Add to Basket"- more natural vibrant color:
The Lincoln sticker has a lot of undertones and shades of red in it, so I wanted that to be reflected throughout the page elements. I chose reddish light and dark tones to match the design with the illustration:
If you look at the page for Barton Springs Pool, you will see that it is dominated by the tones of cool water and green leaves. The difference between the original colors and the new ones is quite subtle, but noticeable. Colors should be combined in a cohesive manner to create an aesthetic that enhances the design:
If you're looking for drama, a Grid page is for you. The light and dark shades give her a Tron-esque look. Such a dramatic change is achieved by simply changing a few constants.
A few more things to help you design your own palettes
Almost every color on these pages is mixed with light or dark shades, but sometimes design elements can look too uniform and so they blend together. In such cases, don't be afraid to complement your projects with a new set of colored faucets. This will help give your pages a pop of color and make them look more vibrant.
There are many tools and techniques for working with color on the web. I believe that you should always know how what you are working with works, and color is no exception. Let's look at the technical details of working with color on the web.
Mixing colors
It is very important to understand that using colors on a computer in the same way as in childhood will not work due to mixing colors. When you were kids you had paint. Paint and printer ink are made up of pigments - small particles that mix to form visible color. This is a subtractive color generation scheme. The more color you add, the darker the color will be. The basic colors are cyan, magenta and yellow, but when you mix them subtractively you get black.
On the computer (or any monitor) you work with light, that is, when you mix all the colors you get white. Before Isaac Newton performed his famous prism experiment, people believed that color was contained within objects rather than being absorbed or reflected from them. Newton used a prism and proved that bright light is just a mixture of several colors, producing a rainbow. However, the individual colors of the rainbow were no longer separated, showing that the prism did not contain color. Such a scheme is called additive.
Monitors are many combinations of small pieces of light that form a myriad of colors. Resolution means the number of these pieces - pixels - that are on the screen. Interestingly, this approach was used by artists even before the advent of monitors (an example can be seen below).
Monitors have several display modes that determine how we perceive images. This is commonly referred to as color depth. It is the color depth that determines the number of colors displayed. If the depth is 1 bit, only two colors are available to us - black and white. A depth of two bits gives 4 colors, and so on up to 32, although regular monitors support color depth up to 24, which gives us 16,777,216 colors (True Color and alpha channel).
True Color is so called because the human eye is capable of distinguishing about 10 million colors, and 24-bit depth is sufficient for this. Red, green and Blue colour a occupy 8 bits, and the remaining ones are used for transparency (alpha channel).
Let's take this information and look at the color properties available to us.
Color values
RGB values
At the end of the previous section, it was said between the lines what rbga(x, x, x, y) means; , however, it is worth understanding this better. If we work with an RGB model, we divide the color into three channels with values from 0 to 255.
X is a number from 0-255 y is a number from 0.0 to 1.0 rgb(x, x, x); or rgba(x, x, x, y); Example: rbga(150, 150, 150, 0.5);
Hex values
Hexadecimal colors are a slightly different color display format and are the most commonly used on the web.
As you know, a byte is 8 bits, that is, each hexadecimal color is specified by 1 byte. Each byte is specified by a number from 00 to FF in hexadecimal system notation, or a number from 0 to 255 in decimal. Thus, black is #000000 and white is #FFFFFF.
If the bits are repeated in pairs, then they can be shortened, for example, #00FFFF becomes #0FF. This recording system is very convenient for understanding and recording, as well as for use in programming. If you'll be working with color on a deeper level, it's worth considering the HSL system.
HSL values
HSL works in much the same way as RGB, but instead of colors it specifies hue, saturation, and lightness.
HSL 3D model
Hue rotates 360 degrees, and saturation and lightness take values from 0 to 1.
X is a number from 0 - 360 y is a percentage from 0% to 100% z is a number from 0.0 to 1.0 hsl(x, y, y); or hsla(x, y, y, z); Example: hsla(150, 50%, 50%, 0.5);
The transition between these two systems is very simple, but HSL is much better suited for human perception. This demo and this tool will help you understand better.
HSL will also be covered in a future article.
Named colors
Named colors are also available to developers. However, they are not easy to work with due to differences in perception and their inaccuracy. A glaring example is that "dark grey" is lighter than "grey". There is even a game where you have to guess the colors. Previously, for example, blood red color was called chucknorris (this is currently only supported in HTML, as far as I know). One way or another, it will be much more convenient and professional to use preprocessors like Sass to store colors in variables.
Color Variables
A good practice is to store color variables but never use them, redefining them with more readable names. CSS has native variables:
:root ( --brandColor: red; ) body ( background: var(--brandColor); )
But this is completely new feature, and browsers from Microsoft do not support it at the time of writing.
CSS preprocessors also support variables, so you can create variables like $brandPrimary and use them. Or use map :
$colors: (mainBrand: #FA6ACC, secondaryBrand: #F02A52, highlight: #09A6E4); @function color($key) ( @if map-has-key($colors, $key) ( @return map-get($colors, $key); ) @warn "Unknown `#($key)` in $ colors."; @return null; ) // _component.scss .element ( background-color: color(highlight); // #09A6E4 )
Remember that names are important. Abstract names are sometimes useful because if you change a variable that used to set the color blue and now sets the color orange, you don't have to rename all the other variables, or, worse, add a comment like « $blue is now orange."
currentColor
currentColor is a very important value. It takes into account nesting, and is used to transfer color to shadows, borders and even backgrounds.
Let's say you created a div and a nested div within it. The code below will create an orange border for the inner div:
Div-external ( color: orange; ) .div-internal ( border: 1px solid currentColor; )
This is very useful when working with icon systems. You can set currentColor as the default value and then use the necessary CSS classes for styling.
Preprocessors
CSS preprocessors are great for working with color. Here are some links to documentation for various functions.
More than 125 years ago, the great impressionist artist Claude Monet changed our understanding of color by considering such an element as light. Until now, his research has not been applicable to web design. But preprocessors like Sass allow you to think about color palettes in a new way:
Claude Monet, Haystacks: The Effect of Snow (1891). Scottish National Gallery; image for public viewing.
Historically, the ability to communicate subtle colors on the web has been limited, and most have relied on statically pinned CSS color codes. While manipulating colors " on the fly"remained unattainable.
Fortunately, new tools give us more options for working with color. But CSS is still quite inflexible. This is where preprocessors can be very useful to us. Let's look at some of their features that can significantly improve our styles:
- Nicknames help us better understand what colors we use;
- Lighting, shading and scaling allow for flexible palettes at fairly high resolutions;
- Mixing colors allows you to open up a new world of subtle shades and undertones.
Six-digit codes
You must know the exact meanings of color codes in order to apply them. This means that unless you use preset color names, your stylesheet is always full of cryptic six-digit codes or obscure HSL numbers. But what if the color we're using doesn't actually have a name? This is where Sass comes to our rescue. Other preprocessors likely have similar functionality, but I leave it up to you to explore this at your own discretion.
Let's get to work so you can understand what I mean.
We will create a new brand and choose two colors to display it. The first thing I'm going to do is name the colors: $toolbox and $ol-blue :
I'm now using them to create a website for Gullfoss Travel Supply Co. The design idea for this site is the association with luggage tags. There are different options in different places on the site ( lighter) and shades ( darker) these colors:
Hypothetical site for Gullfoss Travel Supply Co.
Consider, for example, this button:
I wanted this button to look like a clickable element, which can be easily achieved with a simple gradient. The basis of the button is the $toolbox color. And its highlight was its lighter and darker tones.
Traditionally I would have to set them in CSS like this:
Button( background-color: $toolbox; // main background-image: gradient(hsl(0, 33%, 52%), // light $toolbox, hsl(0, 41%, 39%); // dark) )
The main color of the button is one of the brand colors, the other two ( light and dark) are not Sass constants. I would need to ask them. Open the color picker and manually select a swatch. But if I wanted to add a button based on the color $ol-blue , then I would need to go back to the palette again and select new values.
And for each of these buttons you still need to describe the state for hovering the cursor! In this state, the light and dark tones will be lighter than on the button in the normal state, so I would have to declare four more constants. Or just enter specific values once and hope that I won’t need these colors somewhere else.
But Sass can do it for me. It contains built-in functions to handle these colors without having to manually set different variations of them.
Packaging a color picker for Sass
One way to make a color lighter is to use the lighten function:
Lighten($toolbox, 20%);
And to darken the color, we can use the darken function:
Darken($ol-blue, 30%);
Consider the following case: if we lighten $toolbox by 50%, we will get a very light version of that color. But if we lighten the $ol-blue by 50%, we get a completely white color. Because $ol-blue is much lighter than $toolbox .
To know how much we can lighten a color without it going completely white, we need to know the brightness value of that color in advance. This information is conveniently encoded in HSL values. If we subtract the brightness of a color from 100%, the result is the amount we need to lighten the color to get completely white:
X = 100% - l
The brightness value for $ol-blue is 60%, and we can lighten it up to 40% so it doesn't go completely white. The brightness for $toolbox is 40%, so we can brighten it by 60%:
When we lighten the colors, $ol-blue will turn white faster than $toolbox because it has a higher base brightness value.
When we darken colors, $toolbox will go completely black faster than $ol-blue because it has a lower base brightness value.
In order to master this new color palette, we need to remember the brightness values for each of the colors.
Proportional palettes with color shifts
Sass includes a color function scale-color() that allows you to shift the components of colors proportionally. scale-color() works with RGB as well as HSL saturation and luma channels. To similarly adjust the hue, you need to use the adjust-hue() function of the same name.
As I noted earlier, if we lightened $ol-blue by 50%, it would turn into pure white, but if we increased the brightness proportionally by 50% using the scale-color() function:
Scale-color($ol-blue, lightness, 50%);
That would result in a color with a brightness intermediate between the original color and pure white.
Now I know exactly how much I need to move any of my colors to get pure white: it's always 100%. If I proportionally increase the brightness of $ol-blue by 99%, it will still be 1 percent $ol-blue. You can process $toolbox or any other color in the same way. Except for colors that are already too light and can turn pure white much sooner. For them, the initial brightness will be 100%.
You can easily see what I mean by looking at the color chart below:
As the brightness of colors shifts, they become lighter and more predictable.
Darker color options are also set proportionally.
With the scale-color() function, you can specify a limited number of base constants in color palettes, but still retain the flexibility to handle halftones and tints. Now our gradient declaration can be defined as follows:
Button( background-color: $toolbox; // main background-image: gradient(scale-color($toolbox, lightness: 50%), $toolbox, scale-color($toolbox, lightness: -30%);) ) button: hover, button: focus( background-color: scale-color($toolbox, lightness: 50%); // main background-image: gradient(scale-color($toolbox, lightness: 60%), $toolbox scale -color($toolbox, lightness: -20%);) ) button.secondary( background-color: $ol-blue; // main background-image: gradient(scale-color($ol-blue, lightness: 50% ), $ol-blue, scale-color($ol-blue, lightness: -30%);) ) button.secondary:hover, button.secondary:focus( background-color: scale-color($ol-blue, lightness: 50%), // fallback background-image: gradient(scale-color($ol-blue, lightness: 60%), $ol-blue, scale-color($ol-blue, lightness: -20%) ;) )
In this example I used only two constants and shifted them as desired. In fact, they can be used throughout the entire page. The contents of the Gullfoss Travel Supply Co. home page.
Only two brand colors are used, shifted to different brightness values. Despite the simplicity of the palette, we can customize it flexibly.
Only two brand colors are used, shifted to different brightness values. Despite the simplicity of the palette, we can customize it flexibly.
There is another way that you can create similar proportional palettes - the mix() function.
If we want to lighten $ol-blue by 60 percent, we'll write:
mix(white, $ol-blue, 60%) You can think of it as if we mixed a tube of white paint with a tube of color paint$ol-blue You can think of it as if we mixed a tube of white paint with a tube of color paint. If we want to darken
Mix(white, $ol-blue, 60%)
Mix(black, $toolbox, 30%)
Consider Monet's drawings of haystacks. They capture the play of light wonderfully. But from a design perspective, we can learn a useful lesson from them. According to another French impressionist, Pierre Bonnard, " Color does not create a pleasant impression of a painting - it enhances it"Remember how the color of light affected the appearance of Monet's haystacks. What if we could take base colors and easily change them in designs, as he did in 1890?
". Remember how the color of light affected the appearance of Monet's haystacks. What if we could take basic colors and easily change them in designs, like he did in 1890?
Immediately the entire palette becomes warm and soft, and the darker colors become rich and bright.
Lightening with yellow gives the entire palette sunny shades.
gives the entire palette sunny shades.
Darkening with shadow color makes the palette more natural.
If I don't like this design, I can choose new values for these two constants, and next time Sass will compile them into CSS, and the design will automatically reflect the changes.
In this new scheme, I'm starting with the same brand palette again, but now I'm choosing hot pink for the light tones and dark green for the darks:
Changing light and dark tones is automatically reflected in the color palette when Sass compiles the CSS.
Light and dark tones can be changed to create the appropriate mood or theme for your site without us having to make time-consuming changes to all the styles.
Returning to the Gullfoss Travel Supply Co. website. , on the page of each of the stickers, I demonstrated some of the possibilities that such color mixing provides us. If we look at Olympia's page, the mood is completely different from the home page, but all the layout, fonts and basic layout remain the same. Each color was mixed with a yellow light tone or a dark purple tone, so we see the page ( literally) in a new light. The background of the content has become an eggshell color, and the " Add to Basket" - a more natural vibrant color:
The Lincoln sticker has a lot of undertones and shades of red in it, so I wanted that to be reflected throughout the page elements. I chose reddish light and dark tones to match the design with the illustration:
If you look at the page for Barton Springs Pool, you will see that it is dominated by the tones of cool water and green leaves. The difference between the original colors and the new ones is quite subtle, but noticeable. Colors should be combined in a cohesive manner to create an aesthetic that enhances the design:
If you need " drama", then the Grid page is suitable for you. Light and dark shades give it a movie-style look" Throne"Such a dramatic change is achieved by simply changing a few constants.
A few more things to help you design your own palettes
Almost every color on these pages is mixed with light or dark shades, but sometimes design elements can look too uniform and so they blend together. In such cases, don't be afraid to complement your projects with a new set of colored faucets. This will help give your pages a pop of color and make them look more vibrant.
Let's take another look at Lincoln's page. Remember, I wanted to give it a reddish tint. It's hard to read text on a bright red background, so I set the light colors in a new way; almost pure red. After that I set for background green color. Green combined with red creates visual effect, which makes light tones appear more deeply red while maintaining contrast. These separate layers use different light and dark tones that interact with each other.
During development color schemes It is important to ensure they are clear and readable. Take another look at the Grid page. If you think it's not very readable, you're not alone. The menu at the top of the page has a low contrast ratio. According to WCAG recommendations, it optimal value 4.5:1, but not lower than 2.6:1! An appropriate contrast ratio between the text and background colors will make the design more pleasing.
Before I wrap up, I'd like to briefly review browser support. All color processing is compiled into basic CSS color declarations, all translated into static declarations that all browsers support today. Preprocessors give us unprecedented opportunities to create shades and tones that enhance our palettes and bring out the Monet within us.
Translation of the article " Mixing Color for the Web with Sass» was prepared by the friendly team of the Website Building from A to Z project.
Sometimes when designing web pages, you sometimes need to “hide” specific elements. You can, of course, simply remove these elements from the HTML markup. But this is not a way out. To keep an element but hide it, you must use CSS or HTML hidden.
Vertical alignment CSS is not the best simple task. What complicates matters is that with today's requirements for adaptive design For different devices Developers have to create elements with flexible heights, and calculating vertical center becomes a tricky task.
Let's move on to another interesting and extensive topic - how to use Sass/Compass to make your life easier when working with colors during layout.
Every layout designer knows well how often he has to define and manipulate colors in CSS code during layout. The Sass preprocessor and its Compass library have a rich set of functions designed for all kinds of color operations in SCSS code.
This article is an overview of Sass and Compass color features. Let's start, as usual, with the simplest function and move smoothly from simple to complex.
Initial Compass Project Setup
First, let's create an empty Compass project and configure it. Initializing several variables
| 1 | $color |
| 1 | $color1 |
@import "compass/reset" ;
$color:hsla(120, 100%, 50%, .5); $color1:hsla(240, 100%, 50%, .5); -
$unit: 180px;div ( height : $ unit ; width : $ unit ; border : 1px solid #000 ; margin : 10px ; float : left ; text-align : center ; font-weight : bold ; font-size : 1.3rem ; color : darken ( $color, 80%); line-height: $unit).origin(background-color: $color;)
Lighten and darken functions
Let's move on to the inverse color conversion functions. First function
with the color specified in it. Let's pass this on function variable. Located 180 degrees relative to the original color.. It also inverts the color from the original one. But the function is that it inverts colors (red, green, blue), but transparency - it inverts the original color. But unlike the latter, it has greater flexibility. If the function can control the degree of location of the “output color.”
In other words, you can specify an angle other than 180 degrees. In addition, the angle value can be either positive or negative:
.adjusthue_plus ( background-color : adjust-hue ($ color , 80deg ); .adjusthue_minus ( background-color : adjust-hue ($ color , -80deg ); )
The Sass preprocessor has a couple of functions for controlling color saturation.: .desaturate ( background-color : desaturate ($ color , 80% ); )
| 1 | ... on the contrary, it reduces the color saturation from the original one. |
RGBA format
The transparency value can range from 0 (fully transparent) to 1 (fully opaque):
| 1 | And |
. These functions make the color less transparent: .opacify ( background-color : opacify ($ color , .3 ); ) .fadein ( background-color : fade-in ($ color , .3 ); )
The function of converting the original color to grayscale is extremely easy to use. In principle, there is nothing special to tell here:
.grayscale(background-color:grayscale($color);)
If the task is to convert the original color (specified as a variable, in HEX or HSLA format) into RGBA format, in this case the function will come to the rescue
and there are two variable arguments (two colors). The final third argument, a percentage, specifies the proportion in which one color will be mixed with the other. In our case, color.
adjust-color function Now we come to more complex functions Sass preprocessor
Color alpha channel (transparency) control is also available.- alpha channel value in the range from 0 to 1.
- Enough theory, let's look at how the adjust-color function works using examples.
:1 Change color from original; the second argument sets the color change via a variable
- .adjustColorHue ( background-color : adjust-color ( $color , $hue : 40 ); )
- .adjustColorHueLightness ( background-color : adjust-color ( $color , $hue : 40 , $lightness : 30 ); )
:1 Change two color channels simultaneously for the RGB color model. Functions, green channel
- .adjustColorRedGreen ( background-color : adjust-color ( $color , $red : 40 , $green : 30 ); ) Mixing Arguments color models
.adjustColorError ( background-color : adjust-color ( $color , $red : 40 , $hue : 20 ); )
As a result of compiling this code into CSS, we get the following error:Syntax error : Cannot specify HSL and RGB values for a color at the same time for ` adjust-color " on line 38 of .../ sass / style .scss
... which says that in the function| 1 | made a color change based on the values of the arguments passed to it. Function |
, let's look at some examples: .origin ( background-color : $color ; ) .adjustcolor ( background-color : adjust-color ($ color , $lightness : -20% ); ) .scalecolor ( background-color : scale-color ($color, $lightness: -20%); IN in this example
function| 1 | . Function. The value calculates the lightness in turned out to be lighter than the function result and |
| 1 | $color |
| 1 | 30% |
white
This concludes the review of the “color” functions of the Sass preprocessor and the Compass library. As a conclusion, we can say that thanks to such functions, the work when laying out the website design is simplified and accelerated.
Moreover, with the help of these functions, with just one color as an input value, you can create an excellent design in a professional color palette. And do not resort to any of the graphical tools.
In addition to using the color functions discussed above each separately, you can combine them in one expression, creating quite complex designs.
This article is a free translation of the chapter “Manipulate Color with Ease” of the wonderful book “Sass and Compass for Designers” by Ben Frain.
