Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I do understand that colour wheel, however, Im struggling with finding colours that match a particular shade of gray. For my web application, Im interested in using this pattern of gray!

gray pattern

Now, say Ive decided to use the colours purple & green & orange, how do I go about finding the particular hue of each of these colours to go along with this shade of gray?

share|improve this question
add comment

migrated from ux.stackexchange.com Apr 10 '13 at 7:59

This question came from our site for user experience researchers and experts.

6 Answers

up vote 1 down vote accepted

You have several options. As others stated gray is (more or less) independent from hue. You can play with matching (relative) luminance. With the following link I prepared some examples: the first color is from your pattern. The next two match your gray's luminance value with different hue and saturation. For the next two I applied a luminance distance of 30% which is a good minimum value for readable text. The last two would "pop out" in your design while still not too light for white text.

Take some time to experiment...

share|improve this answer
    
Thanks for putting in the work John, I like the app and playing with your approach makes some sense, I need to keep playing. Thumbs up. –  Kayote Apr 14 '13 at 3:38
add comment

Gray as in gray gray, as in your #333333? Aesthetically any hue can go with neutral gray. It’s so neutral. Now getting a combination of purple, green, and orange that won’t make your users throw up –that’s more a challenge.

Aesthetics (and personal taste) aside, your main concern is having sufficient brightness contrast between your gray and other colors so users can easily see and read stuff when one is the background for the other. To do that, first calculate the gray-scale brightness of both your foreground and background colors for a “typical” monitor:

Y = 0.2126 * (R/255)^2.2 + 0.7151 * (G/255)^2.2 + 0.0721 * (B/255)^2.2

For example, #333333 is 0.0290, while #FF80FF is 0.4417. Now calculate their contrast:

C = (Y1 + 0.05) / (Y2 + 0.05)

Where Y1 is the brighter (larger value) of your two colors. For example, the contrast of #FF80FF and #333333 is 6.23. According to the W3C guidelines for accessibility, which is also a good guideline for “normal” users, your contrast should be at least 3.0 for large objects and text (e.g., greater than 14 point), and at least 4.5 for small detailed objects and text. In our example, we have enough contrast for either.

I’ve more on the usability of color combinations at Breaking the Color Code.

share|improve this answer
    
Ive never heard of this approach & I found your workings fascinating. Ive read the article once but struggled with the text, however the numbers made more sense. I'll be rereading it a few times. Thank you for the wonderful share! –  Kayote Apr 14 '13 at 3:36
add comment

In the photoshop color picker (or any other like it), you can use the HSV sliders. First select your gray, either by sampling or by setting the saturation to zero and sliding the brightness until you've found the right value. You can then set the hue to whatever color you like, and adjust the saturation slider to adjust how much of that color you want.

This will literally give you a color with the required value, but don't think that this automatically gives you the most harmonious color scheme. For that there is only one true test and that's your own eyes. If looks wrong, it's wrong, no matter what the math says.

share|improve this answer
add comment

Here is a link to a great color wheel tool I use. You can change the RGB value of the wheel, and then pick which color scheme you are looking for. (Mono,Triad, Analogic) You can also adjust the scheme itself to pick between saturation and light which will provide you with a great selection of colors.

http://colorschemedesigner.com/

share|improve this answer
    
Doesn't answer the question. It might if you explained how to use ColorSchemer (which I love) to achieve results related to the question, but a simple link to software is far from helpful in many cases. –  Scott Apr 11 '13 at 16:26
1  
Sorry for the short blurb, I'm at work and saw this post. I updated the post with a more details. –  Dan Whitehouse Apr 11 '13 at 16:31
    
Much better :) Thanks! –  Scott Apr 11 '13 at 16:34
    
Thanks for the link Dan, I do use colorschemedesigner, however you dont answer the 'how' question. –  Kayote Apr 13 '13 at 15:43
add comment

Have you tried playing around with Kuler? It's a really helpful tool for building color sets. https://kuler.adobe.com/#create/fromacolor

share|improve this answer
    
Yes I have. However, it doesnt help answering my question of how to match the colour gray & find a matching hue of purple, green and orange, which is where I need guidance... –  Kayote Apr 10 '13 at 9:30
add comment

This is a dark shade of gray, so the question is more about finding contrast than a color, as all colors work with neutral shades, providing there is enough contrast for the purpose (I'm assuming you want a button or logo that stands out). Because your gray is so dark, I'd suggest going with a lighter shade of any color to really make it pop.

For example, a baby blue will compliment the gray far better than a navy blue would. If you prefer darker colors, balance out the page with some white. It is all about the contrast between adjacent elements.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.