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?
Windows 10 has a color temperature meter for Night light.
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:
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.
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.
(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.
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.
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
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.
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.
Kaz describes how car temperature controls indicate temperature. Similar solutions are used in some home thermostats and water faucets.
ROYGBIV is used in some weather forecasts
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.
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!
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
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.
When you mix blue and red light, as opposed to pigments, you get magenta.
Also, subjectively, it feels like a “lukewarm” color to me.
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.
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.
