Video Summary

Alright guys, this is coolers Dotco, my company’s called coolers. And this is one of the more powerful tools for WordPress developers and really any developer because this allows us to choose our color scheme or find what color scheme we have and get the exact colors that we’re going to use throughout building the website. This is a free tool, they do offer Pro versions I recommend not using them unless you’ve researched it and it was really gonna benefit you. I’ve been developing WordPress sites for a half a decade now and I have never needed the Pro versions. But I still use this tool on every website I’ve ever built. So we’re gonna want to do is once you get here, just click on Start the generator. And basically what this does is it builds color palettes for you to to really just kind of jog up ideas, and you know, some of them aren’t great, but the idea is, is that you can look at a bunch of different colors really quickly and figure out which ones you’d like and which ones you don’t like. So say for instance, you’ve clicked the spear hit the spacebar, it changes the color scheme, and you just kind of keep doing that until maybe you find a color that you like, and what I usually do for clients that haven’t had a or haven’t had a logo made and don’t know what the color scheme is. Then I’ll either ask them to go on here and just you know, start picking out colors that they think they like being able to mix and match colors and put them next to each other to see how you know how good they are right? Because if you’ve come here, you can drag this over and say, You know what does these two colors look like next to each other. So this really allows you to have a powerful tool and help you know spark creativity. 

So what you’re looking at here as well as these colors are these digits This is the hexadecimal colors that are associated with this color right. Now, maybe you look at this color, and you’re like I liked this, but if it was like a couple shades darker or a couple shades lighter, I think that’d be great. And maybe it’s not quite this teal blue. Over here. What you can do is there’s this little grid and if you hover over it, it says View shades and now you get to look at all these different colors and it goes from like basically black to white and all the different shades, you know, increasing in lightness and darkness up and down. So if you want to say this this color, that’s the color that I really like, right? You can do that all from here. Now what you can do is if you really like this color, you could copy this, the hexadecimal color right there, or what you can do is you can actually click this color right here, and you can copy and paste it here. Now, what I really want to go over to as well we’re in here and what’s what makes the hexadecimal and the RGB color values so important is that if you were building the color scheme throughout your website, and you were using this every time, what are the odds that you’re going to land this little circle, right? Right, that precise, like location on this little rectangle every time what’s going to happen is is that let’s just say let’s just copy this right here. 

And let’s let’s just go here. And we’ll just try to go into blue. That’s blue and we’re going to try to get it right you know what we were like kind of right over here. And maybe we get a little bit lighter or getting a little bit darker. 

So you see what I’m but you see what I’m getting at is that it’s hard to replicate this exact color over and over again, unless you’re using the hexadecimal and the RGB color values. As well as here if you go to picker, they have a bunch of different ones. Different types of how different colors are represented. Some of these are made for like Photoshop and Adobe Illustrator. And some of those more graphic design things. The only ones that we really care about is the RGB and the hexadecimal color. So if you use RGB, you can’t The hard part is I don’t know if you can copy this them. So if you come over here and click this, you’ll be able to copy these color schemes. But or if not, you’ll just know that that the red or the first number first number needs to be 61 comma 144, comma 177, comma, and we’re gonna get that in a second when we start into the code. Pen. And I’ll start showing you the more syntax of how we can use all these different color values. But I want to while we’re still in the course Dotco I kind of want to just cover all of the features that this platform has to offer. And the one that I use the most More times than not is that I’ll get a client’s logo or I’ll take my own logo. And I can be able to upload that into this platform and it will be able to take the different colors that are in that logo and you can manipulate them to be able to get that exact color where if you’d like to use hexadecimal or the RGB that’s completely up to you. So what we’re going to do here is just for the just for this example, I’m just going to come I just looked up NBA logo, I’m going to come over here and click Copy Image address because you can do that as well. So if you find a picture or an image online, that you want to replicate that color scheme, or you want to isolate that individual color, you can use this here. So you’re gonna go to the camera icon right here. 

And you can click upload so if you click here, you can be able to use all have any file that you have on record, or like within your computer, maybe in the cloud. You can use URL, camera or stock. I usually just upload the image normally nine times out of 10 but once in a while I will find a image online and it’s just easier to copy that URL and paste it into here and instead of like saving it on my you know saving it on my desktop then uploading it you know through there. So this is just how it works the same. You know if you use the whatever image that you use, it will work. So we’re gonna click here and click OK. 

Alright, so you see that little white dot right there. We can take this and now we can move it anywhere we want and we can actually get that color and if you can see these little, these little squares, these are basically just pixels and it’s it’s getting the color down to like the like molecular level if you kind of think of it like science, right? Like this is how we just it’s just a very zoomed in version of this. So maybe we want the Lakers Color Purple right there. Now we can come over here and click on this one. And maybe we want to isolate the yellow or the gold for the Lakers. 

Maybe this this one we’ll just try to get that purple and maybe we want the red one just a generic red and let’s get just this outside per our kind of like dark blue, purplish color. And let’s just click Next and we’re going to open this up in the generator. 

Alright, so now we just we just you are basically uploaded or use the URL to upload an image to this platform. We were able to then just slowly pick the five main colors that we wanted from that image. And now we actually have the colors that we want, right so we can use this as an RGB we can use this as a hexadecimal color. 

Basically the default for this program because that’s what’s used the most and it’s the easiest to replicate but um, this is how you’re going to be able to find colors, play with colors. Be able to say, you know, does this color does this color look, you know, good or not, you know, just go look good next to this color. And you can really just be able to start figuring out how you want to style like exactly the color scheme that you want for your site. Um last thing too is say this is like the purple and we want let’s move this back and this is the gold this is just say the Laker colors that we were able to pull from that image, but we will but these colors don’t really go well and complement these colors. So what we can do now is we can just hit space until we find a color that we think looks good. So I could do that forever. But now you get the power. You get the idea and the power of what coolers Dotco can actually do for you. And I recommend using this for every website that you build because this is how you’re gonna get your exact colors. And that’s how you’re gonna layer all these different stylings throughout the website. So let’s just hop over to code pen and I’ll show you how to use these hexadecimal and RGB values within the CSS framework.