32

I'm designing a web application that crowdsources user response to another user's initiative (or project idea). The overall user response to the initiative is represented using a status component with 3 states: Warm, Lukewarm, Cold (a Warm response is a more well-received response).

I'm using #FB6B7B for warm, #45CBE5 for cold. However, I am unsure of what color to use for lukewarm. May I ask what is the color associated with lukewarm in the eyes of the general public?

the 3 states of my status component

  • 44
    I am more thrown off by how the "good" response is red. Why not something like positive (green), neutral (gray, maybe), negative (red)? – Reinstate Monica Jun 12 at 19:38
  • 7
    @Justin: Because red is associated with higher temperatures, and blue with lower temperatures; thus, it makes sense for "warm" to be red and "cold" to be blue. – Sean Jun 12 at 21:38
  • 33
    I totally agree with @Justin The very fact that you have this question shows how uncommon and confusing this experience will be for people. I’d reconsider using traffic light colors or something people already understand. – Ryan Jun 12 at 21:59
  • 6
    red is warm, pale red is lukewarm. – TaW Jun 12 at 23:43
  • 7
    @DawoodibnKareem I would say "thumb-sideways" isn't super intuitive either, or atleast not widely used. I would instead recommend smiley face :), frowny face :(, and that smiley with the straght line mouth :|. Like this – DasBeasto Jun 13 at 13:41

10 Answers 10

29

Beige


Windows 10 has a color temperature meter for Night light.

Win 10 Night Light Color temperature

Using that as a starting point, I extracted the main colors from the gradient, inverted the colors to extrapolate the 'cool' half of the gradient, and worked this out:

Color Temperature Meter

On this 5-point scale, Lukewarm is #FFE1A5.

