Color Functions8:26 with Guil Hernandez
Changing 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
You need to sign up for Treehouse in order to download course files.Sign up