Preview
Video Player
00:00
00:00
Color Functions
8:26Changing or adjusting a color in your design often means having to reference your favorite graphics editor or color tool. Fortunately, Sass offers powerful color functions that make creating color palettes and changing color values in your design far simpler and more intuitive.
Sass provides built in functions that
make it fun and easy to work with colors.
0:00
Colors in SCSS are typically defined
as hexidecimal, RGB, or HSL values.
0:04
And you'll occasionally use keyboard
values like white, light blue, tomato, or
0:09
cornflower blue.
0:12
Not all hexidecimal, RGB and
HSL values are easy to remember.
0:14
In changing or
adjusting a color in your design
0:18
often means having to reference your
favorite graphics editor or color tool.
0:21
Fortunately, Sass offers some powerful
color functions that make creating color
0:25
palettes and changing color values in your
design far more intuitive and simple.
0:28
So now let's explore
the capabilities of color functions.
0:33
We're briefly going to step
away from our blog project and
0:37
experiment with common Sass color
functions in a separate workspace.
0:40
I've included a link to the snapshot of
this workspace in the teacher's notes.
0:43
Be sure to fork this snapshot
if you'd like to follow along or
0:46
to experiment with color
functions on your own.
0:49
Then in the console, run Sass watch
scss:css to start the watcher.
0:51
When you preview the workspace, you'll see
a header that resembles the header in our
0:58
VR webpage with nav links,
a headline, paragraph, and button.
1:02
Sass offers a variety of functions for
altering and manipulating colors and
1:07
creating color schemes.
1:11
So in this video I'll teach you
how to create a color palette from
1:13
a single base color using the darken,
lighten, and complement color functions.
1:16
You're able to manipulate any type of
color notation with color functions
1:21
like keywords, hexidecimal RGB,
even HSL values.
1:25
Open the color functions.scss partial
located inside the scss folder.
1:29
First, let's define our base color.
1:35
So I'll declare a variable named base and
set it to the hex value #3acec2.
1:39
You can use any color you'd like for this.
1:47
If you hover over this color, you'll see
that it's a light shade of turquoise.
1:49
Next, I'll set the background color
of the header to our base color.
1:53
So inside the header rule,
we'll use a background color property,
1:57
and set it to $base.
2:02
So now I'd like a darker shade of
the base color for the paragraph and
2:08
a lighter shade for the navigation links.
2:12
So back in my style sheet,
I'll declare two new variables for
2:16
these two color values.
2:19
I'll call the first one $base-dark and
the second $base-light.
2:23
Then I'll use the lighten and
2:31
darken functions to manipulate
the lightness value of our base color.
2:33
So as the value for base-dark will
define the darken function, and for
2:37
base light, the lighten function.
2:41
Lighten increases the lightness
by the amount specified, and
2:44
darken decreases the lightness.
2:48
So once you define the color to
adjust inside the parentheses,
2:50
you set the lightness value with
a percentage value between 0 and 100%.
2:54
So I'll lighten and
darken the base color by 25%.
2:59
So inside the parentheses for
the darken function,
3:03
I'll first define the base variable,
followed by a comma.
3:06
Then 25%, and I'll do the same for
3:09
the lighten function, $base, 25%.
3:14
Then I'll scroll down and
3:19
set the headers paragraph color
to base-dark the color property.
3:20
And the links inside
main nav to $base-light.
3:30
Over in the browser, you'll see that
the navigation links are a light shade of
3:38
the base color, and
the paragraph is slightly darker.
3:43
If you take a look at the output CSS,
you'll see that Sass performed all
3:48
the necessary calculations
to generate a hex value for
3:52
each shade of the base color.
3:55
You can also quickly get the complement
of a color using the complement function.
4:00
Complementary colors are any two colors
positioned exactly opposite each other
4:06
on the color wheel.
4:10
When complementary colors are placed
next to each other in a design,
4:11
they create a strong visual contrast.
4:14
So let's get the complementary
color of the base color value, and
4:18
I'll store it in a variable
named $complement.
4:21
And I'll set the value to
the complement function.
4:27
Then inside the parentheses,
specify the $base variable.
4:32
Then I'll set the header h1's
color to the complementary color.
4:36
Then set the button's background
color to the complementary color
4:45
using a background-color property and
the value $complement.
4:50
So now no matter which base color you
choose, there will always be a vibrant
4:57
contrast between the header background
color and the headline and button.
5:01
So now let's go back
to our style sheet and
5:06
lighten the complementary color by 10%.
5:09
I'll create a new variable
named $complement-light.
5:12
As a value,
I'll use the lighten function and
5:19
I'll lighten complement by 10%.
5:23
Then change the background
color of the button
5:27
on hover to the complement-light color.
5:30
And to create visual contrast between
the button's background color and
5:40
the text color, let's set the button's
color value to the base color.
5:45
All right, so we've created a simple
color palette from a single color.
5:53
Moving forward you can change
the base color to any color value and
5:57
the rest of the colors
will adjust to that value.
6:01
For example, let's try
6:04
the color ff1493.
6:10
Let's change it to something like
slate blue Let's try crimson.
6:15
And as you can see the result is
a completely different color combination
6:28
each time.
6:32
You'll find links to more advanced color
functions in the teacher's notes but
6:33
you'll commonly use the functions you
learned in this video when creating
6:36
gradients, buttons, or applying border
shadows or accents to elements.
6:40
All right, now let's go back to our
VR website and apply color functions.
6:45
First, we'll take advantage
of the lighten function
6:48
to lighten the color of the icons.
6:52
So in utilities, variables.scss,
6:55
I'll declare a new variable
named $color-primary-light.
6:59
And use the lighten function to increase
the lightness of color primary by 10%.
7:08
I'll give this a save,
then over in components, _icons.scss.
7:20
Set the color value of the icons to
the new $color-primary-light variable.
7:26
Finally, in components _nav.scss,
I'll use the rgba
7:37
function to reduce the opacity of
the navigation links on hover.
7:41
Now, in Sass, the RGBA color
function is more powerful and
7:47
easier to use than it is in CSS.
7:51
It looks just like the RGBA function in
CSS, except you don't need to explicitly
7:54
define the values for the red,
green, and blue color components.
7:59
You can pass it one color value of
any type followed by the alpha value.
8:02
So let's take color accent down to 0.7.
8:06
Sass color functions are amazing
tools that give designers and
8:11
developers more power over
color than ever before.
8:15
They help you explore design options and
8:18
manipulate colors on the fly
while working in the browser.
8:20
And they're fun and easy to use.
8:23