0:00:00
What’s up guys, I am back and I’m really excited about the video today. So if you know me, you know that my most favorite videos to make are videos that you know, solve a real problem. I’m not interested in like, oh, let me show you this cool trick as much as I’m like, let me show you this game changing tactic or strategy that is going to just make your life so much easier across the board or help you build sites faster or help you build sites better, make them more future proof, whatever, right? That’s what we’re doing in this video today. So let me outline the challenge. Let me outline the problem and it has to do with colors. We’re going to talk about global color management inside of oxygen. And we’re going to do this without a plug in. We’re going to do this in a way that is easily customizable, easily expandable. It doesn’t require anything except copying and pacing and just understanding what is going on.
0:00:57
But let me talk about the problem first. So you’ve seen, if you’ve watched my video on how to set up oxygen, I went into the global colors area and I showed you how to set up global colors and I did like a primary color and an accent color and a base color. And what did I also do? I had to do some primary alternates like there was a primary light and a primary ultra light and a primary dark and a base light and a base that you get the gist, right? Few problems here. Number one, you’re typically using hex codes in that, you can use RGB. That’s fine, but most people are grabbing a hex code. And if you ask for brand colors for a client, they’re probably going to give you hex codes. You grab that hex code, you pop it in. That’s a global color inside of oxygen, right? Then you have the task of like, how do I make like a lighter version of that? How do I make a darker version of that?
0:01:46
Well, hex codes, they’re not readable. They don’t mean anything. So you can’t just like adjust it and suddenly you have a lighter version or a darker version. You have to like go to a color wheel or color generator or whatever and find a lighter version of that color. Grab its hex code, put it into the global oxygen. Okay. So there’s lighter versions, there’s darker versions of four different colors. Now you have like 20 different variations. What if you want opacity variations now? So you want a 60%, a 40%, a 20% version of those colors. Well, you would have to load those in to the oxygen builder as well. Now I’m going to slap a nightmare on you right now. You do this for your primary colors. That’s actually not a lot.
0:02:26
So let’s say there’s five, the control, the color and the lightness and then there’s five more, the control, the opacity. So you’ve got 10 different little variables inside your oxygen panel. Client comes along and says, hey, we actually need to change that primary color. What do you do now? Right? You got to go grab the new hex code, put it in and then you got to generate all those other variations and that is an absolute nightmare. Then let’s talk about using all those variations. So you’re building a div and you’re like, I need a background color and you go to the background color and you see because there’s variants are so close to each other, you can’t really tell that little tiny dot, that color and the little tiny dot. You’re like, oh, which one is that? And then you’re trying to read the labels and oh my gosh, absolute nightmare. There’s got to be a better way, right?
0:03:11
So here’s what I’m presenting to you today. What if you could just tell oxygen, hey, this is my global color and all of the lightness and darkness variants are automatically available to you. All the opacity variants are automatically available to you. The complementary color of that color is automatically available to you and it was 100% future compatible. So if the clients ever like, hey, I need a change. Like let’s say you build an entire site with the, we’re going to be using global variables. So you use these variables all over the site. Sometimes you’re using the primary, sometimes you’re using the secondary, sometimes you’re using the variance in terms of lightness and darkness. Sometimes you’re using the opacity variants. Sometimes you’re using the complementary variant and then the clients like, oh, we need to change that primary color and you’re like, no problem. So you go in, you change the primary color, all of the lightness ones automatically fix themselves, all of the opacity’s automatically fixed themselves and even the complementary color fixes itself.
0:04:16
It becomes the new complementary color of the color you just entered. If that’s the level of control and power you want inside of oxygen when building your sites, then you need to watch this video. So let’s go ahead and hop into it. All right. So I’m going to screen share real quick. Let me make sure that this is actually screen sharing. Awesome. So first things first, we are going to be using and even if you don’t do everything I’m going to show you in this video, I highly, highly, highly recommend that you switch from using hex codes and RGB over to using HSL. Hex codes are the worst. RGB are better but still bad. HSL is king in my opinion. And here’s why number one, HSL is readable.
0:05:04
HSL is readable. So if you understand HSL and you look at an HSL string, which I’m going to show you in just a second, you can actually kind of figure out what that color is. If I show you a hex code, no idea. If I show you RGB, probably you’re not going to be able to guess. But if I show you HSL and you know HSL, you’re probably going to be able to guess kind of what that color is. All right. So it’s readable. Just by reading the string, you kind of know what the color is. Next, you can generate color shades by changing one single value in that string. Any color shade that you want easily changeable by changing one value. You can manipulate the hue by changing one value. That’s how we’re going to generate the complementary color, by the way. Then you can also change the contrast by manipulating one value.
0:05:53
So this is the level of control you don’t really have with RGB. And for sure, you have none of this control with hex. So let’s go down and talk about what is HSL. So the H stands for hue, the S stands for saturation, the L stands for luminosity. So it looks like this. HSL, and this is actually how you would write it. Well, this is how you would write it. So HSL 255, and then 100% is the saturation. 50% is the lightness. This is the standard. So 100% means like the full color saturation of that color. And then 50% lightness means like that’s how that color would look to the eye if you put in the hex code or whatever. Like the same exact, whatever hex code matches this HSL or whatever RGB value matches this HSL. 50% would be an exact match.
0:06:44
But here you go. This is the variable you can change to change lightness. So 40% would be darker. 60% would be lighter. And then you have the 100% to change the saturation if you wanted to. If you go all the way to zero, you’re going to get, you’re going to like gray it out. So anyway, 100% is full saturation. And then this is the hue. So you can look at a hue number. And then you can look at these other values and say, okay, that’s a full saturation of this hue. And it’s the standard lightness. And you kind of know. And again, you would have to know your color wheel and where all the colors are and the degree or whatever.
0:07:22
Like this is really a degree. So like you would say 255 degrees. So that correlates specifically to the color wheel. Now that none of that really matters for what we’re doing today. We’re going to move down and just answer two really important questions. Number one, this HSL support transparency because awesome. It’s a readable string. But can I make a transparent like I came with RGBA? Because if I couldn’t, then RGB would be actually the dominant one because RGB has the transparency layer ability and HSL does as well. So just like you do RGBA, you can do HSL A and you have access to transparency. Big important point. Next one is, can I use HSL in oxygen? Well, yes, absolutely you can. So if you grab this string and put it into the text color or put it into the background color, it works.
0:08:18
And that’s really important as well. It’s also going to work with our variables. So the next question is, can you use HSL along with CSS variables to massively upgrade global color control in oxygen? And that is what we’re about to watch right now. So I am going to put in a variable. And this is how you do it. So variable. And then you do primary, I’m sorry, double dash, primary. And then I’m going to close it off. So this is my primary color in oxygen. This is what I’ve programmed in as my primary color. Now in the ensuing boxes, I’m going to be doing variance. So I’m going to come down here and I’m going to type this in. And one variance is light.
0:09:06
Another variant is ultra light. So you can see that that is definitely lighter than that one. There’s another one called dark. That’s going to give me the dark version of that color. There’s another one called ultra dark. So I’m going to take that light out, ultra dark. And then this last one, this one’s really cool. Every comp is going to give me the complementary color of this. So that is a perfect complementary color. Now all of this is automatically generated for you. I did not go in and assign a color value to this variable. I did not assign a color value to this variable or to this variable or to this variable or to this variable is all done for you automatically. I only put in the HSL values for my primary color. All of this was automatically generated.
0:10:05
And now what I’m going to show you is, so let’s go to color picker right here. So see this yellow? Let’s say the client was like, Kevin, we made a change and we went from that reddish color to this yellow right here. Here is the new primary color for our brand. And you’re like, if you’re in the old days of all my colors are manually created inside of Oxygen’s Global Colors palette, you’re like, oh, the headache. Right? But with my system, you’re like, hey, no problem, bro. Like 44 degrees. See here, 44, 98% and 50%. So 44, remember these numbers, 44, 98 and 50. 44, 98 and 50. So I’m going to go into the style sheets. I’m going to go to my colors.
0:10:50
And I’m going to look right here, primary H, primary S and primary L. This is all I have to change. Okay? So we’re going to go back 44, 98 and 50. All right? So I’m going to change this number to 44. I’m going to change this percentage to 98 and I’m going to change this percentage to 50. And I want you to look at what happened over here. I have the new primary color, all of the lightness shades automatically changed and the complementary color automatically changed as well. So this is completely future proofing your site. We also have access to the opacities, which I didn’t show you here, but trust they do work and they’re available to you automatically. You don’t have to set them.
0:11:36
All you have to do is, well, let’s just look at the code. Let’s dive in for those of you who are wanting to understand the technical underbelly of this technique, we’re going to go in and take a look. And for all of those of you who always complain that you cannot read the code, I’m zooming in for you. All right? So, and this, I’m showing you this, another important reason is because if you want to add to this, if you want to copy and paste this, I’m going to give it to you for free. If you want to copy this into your site and you want to add more colors, then you’ve got to be able to understand how to do that, how to add more colors. So first of all, if you want to add more colors, you would grab those three things and paste them in, make sure the alignments are good. And then you would just change the name of this, right? And then what you would do, I’m going to delete that for now, because I don’t want it. And then you would come down and grab one of these blocks.
0:12:28
So you can tell, it starts with base and then everything under that, right? Here’s one that starts with accent and then everything under that. And so you would copy that and you would paste it. So you’d make another set of it and then you would just change all the names. So if this was instead of base, you were going to say like tertiary or something, right? And you would copy that and you would literally just go change all of these and make sure you change them in here as well. They’re all the same. And then you hit save and you have a brand new color and you have brand new variants all in your system. But let’s talk about how this is working and what’s going on here. So I’m going to put a space here, a gap so you can see this is the main line. This is what is setting the, just the color in HSL variables. So this is the HSL value, comma, value, comma, value, just like we saw earlier. And all these things are variables that are pulling the value from here.
0:13:25
So I’m setting the value of the H to 44. I’m setting the value of the S to 98. I’m setting the value of the L to 50%. And then I’m injecting those values into this string right here, all right? So that’s all that’s going on. Now in a lightness variant, all we have to do, so let me bring this up. And if we look at this ultra light string right here, so all we have to do, we don’t change the first variable because we’re not changing the hue. We don’t change the saturation variable because that’s not what we’re changing. We simply change the lightness variable, the luminosity variable. What I had to do for this is I just, oops, don’t want to do that. I’d have put a Calc function in because in order to change, to set this to 95%, because remember that number could be anything. So you can’t just like add or subtract, you, it has to be future proof for somebody to come in and put any variable in that spot.
0:14:24
So basically what I do is I take that variable, I multiply it by zero, which resets it to zero regardless of what it is. And then I add the percentage that I want into it. So 95% makes something ultra light. So I just reset the variable to the value, reset the value to zero. And then I added 95% back in, that changes its lightness to 95%. And then if we look at this, this just does it, but not as much. So it changes it to 85%. For the darker ones, I just change it to 25% into 10%. So you can even go in and if you don’t like, you know, what I chose is the lightness values, the darkness values. You can go in and make those completely yours. You can completely customize this. Then if we look at the transparency ones, I just switched it from HSL to HSL A. And then I added the transparency values onto the end.
0:15:19
And then for the complimentary, the only thing that you have to change to generate a complimentary color is the hue. You don’t touch the other values. That’s why HSL is so powerful. In order to generate a complimentary color, this is interesting. I do, you know, some research on this to figure out exactly how we’re going to go about this. So you take the primary hue value and you just add 180 to it. And even if that goes above the full, like the, the, the max of the color wheel, HSL is actually smart enough to go back around the wheel to the correct spot. So literally all you have to do is add 180 to the primary hue value in HSL and you get the complimentary color. It’s, it’s fantastic. So that’s how the complimentary color is generated. So key takeaway here is aside from all the stuff I just showed you with regards to how easy is it to change colors on a client website, how easy is it to generate all of these, you know, have all of these variables available to you without manually creating them.
0:16:22
You just come in and you set the HSL value. Now here’s the question. How do you get the HSL value? Well, if you just go to Google and type in a hex code like I’m going to go in here and I’m going to type in this hex code, it’s going to bring up the color picker and it’s going to show you the HSL value. So if the, you don’t have to ask the client for the HSL value. So you ask the client, what, you know, give me your, what they give you CMYK, they give you RGB, they give you whatever, you can just go to Google, it’s going to do it for you. There’s also a generator. So there’s this color converter and I’ll put a link to this. If you want like a more minimalistic converter color, you can just pop in the hex here and it’ll give you the entire HSL string right here. Of course, you don’t need the string, you just need the values. But I think this is really fantastic.
0:17:09
I think this is really cool. I wanted to show you guys this. I’m going to have it available to you to copy and paste and start using on your website. If you found this useful, if you found this helpful, let me go back to camera here. There we go. Perfect. If you found this useful, if you found this helpful, here’s what I want you to do. Give the video a thumbs up because that’s going to help more people find this, more oxygen people. It’ll help them find it, especially. And drop a comment below and just you can write whatever you want. You can write awesome. You can write one word. You can write anything. You can write, you hate me, whatever.
0:17:42
But just drop a comment below and engage with the video. That’s really going to help as well. If you have any suggestions on how we can expand on this, how we can make it even more powerful. If you know of a way to make it easier, I want to hear about it. This is completely open to the community. We’re just trying to figure out how to do things better and more efficiently inside oxygen. That’s all we’re doing. Not trying to slap my name on all this stuff or anything like that. It’s completely free to you to access, to use, completely free to share, completely free to manipulate and for all of us to collaborate on it. That’s it for me today. Thank you guys for watching. I’ll be back very soon with another oxygen tutorial and some agency stuff as well. Thank you for watching.
