Using Photoshop to colorize an image to match your color palette

Posted by Dan on Nov 26, 2008 @ 12:55 PM

I'm not a designer. I can make may way around Photoshop, but the majority of my time in Photoshop is spent chopping up layers to convert them into images to use in my HTML & CSS. Occasionally I need to create new graphic assets or tweak the colors in an existing image.

We have a large collection of icons at work, but occasionally I need to adjust the color of an icon to better match the graphical assets where the icons will be used. My need today was to change some blue arrows to match a specific green hue.

Photoshop actually makes this very easy to do.

  1. Set the foreground color to the base color you want to colorize your image to
  2. Next, we need to create an Hue/Saturation "Adjustment Layer" (Layer > New Adjustment Layer > Hue/Saturation...)
  3. Give your adjustment layer a name and click the "Ok" button

    NOTE: If you want to limit your changes to only one layer, check the "Use Previous Layer to Create Clipping Mask" option, otherwise all layers below the new adjustment layer in your Layers Panel will have the mask applied to it.
  4. Click the "Colorize" checkbox

  5. The "Hue" value will now match the color of your foreground color. The "Saturation" value is preset to a value that is consistent with the elements on the current screen. The "Lightness" value is preset to zero.
  6. You can now tweak the settings to get the exact colorization you're looking for. Just note that playing with the Saturation and Lightness settings can start to distort the image by losing the original white and blacks in the image.

I hope this helps someone else. I figured I better finally blog this, since I always seem to forget how to do this and end up having to rediscover the process when I need to go through the process again.

Categories: HTML/ColdFusion


  • Dan,
      I didn't know about the Adjustment layer. I'll have to read up on this more. What does the adjustment layer do? Why can't you just colorize the image layer itself? Thanks.
  • @Daryl:

    The purpose of using an adjustment layer is so that you don't alter the state of the original layer. You can make all the visual adjustment you want to the layer--without actually changing it's original state.
  • Oh, thanks. To think I've just been using Control-Z all of this time. Cool.

Comments for this entry have been disabled.