Follow me:

Colour Matching Tutorial

Ok, so maybe you want CSS which co-ordinates with your layout image, or maybe you’ve found the exact colour you want to use on your own site, but don’t know what the hex code is. This quick tutorial will help you find the exact colour from any image

Step 1

Open up Animation Shop and either open up or paste the image you want to get the colour code of. If it’s a background, scrollbar or similar, press the Print Screen key on your keyboard then right click and paste into Animation Shop.

Step 2

Click Dropper and then click the colour on the original image that you want to find the hex code of. I want to know what shade of navy blue the birds are in the picture below:

Jasc Animation Shop Colour Matching Tutorial

Step 3

If you look in the colour palette on the right hand side of your screen, you’ll see that the colour has appeared in the foreground box, so click in the centre and copy the hex code (see the diagram below):

Jasc Animation Shop Colour Matching Tutorial

Jasc Animation Shop Colour Matching Tutorial

Step 4

Now you can use it for whatever you like!

Step 5

Matching when colourising is slightly different; instead of copying the hex code, copy the Hue and Saturation numbers down, then go to Colours > Colourise, and type them in. You should get a close or exact match.