How to Build a Color Palette from Any Photo
Learn to steal colors like an artist
As designers, building a solid color palette is important when creating impressive visual designs. What if you can build a color palette from any inspiration photo? I recently learned a technique from Joshua Davis’s Computer Generated Graphics I course on Skillshare where I can build my own color palette from any photo. I will teach you how to extract colors using Photoshop and introuce the Color Picking Tool that will export hex codes. (Check out Computer Generated Graphics I if you are interested in making art with computers. It is informative and easy to follow course. )
Let’s get started!
1. Find a photo
Any photo will do. For the purpose of this tutorial, I will be using this space photo from NASA. Because … space.
2. Reduce color complexity
Since this photo is a JPEG, it has millions of colors. We need to reduce that number into something more manageable. Buckle in, because this step involves Photoshop. (Or any other photo editing software)
Open up the picture in Photoshop, then go to File -> Export -> Save for Web (Different versions of Photoshop might have different paths to the Save for Web feature)
In the dialogue window that popped up, go to Preset -> GIF 32 No Dither. In the Color Table, you can see that the number of colors are reduced to 32. If this is still too many colors, you can change 32 to 16 in the colour dropdown menu.
You can stop here and just save the 32 colors to be used later. You can do some editing and remove colors by selecting a color in the Color Table and press the garbage can icon.
But if you need to save your colors as hex codes for use in Processing and other programs, save the GIF for the next step.
3. Installing the Color Picking Tool
The Color Picking Tool by Michael Svensson will help you to sort your color palette and export hex codes to be used in Processing. (You can download the Color Picking Tool from Joshua Davis’s public Dropbox) If you don’t have Adobe Air, you’ll need to download Adobe Air to install the Color Picking Tool.
4. Sorting in Color Picking Tool
Import your GIF into the Color Picking Tool by pressing the Load Image button.
You will see your 32 colors displayed in the Pallete View and Hype View window. In the main left hand control panel you can sort the colors by HSL, HSV, and LAB values.
You can also sort the colors to your liking by left clicking and dragging. Right click to delete unesscary colors in the Pallete View.
5. Exporting
Once you have found the right combination of colors, you can copy all of the colors in hex codes.
That’s it! Depending on your project needs, you might not need to go through each step. If you only want to a color pallete in Photoshop then you don’t need to use the Color Picking Tool.
You can also directly important original JPEG photos into the Color Picking Tool. By adjusting the Averaging Slider, Color Picking Tool will reduce the number of colors automatically.
If you have any questions, you can ping me @flodyssey or jamesxzhou.com
