Sampling from a photo is an excellent way to pull colors for painting, digital design, or any creative project. However, manually sampling each color is time-intensive and only useful when you really need a precise color match. Otherwise, it's a whole lot easier to build new swatches dynamically through Photoshop. Extracting swatches from the high-resolution images is an interesting process. You can discover a new array of colors through this process.
I'll be showing you how to open an image in Photoshop and pull a large sample of colors into a new swatch. The process is relatively automatic and just requires flicking through a couple of menus. Once you've built a new swatch you can use that as a baseboard for creating a digital interface, icon, logo, or anything else you might need. Color swatches are very useful once you learn how to control them and put together a solid color scheme library.
1. Opening the Image
First, you'll want to find an image somewhere online. This could be from a free creative commons resource like Pexels or another similar website (Unsplash). You might choose real-life photography, a portrait painting, cartoon pictures, anything that catches your attention. Make sure there are enough colors in the image to satiate your color appetite.
I've chosen this Autumn Street photo submitted into Pexels under the CC0 license. In this instance, the photo is very large (4000×3000) so I've resized it just a bit smaller(2000×1300). Size does matter because the number of pixels will be blurred, thus blurring colors together. If you want to grab much more precise colors then get the largest resolution image you can find.
Over on the right-hand side, you'll notice a palette named Swatches. By default, this contains a number of basic items which most designers never concern themselves with. Unfortunately, Photoshop makes it a little difficult to get rid of these defaults, but it is possible.
Hover your cursor over the first red swatch and hold the ALT key. You'll notice the mouse cursor icon changes into a pair of scissors. When you click it will delete that swatch from the palette. You'll need to do this for every swatch until the palette is completely empty. I certainly hope the Photoshop team invents a better method for cleansing this swatches palette in the future – but for now, this is our only option.
2. Reducing Colors
Once you've got the swatches palette clear there should be nothing left. It'll look completely empty like this:
The next step is to create a mosaic-like pattern in the image by reducing the total number of pixels into blocks of color. Head up to the menu bar and select Image > Mode > Indexed Color.
A new window should appear with lots of options. From the top palette dropdown select Local (Perceptual). Then change all other dropdown menus to None(Forced, Matte, & Dither). The only option left is Colors which takes a numerical input. I would recommend playing with this number to see what you like best.
The photo will shed lots of texture once you get down to 5-10 colors. 20-40 is a good number for minimalism, while 128-256 is a good higher-end number. Just pick something you like and see how it looks. You can always go back in history to change the Index settings anyway.
3. Creating the Swatch
In order to create a swatch, we first need to save the current color table. Move up to the menu bar and select Image > Mode > Color Table…
This opens a new dialog window showing all of the colors. You might choose to delete some you don't like or just leave them all. Once you're ready to hit the Save… button to save an .ACT file. The .ACT filetype is a color table library, while .ACO is a natural swatch palette. This is how you can export color tables and then import them as new Photoshop color libraries.
Once you've saved the file your original image won't be needed anymore. You can close it without saving changes, or keep it open just in case you want to go back and try out some different color indexing effects.
Click on the little down-arrow icon in the right-hand corner of the swatches palette. This opens a context menu where you should click Load Swatches… to browse for your newly-saved color table. By default, the palette load screen is looking for .ACO files, so are sure to change that to .ACT before browsing.
Now just select the file and presto! All the colors will be loaded right into your swatches palette for easy use.
And if you want to re-save the colors as a regular swatch(.ACO) file, just open the same context menu and select Save Swatches… This will default to the .ACO filetype which may be more suitable for sharing online or saving locally to your computer.
I've included my free sample swatch pack from this tutorial which you can download below. The .zip file includes both .ACO and .ACT files for your convenience.