Is there a good way to establish a Green-Yellow-Red colour scheme?
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).
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)
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.
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).
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.
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.
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).
I have more on choosing color codes, including how to calculated color and brightness contrast at Breaking the Color Code.