Of course this will change if you change the Warm color. The Cold color is a complementary color to Warm (#FF6000 <---> #009FFF, computed using ColorHexa).

You can use this jsFiddle to tune the colors to your satisfaction.

  • 4
    This has the added benefit of playing into the perception of beige as a boring color. – arp Jun 14 at 4:06
  • 10
    "Your Neutralness, it's a Beige Alert!" – RonJohn Jun 14 at 4:20
26

There isn't really a color associated with lukewarm. As the diagram in xiota's answer shows, the color association humans have (red = warm, blue = cold) are even the opposite to what you'd expect from a physics point of view.

  • Since 'lukewarm' is the neutral option, you could go with a neutral color: gray. Do make the button's style different from disabled buttons, if you have any.
  • Since 'lukewarm' is the middle option, you could go with the color in between red and blue: purple.
  • Since 'lukewarm' is presented in the middle, users will know it's the neutral option in between warm and cold regardless of the color of the button. Of course, its color shouldn't lean too much to one of the other options; I wouldn't choose another shade of blue or red.
  • 21
    (red = warm, blue = cold) are even the opposite to what you'd expect from a physics point of view. maybe for fire. blue fire is hotter than orange/red fire. But ice is blue which is where I think the "cold" comes from. – Brad Jun 12 at 20:45
  • 7
    @Brad I don't know where you get your ice, but mine tends to be clear. – Tashus Jun 12 at 21:48
  • 20
    @Tashus Frozen lakes, glaciers, generally really thick ice looks blue. Thin ice like ice cubes isn't thick enough to really notice. – Brad Jun 12 at 21:56
  • 8
    @Tashus with a small amount, yeah. With a larger amount you get scattering, making it appear blue - it's the same reason we have a blue sky. – Baldrickk Jun 13 at 9:51
  • 5
    @nigel222 I somehow doubt that plumbing is the source of this convention though. Rather they are another adopter of an older convention (fire and ice are older than hot and cold water lines) – Brad Jun 13 at 15:43
24

Violet and Light Green

In color perception theory, at the color wheel there's a division that differentiates warm and cold colors. This division is the one set by violet and light green: above this line the warm and below the cold. Violet and light green have as an attribute that when they are in a warm composition they turn warm and when they are in a cold composition they became cold colors. This lack of definition makes them not warm or cold colors.

enter image description here

The colors halfway between these warm and cool extremes, such as yellow-green and red-violet, are fairly neutral; they seem neither very warm nor very cool. The warm and cool qualities of color at this points are very subtle.

From Ich werde ein perfekter Künstler. Bd. 2. by John H. Miller, Sonja Steiner-Welz

  • 11
    This is not an argument that the "cold" and "warm" terminology applied to colors is the same as how people perceive lukewarm as a temperature or as feedback. This answer appears to conflate the concepts simply because they use the same words, without any reference to actual user testing or UX concepts. – Chris Hayes Jun 12 at 19:04
  • 1
    @ChrisHayes Using the same word would be pretty surprising behavior if the same concept was not intended. I would put the burden of proof on that hypothesis. – Grault Jun 14 at 0:03
  • 2
    @ChrisHayes I don't understand your objection. No one claims hot and cold colors is the same as hot and cold temperature. But the concepts are linked because the same words are associated with both. – 習約塔 Jun 14 at 7:41
  • 1
    I can second purple, have seen it occasionalls for lukewarm – Hobbamok Jun 14 at 10:41
  • 1
    @xiota The words are the same. That's a far cry from the visual language being the same, and it doesn't imply that "halfway between warm and cool colors on the color wheel" is going to put in the mind of viewers "halfway between warm and cool in terms of sentiment". This is the logical jump that needs data to validate it. – Chris Hayes Jun 14 at 17:14
19

I think yellow makes sense for "lukewarm" if red represents "warm" for the reasons called out in Danielillo's answer: "lukewarm" means "moderately warm" and should therefore be represented by a color which is slightly warmer than a neutral green. Magenta would also be an option by this logic, but I think its similarity to hot pink (which literally has "hot" in its name) would make that a confusing choice.

However, I think this may be an XY problem. You're not actually trying to create a UX to gauge temperature, but sentiment. Does the temperature metaphor hold for all of the cultures that you expect to be present in your userbase? Do those cultures map color to temperature and sentiment in similar enough ways for the colors to make sense to everyone? As an example, red is seen as a negative color in many contexts within the Anglosphere (e.g. "in the red", or "red means stop"), but is largely viewed as positive in Chinese culture. You asked about the perception of "the general public," but that perception depends on their culture, and you didn't mention who "the general public" is in this case. Answering these questions will help you make the correct choice for your userbase.

  • 4
    Totally agree with it being an XY problem - and that it suggests the OP and team have no experience of actually running surveys. A competently-phrased survey proposal can be answered by "agree", "disagree" or "no opinion". For more accurate results, the survey can provide gradations of "agree" and "disagree". The OP's proposal though is missing all of this. – Graham Jun 12 at 21:45
  • I'm using "warm", "lukewarm", "cold" in attempt to fit with the web application's theme - "Test the waters". After reading all the responses, I agree that I need to modify my solution. I still foresee using the warm, lukewarm, cold colors somewhere in my web app. I appreciate your advice. – Teik Jun Jun 14 at 12:10
10

How did you decide on cool vs warm? It can be problematic because the interpretation of red is opposite what some people expect, as others have noted.

  • I often see responses color coded green-yellow-red. It seems to work well without explanation, probably because people are familiar with traffic lights. (Even if the lights aren't necessarily green, people still think of them as green, like tennis balls and US dollars.)

  • What you have seems like it could work well enough. Consider using it along with a thermometer illustration.

    thermometer

  • Kaz describes how car temperature controls indicate temperature. Similar solutions are used in some home thermostats and water faucets.

    Car A/C

  • ROYGBIV is used in some weather forecasts

    weather forecast

  • There is a color temperature scale that runs along a blue-red spectrum that is commonly used to adjust white balance on cameras. Notice that blue is hotter, while red is cooler. Intermediate colors are white, yellow, orange.

    color temperature

  • "green-yellow-red... seems to work well without explanation" Unless you're colour-blind. – David Richerby Jun 13 at 16:04
  • 2
    That's why words or numbers are associated with responses. – 習約塔 Jun 13 at 16:22
  • 1
    @DavidRicherby The "green" in traffic lights is actually closer to a bright turquoise or cyan in order to account for color blindness. It's also outside the RGB gamut. – Locoluis Jun 13 at 19:04
  • @Locoluis The blue is particularly striking in Japan, where perceived hues are blue-shifted compared to the Anglosphere. Traffic lights are red, yellow/amber, and "bleen"/"grue". – choster Jun 13 at 22:23
5

As a start, I think if the targeted data related to Temperature the Lukewarm color = purple the midway between red and blue as I'll state that now.

The best colors to pick are ONLY "Red and Blue" which represent clearly the temperature, so any change in the temperature will vary between these two color values by using a gradient to show the change in the degree. as in the listed image as an example.

One of the main general rules in usability: More data representations will confuse the user instead of letting him focus. Because you use colors to get his attraction, but more than that he will go to values and neglect the chart or the graphics thing.

You can read about Mapbox GL which is a suite of open-source libraries for embedding highly customizable and responsive client-side maps in Web, mobile, and desktop applications.

Maybe it's not related to your track of work, but you will get an idea of how to use the heat map and color representations well. Read more to narrow your choices!

enter image description here

This is a temperature map, took it from the net: You can refer to that image from this useful article I used to read recently https://blog.ndustrial.io/temperature-gradient-maps-with-mapbox-gl-9f97fb44d5f2

  • 2
    I totally agree, and I've seen dark purple being used for "not hot, not cold" meaning. – Tomáš Zato Jun 13 at 12:54
5

I think it's instructive to look at passenger vehicle AC/heater controls. These often come in the form of a circular dial whose opposite ranges are denoted red and blue. How they treat the middle between them falls into several patterns:

  • no "lukewarm" zone: abrupt transition from blue to red, with perhaps a small gap.

  • no "lukewarm" color, but a somewhat larger gap.

  • "faux cross-fade" from red to blue with overlap: one stripe is narrowing as the other widens.

  • "faux cross-fade" with coarse-grained dithering: the stripes are chopped up and blended, with cuts of one color getting longer as the others get shorter.

  • The stripes meet, or nearly meet, without overlap, but get thinner toward the center meeting point.

  • The "lukewarm" zone is indicated as a white stripe. Sometimes the blue/white/red arcs are of about equal length. Sometimes white is significantly more than 1/3rd of the range, sometimes significantly less.

I'm unable to find a picture of a design that uses a third color other than white or else transparent (whatever the background/substrate color is).

In a computer UI I'd probably make a gradient from red to white to blue, or from red to transparent/background to blue, or else imitate the above ideas.

3

Magenta

When you mix blue and red light, as opposed to pigments, you get magenta.

Also, subjectively, it feels like a “lukewarm” color to me.

Magenta

  • 1
    Aside from the top centre and bottom centre those are all very strong colours, hardly what I'd associate with lukewarmness at all. Can you explain more why you think they're appropriate? – curiousdannii Jun 14 at 4:50
1

All the physics arguments are irrelevant, the average user doesn't have a clue about colour temperatures. But drawing a line on a hue-lightness colour wheel between red and cold-water blue might give you a clue. It passes through a pale pink with a slightly more mauve hue than the red. That would probably be a good lukewarm colour. Hot and cold cancelling, but with enough warmth left to notice.

0

This question is a perfect example of bias. The requirement was "how to show a user response". But the choice/"solution" given was an assumed solution - the use of color to show user response. The correct approach should be, how to best show the user response - thumbs up/sideways/down might be a correct approach- they symbolize approval/disapproval.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.