Photoshop CS for the Web
Quickly changing the background color of a Logo from White to Black
AKA How to change the background color of a logo from white to black
(c) 2005 Hanford Lemoore
After Hurricane Katrina devastated our Gulf Coast area, a lot of kind website owners posted Red Cross donation links (with logo) on their websites. However,
the Red Cross's logo is designed to go on a white background only and
it tends to stick out like a sore thumb on dark-background websites:
The problem is not exclusive to just the Red Cross logo. Lots of logos are designed to be on white backgrounds only and look out of place on dark-background websites. Often times access to the original file is
not possible, so pulling the image off of the web is the only way to go. In general this technique is suitable for any raster line-art image that is anti-aliased to white. It doesn't have to be a logo.
My solution to this problem is the quick application of two Photoshop commands:
Please note that this technique is for casual use and is not meant as a replacement for doing it the proper way, which is contacting the company/website in question and asking them how to deal with art-on-black websites.
Websites that are particular about thier logo will no-doubt have a better solution for you.
- Make sure the image is in RGB mode by using Image > Mode > RGB Color if it's not already checked.
- Invert the logo using Image > Adjustments > Invert (ctrl-I)
- Open the Hue/Saturation dialog (ctrl-B) and change the Hue by 180 degrees by sliding the Hue slider all the way to the right.
- Alternatively, you can use the Invert and Hue & Saturation Adjustment Layers to achieve the same effect
in a non-destructive manner.
How it Works
This technique does two things. First, it inverts all the color: White becomes black, and black becomes white. However, it also makes colors change: red becomes cyan, dark green becomes light magenta, etc. etc. The second step takes
care of this: rotating the hue by 180 degrees changes the colors back to their original hue, although their saturation and lightness is still inverted.
Pros & Cons
- Incredibly quick; requires no masking or trial-and-error steps.
- Works not just for logos but for line art (clip art, scanned art, etc).
- Works for black-and-white logos and on Full Color logos
- Logos with "official" colors will not have their colors retained.
- logos with very bright or very dark color may not look right.
- logos with bevels or drop shadows tend to not look right.
- photo-realistic logos tend not to look right.
Red Cross example courtesy of Humu Kon Tiki .