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

@Barnes313

Here are three schemes, hope you like it.

Vote Up Vote Down

@Phylliss782

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:
www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search
Or try to create some of them yourself:
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.

Vote Up Vote Down

@Ravi4787994

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.

Vote Up Vote Down

@Merenda852

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

Vote Up Vote Down

@Ravi4787994

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.

Vote Up Vote Down

@Mendez620

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



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

Vote Up Vote Down