Creating color palettes using adjustment layers
I’ve had some success using Photoshop’s adjustment layers to create large color palettes from a few base colors, so I thought I’d share the technique.
Recently, it came in handy for iStat Menus 5, where we have 14 base colors with 4 variations on each. The 56 resulting colors form iStat Menus’ colors and themes.
To get started, choose some base colors and draw large blocks as shape layers in Photoshop. These don’t need to be final — rough approximates will do. Place them in a horizontal row.
With the base colors in place, it is now possible to create an adjustment layer with a mask running horizontally across all the colors (either a vector or bitmap mask will do). I’ve used two levels adjustment layers here — one to lighten the top third of the blocks, and another to darken the bottom third.
I’ve used levels adjustment layers as an example, but hue/saturation, vibrance, curves and other adjustment layer types can be just as effective, depending on your needs. Oh, and gradient maps. Gradient maps are awesome, always.
The technique also works well with shape layers and blending modes. Here’s some yellow blocks to split the base colors into vertical thirds. They’re both using the overlay blend mode, with 40% and 80% opacity respectively.
The result is a nice shift, giving us some stronger and brighter colors that relate to the originals.
Because the adjustment layers alter the shape layers underneath, everything can be tweaked in realtime.
My next challenge will be getting all the color values out, in an automated way. Loading the palette into the macOS color picker as an image helps, but isn’t a complete solution. If you know a good way to get the colors out, let me know.
Update 20 August 2014: Kamil Khadeyev created a great script to move colors in a grid on the canvas to a Photoshop swatch. Once the colors are in a Photoshop swatch, you can export them for use in other places. So good!
Published 15 August 2014.