: How to select colours that match each other? Looking at the colours in this logo, it is clear that the colours match each other. How do I find an orange and purple that match the same colour

@BetL875

Don't confuse "match" with "harmonise". There's a big difference.

These colours don't match (they aren't the same). They do harmonise. To understand the difference, and my answer (which I promise I will get to!), we have to take a slight detour into what colour is.



One of the most unfortunate things about describing colour is that key terms with technical meanings are also used very loosely, both in common speech and in the design world, so it's easy to become confused. It confused the heck out of me, once upon a time, so don't feel like you're alone.

Here goes with a sketch, a very abbreviated introduction to colour, British spelling and all:

I going use the word colour from now on with a very specific meaning: the combined sensation produced on the eye by light, reflected from a particular pigment or directly from an illuminated source, perceived by an observer. That's a long-winded way of saying "what you see that you call 'a colour'". It is what we mean when we say "cherry red" or "apple green" or your paint supplier says "that's Booger Green, the latest fashion colour from Ipsum Studios." You'd think we could stop there, but it's not the whole story. As they say on Facebook, "It's complicated."


Hue is the quality by which we perceive something as "red" or "sort of greenish-yellow" or "chartreuse." In common speech, the word "colour" is often substituted for "hue," and vice versa, but to a designer a colour comprises a hue and two other qualities: saturation and value.
Saturation refers to how "pure" or "intense" the hue is in a given colour, produced in paint by adding white, to give "tints," or black, to give "shades" or "tones". When you reduce the saturation of red by adding white, you get pink. Adding black to red gets you burgundy.
Value is the relative lightness or darkness of the colour, independent of the hue and considered separately from the saturation. A light blue or a dark blue are still blue. For most purposes in design work, Brightness is a synonym for Value.


There are other ways of technically describing colours, but the one I'm giving you here is the one you will run into most often in the graphic design field, and is built into Photoshop, Illustrator and InDesign so that it's easy to get a hands-on experience with it.

Let's take a specific example. Open the Photoshop colour picker and in the H (hue) field enter 56. Drag the little colour circle to the extreme top right of the panel:



Call this "Pure Yellow" or "Buttercup" or whatever you like. This is a yellow that is fully saturated (it can't get any more intense) and as bright as it can go. Notice that the S (saturation) and B (brightness) fields both say "100%."

Click OK, then open the colour picker again. Change the S field to 50%. The hue hasn't changed, and it's still as bright as it can get; only the Saturation has changed. Our buttercup is now what? -- A primrose, maybe. Make S 100% again, and now enter 50 into the B field. Now we have a brown. We have a different colour, but the hue still hasn't changed and the intensity or saturation can't be increased. Play around with this for a bit. Get familiar with it, because it is fundamental to understanding colour harmony.



You were asking about why these colours seem to go together, to harmonise.

Colour harmony is a subject unto itself, one that you must understand as a designer. (It might be better called hue harmony, because it's more about hue than about colour.) In this case there are two pairs of complementary hues, so-called because they match up on opposite sides of the colour wheel. This particular instance is known as a tetradic or "square" harmony, because the four chosen hues are evenly spaced on the wheel, producing a "double harmony."

If you use Photoshop's eyedropper on these colours, you'll see that none of them are fully saturated. Desaturating a color can help colours that would normally clash (be too contrasty for comfort) to coexist more peacefully. In this case, using colours with closely similar saturation and value also helps them to harmonise. If you desaturate the image completely -- Ctl/Cmd-Shift-U, you'll see what I mean.

Epilogue:

This has been a bit long, but I wouldn't have felt I'd given you an answer without covering all the necessary background. I hope you weren't too bored, anyway.

I recommend you subscribe to John McWade's "Before and After" magazine, but in any case immediately download his colour wheel PDF for use in your work.

Once you have a basic grasp of how the colour wheel works, and a sense of basic colour theory, you will find resources like Kuler much more useful.

Vote Up Vote Down

@Murray976

Simply use the color picker in an app like Photoshop. Set the dialog to use the H or Hue option and find a starting color. Then to get color of similar value, move the slider up and down the color bar. This will keep saturation and brightness the same, and only change the Hue value. Don't move the circle in the large color pane.



There are also other places to play with color like Color Lovers Or Adobe's Kuler

Vote Up Vote Down