How to extract color from photo?

23 Jan 2022 | photography, web design

jochem oomen webdesign fotografie | hoe kleur uit foto halen | Foto: Sander de Wilde

If you are doing graphic or web design, you will also come into contact with photography. Sometimes you may then need to extract a particular color code from a photo. How does that actually work? This article answers the question “how to extract color from a photo?” You will also discover what software you can use for this purpose.

When you create a website or graphic design, you need certain colors. If you base those colors on a logo or an existing corporate identity, it’s fairly easy because you’re already working with a limited number of colors. In this article you will read how to remove color from a logo or corporate identity. But how does that actually work with photos? You can read about that below.

Once you work with images in color, you find that your image is actually made up of dozens, if not hundreds, of different shades of color. That’s a little different from a logo, which consists of only four dominant colors, for example. Extracting color from a color photo, how do you get started?

Extracting color palette from photo

A number of colors coming out of an image is called a color palette. Should you want an instant ready-made color palette to come out of your photo, I recommend using the online tool Image Colorpicker. It works very simply: you surf to the website, load up your photo and the software automatically gives you some colors you can work with.

Maybe you already absolutely love these colors, but it’s also possible that you’re not immediately satisfied. In that case, you can also just move the cursor over your photo and choose some colors from your image. The online Image Colorpicker program immediately shows you the corresponding codes.

Image Color Picker is one of my favorite tools. Looking for even more tips? Discover my favorite tools for both web design and photography here.

What is HEX? What is RGB?

If you use this tool, you will see two different terms for each hue: you have HEX and RGB color codes. This is because each hue has a unique code to ensure that a computer screen displays it correctly. The basic colors for a computer screen are red, yellow and blue. Each base color has 255 shades and all these shades can be combined with each other, giving a whopping 16 581 375 possibilities.

The value of each color ranges from 0 to 255. You can see this especially in the RGB value. RGB comes from the basic colors red, green and blue. A RGB value consists of three numbers in parentheses, each with a comma between them. Typically, the abbreviation “rgb” precedes the code. Instead of writing down three numbers with commas, you can use the HEX color code adopt. HEX refers to the hexadecimal value of a color, and hexadecimal means hexadecimal. These color codes are expressed in values from 00 to FF. HEX color codes start with a hashtag, RGB color codes can be recognized by the commas. Many themes and builders, such as Divi, recognize both codes.

How does this work in practice?

After this theoretical explanation, I will give you an example of how this works. Indeed, when I was building this website, I noticed that in my street photos the color turquoise (or apple blue sea green for the Flemings) appeared frequently. Sometimes in reflective surfaces, sometimes in water. I decided to take to upload up in Image Picker. The color palette suggested to me was not immediately sufficient for me.

So I went through the water with the cursor until I got hold of two good shades of turquoise (or, yes, apple blue sea green). One for the buttons over my website, and one to show that you slide the cursor over a button. The base color value of my buttons is in HEX #609C9D (note the hashtag) and in RGB rgb(96,156,157) (note the lowercase rgb, parentheses and commas). If you slide over buttons with your cursor, you will see another apple blue sea-green or turquoise hue, namely 4D7171 and rgb(77,113,113). The first is a HEX code, the second an RGB.

Adding color to website

If you need to do this for graphic design, you can add this color to your default design program. If you like it simpler, you can also add these in Canva. When you start building a website, you can customize it in WordPress in the theme customizer or through your theme in the dashboard.

As a photographer and web designer myself, I usually work in Divi. The great thing about this is that it is both a theme and a builder, where color is very important. You can even enter your color palette right away, even before you start the actual building of the site. Once you have Divi installed, you can enter your color palette in theme options. Once it’s there, then it pops up every time you start constructing something new.

More tools to extract colors from a photo

Image Colorpicker is a really nice tool for me because it works so quickly online. And in case you are afraid for your privacy: this website does not keep your photo! As a photographer, I would also Photoshop could use it to take the color out of the photo. Now Photoshop is really great software, but not always the fastest. Especially not when I have Divi open in Chrome at the same time. Is Colorpicker not your thing and you have no patience for Photoshop? You can also use Color Palette Generator from Canva. Can also be very useful. A final option is the Chrome extension ColorPick Eyedropper, but it really only works online. So if your photo is already on the web, that’s fine to use.

Which colorpicker do you prefer to use to extract color from a photo?

About Jochem

I am Jochem Oomen, web designer and photographer. My goal is to help sustainable entrepreneurs, organizations and schools gain more customers, participants or students. I do this through sustainable web design and minimalist photography. Read more about me here.

Did you find this article interesting? Share it via the buttons on social media!

Staying informed? Subscribe to receive my latest blogs in your mailbox every time!

Read more here

On to a more sustainable internet

Recently, as a web designer, I signed the Sustainable Web Manifesto. With that, I declared my commitment to a more sustainable Internet. Why is that necessary? And how do I do that as a web designer? You'll read about it in this article.Why is the Internet unsustainable?"If the Internet were...

Second-hand or not?

More and more people are choosing used photo equipment or laptops. Not only because of the budget, but also because of the sustainability aspect. But now is it wise to go for second-hand equipment? This article will help you with the dilemma of "second-hand or not." Spoiler alert: it often...

Cycling in Brussels as an entrepreneur

Is cycling in the Belgian and European capitals life-threatening? Those days are thankfully a few years behind us. Getting around this city by bicycle is not only sustainable and a quick way to get around, it's also a good workout. Unsure about biking in Brussels? Find out the pros and cons...

Pin It on Pinterest

Share This