Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Basic colour theory tells us that a colour palette of Green, Yellow and Red is a laughably ugly, they are colours that clash. If we take Green as the prominent colour, the analogous colours that go with it are Red and Blue - there is no room for yellow in such a colour scheme.

So, is there any way that one can combine Green, Yellow and Red in a colour scheme without blinding the users?

As my example, I have a page on a website where these colours are used to measure the required level of a skill for a project against a given user's actual level of this skill. Green satisfies or exceeds this level, Yellow indicates a slight shortfall in expectation and Red means that they are either not good enough or totally lacking in a given skill.

Here is my example (ignore the orange and grey fields around the lettering, they are unrelated).

Screenshot

We can all surely agree that this looks pretty terrible, but it is this format I need to adhere to, the whole Green-Red-Yellow thing. :/

Being a programmer mainly, as opposed to a Graphic/Web designer, my understanding of colour theory and user experience is limited.

To put a point on it, my question is How can one establish a traditionally clashing colour scheme without detracting from the User Experience?

(If my question is unsuitable I will remove it, I was not sure where to ask this, it seemed the most appropriate)

share|improve this question

migrated from ux.stackexchange.com Apr 19 '13 at 12:52

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

    
It's not so much the colors, but the intensity of each, and the coverage of each. Consider icons instead of background fills. Consider pastels or earthy tone rather than these deeply saturated ones. –  DA01 Apr 20 '13 at 18:32

7 Answers 7

Try using pastels instead of the actual RGY colors. With the reduced saturation, it should be easier to look at the information.

Pastel Red Hex:#F7977A RGB:246-150-121

Pastel Green Hex:#82CA9D RGB:130-202-156

Pastel Yellow Hex:#FFF79A RGB:255-247-153

share|improve this answer

Green, yellow, and red can’t go together? The Ethiopians must be terribly insulted. Google for green, yellow, and red images, and I think you find several attractive examples (along with ugly ones).

How well any set of colors goes together depends on the exact color coordinates, and the relative positions, shapes, on sizes of the colored objects, and the effect you want to have (e.g., calming versus exciting, fun versus serious, bold versus subtle). I don’t have any hard and fast rules for you, but here’re some things to experiment with.

Size-saturation trade-off

To avoid a jarring effect (assuming you don’t want that), the size of the colored object should be inversely proportional to its color saturation. Your example had pretty high saturations, so try either lower color saturations (e.g., pastels) or color something other than the background. For example, you could color the text and leave the background neutral, or you could color a small shape or symbol beside the text. The latter would provide a chance to use shape to redundantly code the skill match for accessibility and black-and-white printing purposes (green checkmark for Satisfied, yellow exclamation point for Shortfall, and red “do not enter” symbol for Not Good Enough).

Spacing

How colors look depend on their proximity to each other. Colors than clash when adjacent look okay with a small separation. Try putting a neutral border around each cell to separate the colors more (like you have in your headers), unless there’s some meaning to same-colored cells blending together to be perceived as a single object. Try different thicknesses. Try separating each cell with white borders, going for a tiled look.

Pattern

How well colors go together also changes with pattern the colors makes, so be sure you’re evaluating mockups with typical proportions and positions of the colors. For example, if most of the time everything is green, and it’s most important for users to attend to “highlights” of yellows and reds, then choose a green that make a good background (e.g., low saturation, light), and yellow and red appear to sit “on top” (e.g., higher saturation, dark). Consider that the aesthetics of the pattern can also communicate and motivate the user. If the user has a particularly unsuitable or imbalance set of skills, maybe you want an ugly pattern. The most attractive pattern should correspond to the state that’s most advantageous for the user.

Usability

