WebDevelopersNotes logo

home-icon Home / Resources / Extract color from image: get color codes

Extract color from image: get color codes

Extract color from image: get color codes

If you are a web site designer, I’m sure you will appreciate this neat tool. Typically, clients provide the designer with images and photographs around which the web site layout needs to be created. The first step is to find the colors that will complement these images and photographs.

I know you can use the dropper tool of your favorite image editing program but only this gives the color of the selected pixel. What web designers actually need are the predominant colors in the image.

Sponsored Links

Colorsuckr.com is a web based tool which lists the 12 main colors in an image. Extracting colors from an image is very easy – you simply need to provide the URL of the image and hit the Get colors button. Unfortunately, the service doesn’t allow you to upload images (too bad); however, you can place the image online either on your own web server or a free image hosting web site.

Note: Colorsuckr will try its best to extract the 12 predominant colors in the image. But if the image you’ve used has mostly reds, the results will not be very exciting.

Get hexadecimal, RGB and web safe color codes

The best part of Colorsuckr is that it gives you all the three color codes – hexadecimal, RGB and web safe in a nicely laid out chart. There is more good news. If you provide a web site URL instead of the web address of an image, Colorsuckr shows all the images on that page and you can then pick the one you want.

For those who desire more control and want to visualize color combinations in a different way, the color strips can be dragged and dropped using the mouse. Additionally, hiding the color code information by “clicking on the the small grey dot next to the strip” lets you look at colors in their full glory. Colorsuckr Firefox add-on is also available so you don’t need to go to the web site every time.

Colorsuckr.com works on photos on Flickr too. In fact, you’ll find a Flickr image search on the same page. Once the search results are displayed, simply click the image you want to extract the 12 main colors from the image.

Extract color from images using Colorsuckr

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

  • Bea on January 16th, 2010 2:47 pm

    Thank you for that website. If you need a desktop tool to pick up colors, you can use the so called pipette:

    http://www.sttmedia.com/pipette

    The tool is free and portable and you can get any colors from your screen. The colors are represented in all usual color systems so that you can use them for your applications.

  • aparna on January 12th, 2015 5:57 am

    question:
    how to extract rgb color range from color image in matlab .
    plz give me matlab code.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

Credit for creating the modern computer mouse with an optical encoder, single ball and two buttons goes to Jean-Daniel Nicoud of the Ecole Polytechnique Federale de Lausanne in Switzerland. This was a major improvement over original computer mouse created by Douglas Engelbart. Jean-Daniel Nicoud was assisted by André Guignard during the design process. The "Guignard mouse" was ready in 1977 and picked up by Logitech who saw the potential in the device. In 1980s, they started to get the computer peripheral manufactured from another Swiss company, Dubois Depraz SA. With the proliferation of GUI-based operating systems, the mouse soon became extremely popular. By the end of 2008, Logitech announced that they had sold 1 billion of these. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy