Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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!
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?
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.
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...
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.
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.
Have you tried playing around with Kuler? It's a really helpful tool for building color sets. https://kuler.adobe.com/#create/fromacolor
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.