Your question concerns aesthetics, but color coding choice has major usability implications too. Your color selections should be:

  • Visually distinct from each other, especially if used under degraded visual conditions (e.g., on a mobile in sunlight).

  • Provide good contrast with the background (if its foreground), or with foreground (if its background). For example, black text on red is not so good. Generally, foreground and background need different levels of brightness.

  • Make sure the colors rank consistent with what they code. For example things the user should attend to need to contrast more with the background and other colors.

  • Provide accessibility and printability, where each color also having a different level of darkness, with the darkness scaled to the ranks (red more than yellow more than green). Make your green somewhat bluish and/or your red somewhat orangish so red-green colorblind users (the most common kind of color blindness) can still see color differences.

  • Use color coding for only one variable. I don’t know what you using gray and orange for, but it’s likely to cause confusion and make it harder to for the users to use the red green and yellow colors. Anytime you have more than three colors, it’s hard to keep things usable. Find another way to code whatever gray and orange code (e.g., use font size or weight, or use dashed lines for the cell borders; see Putting the G into GUI).

In one project I worked on, the colors I came with were #E00000, #FF8400, and #C0FFE0 (not a very yellow yellow, but it still worked).

dark red, orange, pale bluish green

I have more on choosing color codes, including how to calculated color and brightness contrast at Breaking the Color Code.

share|improve this answer
1  
You know, if you'd made that blue-green just a little bit bluer yet, you could've had #C0FFEE for the hex code. :) –  Ilmari Karonen Apr 23 '13 at 13:52

I see three primary challenges with these three colors.

  • Red and green have good levels of brightness for use on text, yellow does not.
  • Yellow has a good brightness for a background color, green can be lightened for the purpose, but red will turn pink.
  • Desaturating green and red works fine, but yellow turns muddy.

I can only think of a couple of options, assuming you don't like the pop art affect of big areas of saturated color. Both of these minimize the impact of the saturation by fading the colors out.

  • Use a gradient in the cell background.
  • Apply the colors as text shadows. The shadow would require a fair amount of blur to noticeably highlight the text.

There's one other challenge here that has nothing to do with aesthetics. Red is going to overpower the other two colors and result in drawing attention to the negative marks on the page. If that's your goal, you're good. If you want your chart to be of a positive nature, you'll struggle.

share|improve this answer

"Red", "Yellow", "Green" leave a lot of room for interpretation so you have a good chance to find a combination that works well.

For your aesthetics problem I took your "red" and "green" color and put it into the color blender. Then I chose pHSL as the color model for blending. This already improved the color set.

Next I tried different "reds" and "greens" to further improve the impression. A little bit darker, more saturated/stronger red. A green with a little more yellow, plus higher saturation.

OK, not bad but also not ready yet.

For your usability problem keep in mind that there is the hierarchy of (relative) luminance, hue and saturation to guide our attention. Since yellow naturally has the highest luminance value, these fields would attract our attention the most. So I imported the colors into the color converter for tweaking each color individually. In my example I gave "yellow" and "green" equal luminance values. Lower luminance for yellow or higher luminance for green seemed aesthetically problematic.

I tried my combination in Photoshop and realized that white (spacing) borders made a good impression. So I would recommend white spacing for the cells and at most one thin black line for dividing each line of entries.

By using the tools mentioned above you might find a color combination that meets your personal taste or requirements even better (e.g. higher saturation for green)...

share|improve this answer

You have to be careful when using colors as backgrounds as it can make readability harder and distract the user from the message. i.e. red background and black font.

Converting a color into grayscale normally helps to understand which colors contrast best. i.e. when you convert the reds into grayscale the color is dark gray. Therefore is a bad color to use as a background when your font is black. You need to pick a color that would give you a good contrast.

However, if you want to give the user quickly an understanding of what you are trying to do I suggest leaving the cells blank (light color) and just add a small symbol that indicates the status (square or 5% or the cell filled with the color)

That way the user can read the text and see the category it belongs to fairly quickly.

However, if you want to combine colors, I suggest that you buy the book "Color index". In there you will find thousand of combinations that will go well together and you will save yourself some time.

share|improve this answer

If you find the right shades of the colours you sure can use red, yellow and green together.

I recommend looking in some of these sites where you can find some fine combinations:

http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search

Or try to create some of them yourself:

http://colorschemedesigner.com/

What I really recommend is after choosing your color combination ask another person what they think of it. Sometimes we don't have enough of the outer look and we just like the colours together even if they aren't good at all.

Don't forget to think about contrast and visibility of text while choosing the proper shades.

I would recommend using lighter yellow since you use it as quite neutral colour.

share|improve this answer

Here are three schemes, hope you like it.

share|improve this answer

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.