Thinking back to school, I can remember I was never any good at art, I was mostly happy just sitting in a double art class and not a French class. Just as the history teacher would drill into you that 'In 1492 Columbus sailed the ocean blue.', Our art teacher would encourage the use of the colour to tell a story, influence moods and to serve as a bridge to something new.
Ten years have passed since those art classes, the relationship between colour and the web has remained stagnant, with limited choices available before having to turn to JavaScript or relying on the support of a polyfill library.
Enter mix-blend-mode, we now have the ability to easily manipulate a single colour into a plethora of different colours.
To begin we use one colour, setting this as the base colour. E.g. #6534ff
Sass provides plenty of options out of the box allowing us to create unique and different colour combinations with ease. We will be looking at the three most common colour functions
Shade & Tint
Lighten & Darken
Multiple colours
To use the tint and shade we use the mix() function. mixing the colour with white (tint) and black (shade)
$body-color: #282828;
$grey: #999;
@function shade($color, $percentage) {
@return mix($body-color, $color, $percentage);
}
@function tint($color, $percentage) {
@return mix($white, $color, $percentage);
}We name each function shade and tint so it is easy to differentiate between them.
There are several reasons to use tint and shade. It is not outside the realms of possibility to generate a whole palette from one colour using the shade and tint functions.
@function shade($color, $percentage) {
@return mix($body-color, $color, $percentage);
}
$body-color: #282828;
$grey: #999;
$purple: #6534ff;
.tint li
.shade li {
background: $blue;
flex: 1 0 auto;
}
.tint li {
$tint-num: 6;
@for $i from 1 through $shade-num {
&:nth-of-type(#{$i}) {
background-color: tint($purple, ($i * 10%));
}
}
}
.shade li {
$shade-num: 6;
@for $i from 1 through $shade-num {
&:nth-of-type(#{$i}) {
background-color: shade($purple, ($i * 10%));
}
}
}Starting at 0 we increase the amount of tint and shade in increments of ten until we reach 100.
To increase the increment every item, we first need to need know how many increments are needed. In this case it is six. Using the loop we cycle through each and apply our desired shade or tint
$shade-num: 6;
$tint-num: 6;
@for $i from 1 through $shade-num {
&:nth-of-type(#{$i}) {
background-color: shade($purple, ($i * 10%));
}
}
@for $i from 1 through $shade-num {
&:nth-of-type(#{$i}) {
background-color: tint($purple, ($i * 10%));
}
}If you are questioning when to use either function.
shade: mixture of a colour with black, which reduces lightness.
tint: mixture of a colour with white, which increases lightness
Often, it is just a single shade or highlight that is desired. To achieve this we use the Sass function for darken and lighten.
darken($color, 10%);
lighten($color, 10%);As the lighten and darken functions can quickly result in solid white and solid black, try staying in the range of 3-20%. Sass will produce an error if the percentage being passed in the function exceeds 100%. This is important especially if using a single colour for multiple items, or outputting an incremented value from a large amount of items.
Lets put everything together tint, lighten, shade and darken.
So far we have worked with a singular colour #6534ff. We also have the ability to use multiple colours, Let's use #6534ff #fc0152
As you can see from the code below, the approach is similar to using a single colour.
$purple: #6534ff;
$pink: #fc0152;
.combined li {
background: $nav-link-color;
flex: 1 0 auto;
$combine-num: 6;
@for $i from 1 through $combine-num {
&:nth-of-type(#{$i}) {
background-color: mix(darken($nav-link-color,($i * 7.5%)),lighten($pink,($i * 10%)));
}
}รก
}We already compared the differences between tint, shade, lighten and darken with a single colour, now let's compare with two colours.
.all-together-two li {
$tint-num: 10;
$darken-num: 20;
background-blend-mode: overlay;
flex: 1 0 20%;
@for $i from 1 through $tint-num {
&:nth-of-type(#{$i}) {
background: $image-one mix(tint($nav-link-color,($i * 5%)),shade($pink,($i * 2%))) center center / cover no-repeat;
}
}
@for $i from 11 through $darken-num {
&:nth-of-type(#{$i}) {
background: $image-one mix(darken($nav-link-color,($i * 5%)),lighten($pink,($i * 2%))) center center / cover no-repeat;
}
}
}For the ultimate comparison, Let's combine all the effects together