Simple Photoshop tricks: Finding a complementary colour
Continuing my series of stupidly simple Photoshop tips, here is how I select a complementary colour when I need a highlight (or lowlight) for a design element.
I’m useless at picking colours that go well together, so when designing I rely heavily on tools like the Well Styled Color Scheme Generator, the Color Schemer and (my personal favourite) Behr’s ColorSmart tool to pick colours that go well together.
However, for finding just one colour I find the following technique works well.
The same but different
Here are a couple of coloured blocks; I want to add a darker bar at the top of each one, and a lighter bar at the bottom. I could click around the colour chart until I found a colour that looked right, but what I prefer to do is:
- With the Color Picker, pick the colour of the block
- Leave the Hue setting as it is
- Slide the Brightness down a set amount, e.g. 10 or 20
- Slide the Saturation up by the same amount
This gives you a darker, more saturated colour that matches perfectly with the main block (as the Hue is the same). By using a fixed pattern like this, I don’t have to worry whether I’ve picked exactly the right colour, and I also know that the relationship of the darker to the lighter colours is uniform across the blocks.
Here are the blocks from earlier with two darker bars added. You can do the same thing to create highlights by reversing the direction you move the Brightness and Saturation sliders.
Filed under: Photoshop, Design.
Technorati tags: photoshop
Bookmark this article with del.icio.us
Previously: Shitty behaviour from Unmatched Style
Next: Refresh Cambridge
Comments
- James Gregory
- 723 days ago
- Good tip! I’ll be using that one often, I can tell already. Usually I just pick the colour then move diagonally up or down, in the colour pallet; pretty random really.
- #1
- Andy Pearson
- 723 days ago
- Great tip indeed, its painfully simple, and i wonder why i never thought of it, ususally i just do it by eye by this is a much more precise way!
- #2
- Matthew Pennell
- 723 days ago
- Glad you liked it. :)
- #3
- Nigel
- 720 days ago
- Nice tip Matthew. Technically I don’t think mean complementary color as in color opposite on the color wheel, looks like this method will generate tints and shades of the same color. I use a similar method. I have a psd template with a color layer on the bottom and then a black and white layers on top with opacity at about 50%. I color the bottom layer and the dark and light layers above give me the tints and shades. It’s great for generating color palettes. Adjust the opacity of the white/black layers to adjust the depth and contrast.
- #4
- Matthew Pennell
- 720 days ago
- Nigel: I know, but I was too lazy to think of a better post title. ;)
Your technique sounds similar to one that Malarkey posted a while back; I think he had about 5 different shades of grey as well as black and white, though. - #5
- Matthew Pennell
- 702 days ago
- Thanks, Dave – it’s the best colour picker I’ve found, I use it all the time.
- #7