Connect with us

Culture

Build a Custom Photoshop Swatch from an Image

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.

featured image - custom swatch palette in photoshop

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

pexels autumn walkway photograph preview

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.

photoshop default swatches palette colors

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:

empty swatches palette photoshop cs3

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.

indexed color menu photoshop

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 the history to change the Index settings anyway.

indexed colors settings menu photoshop

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…

image color table menu generator

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

color table generator preview window

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.

loading swatches photoshop howto

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 be sure to change that to .ACT before browsing.

load color table palette swatches

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.

finished swatches palette photoshop preview

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.

Download Swatches

I'm the editor-in-chief of Bittbox.com. I'm a designer and developer by day, and a writer and musician when the feeling strikes. I enjoy vintage advertisements and puzzles with an absurd amount of pieces. Follow me on Twitter.

Click to comment

More in Culture

To Top