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.
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.