Is there a good way to establish a Green-Yellow-Red colour scheme?


Question

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)

1
12
4/19/2013 12:53:00 PM

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.

9
4/19/2013 1:37:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^