Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:11Length:33 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.8 VS Color Picker

The VS Color Picker extension does exactly what its name implies: it provides you a pop-up color selector that makes choosing colors much easier.

Related Links

2.8 VS Color Picker

Hello, and welcome back. In this lesson, we're gonna talk about a color picker plugin, which allows us to very easily select colors for our website. So if we open up our Explorer here and jump into any CSS file that you're dealing with, let's say that we wanted to make a rule for our btn class. Well, before we make that rule, let's jump over to our extensions, and I'm gonna search for plugin called VS Color Picker, and here we go. If we type vs color, it's the first one that shows up, and I'm going to install that. And reload the page, and there we go. So coming back to our CSS file here, let's now see how this works. So if we were to change the background color, for example, for our buttons, as soon as I type in the hash tag here or the pound sign, we get this color selector that pops up. Now, keep in mind that this, it works, but sometimes you'll see this pop-up like halfway down the screen. Sometimes it'll show up right below where you're typing. Sometimes it shows up halfway down your screen, so just keep an eye out for it. But once you type in that pound sign, you should get this pop-up somewhere. And we can now click and drag this around, and we can click on this little palate here to select our color. So then we can choose from one of these basic colors here, or we can move around and specify our color that way. Once we find the color we want, we simply click on OK, and it adds it for us. And then we can put our semicolon at the end. Then, at any point, if we wanted to change that color, we can just click somewhere on the color itself, and then we can go through. Now, you'll notice there's also a eyedropper tool here. We can pick a color from the screen, which is kind of helpful, except there's not much on our screen here that I would want to pick. But the good thing about this is if you have another window open, for example, I have another window open on my other monitor, and I'm hovering over a blue background right now on that monitor. And it's showing up here in the color picker, so whatever you're hovering over, whether it's in this window or a different window, it should work just fine. So let's try that again. I'm gonna click here. I'm gonna click on the eyedropper, and if I move over to my other screen, it's changing based on what I'm hovering over. It went away there for a second, so I'm not sure why that happened. But this does allow you to choose colors from anything else that you might have open on your computer. So, again, it's a very handy plugin, and it can save you a lot of time when entering in your colors. So, obviously, this works for background colors, for text colors, anything where you would be entering in a value like that. So thank you again for watching, and I'll see you in the next video.

Back to the top