[HowTo] Get HTML color codes from an image

[HowTo] Get HTML color codes from an image

Many times while using color codes in your website, may be for a paragraph background or a font color you might have had a certain color in mind after seeing that in an image on your PC or some image on a website, you might have not been able to get the exact same color that you need or you would settle for some color that almost matches the color that you had in mind.

This tutorial guides you through a step by step procedure to get HTML color codes from an image on your PC or the image you see on a website, so that you can use that exact color code for your work.We will work on two examples here, one is the image on your PC and the other is the image on a website.

 

Example 1 : Using an Image on your desktop

 

Step 1: Choose an image on your desktop, I have choosen the twitter logo as many people usually ask for that shade of blue

 


Step 2: You can use Adobe Photoshop to get the HTML color codes, but that option will not go well with most of us, so I have chosen an alternative. Create an account in a free image hosting website such as Photobucket or Imageshack and upoad the image. I have uploaded my image onto a photobucket account.

Step 3: After you have uploaded the image, click on the direct link as shown in the image below.

 

 

Step 4: Now go the website Degraeve Color Palette. Paste the copied URL where the arrow is pointing and click on the color-palette-ify! button and see the color codes of all the colors used in your image.

 

 

Example 2: Use an Image on a website

 

Step 1: Here I am going to use the logo of the website BigRock as my image. Visit Bigrock and right click on the logo and click on copy image URL option

 

Step 2: Repeat step 4 of exmaple and see the results.

 

Share this post

2 thoughts on “[HowTo] Get HTML color codes from an image