2

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?

6 Answers 6

2

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.

1
  • 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, 2013 at 3:36
1

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...

1
  • 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, 2013 at 3:38
1

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.

1

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/

3
  • 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, 2013 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. Apr 11, 2013 at 16:31
  • Thanks for the link Dan, I do use colorschemedesigner, however you dont answer the 'how' question.
    – Kayote
    Apr 13, 2013 at 15:43
0

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

1
  • 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, 2013 at 9:30
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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