The eye dropper tool

Now the next tool in your web designer kit is going to be the eyedropper tool. It’s a nice easy tool for knowing which colour you are working with.

So, it’s hiding underneath the ruler tool. OK. It should be set to the eyedropper tool by default, but we were using this earlier, remember, so I’m going to use the eyedropper tool, and it’s really for picking colour. So I want to know what colour this green is, so I’m going to click on it, and you’ll notice that up here in my colour swatches it points to it, and here in my foreground colour it selects it.

Let’s double click the foreground colour down here, and you’ll notice that we get our hexadecimal and this is the number that generally get’s used in web design to establish colour. There are some other ways to deal with RGBA, which we’ll look at later on, but you can use these RGB colours as well if you need to . Click OK, and that is the eyedropper tool for picking colour. Let’s say we want to use that colour over and over again in our document. What you can do, you can create what is called a swatch. Now to do a swatch, let’s say I want the peach colour here,- if I select it I can move it in my swatch panels, and I can use this little flyer here that says new swatch, and it uses my foreground colour, that we picked with the eyedropper tool and I can call this BYOL Peach. Click OK. Now what it’ll do is you’ll see him just appear in the end of my little swatch here, that means that I get to reuse that when I need to. Let’s say that I , - now I’m going to switch it back to black and white - and I’m going to draw a rectangle, and it’s going to be black, and what I can do is, I can use this little drop down, and you’ll see there is my peach colour at the end of my swatches, and I can reuse that colour over and over.