Color Functions

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