Using colors for a broad range
Chris Isaacson
I was thinking of an app that requires a range of values from like
-1 to +1 (could be anything, as long as it goes 2 directions), and I
was trying to find out how this could be best shown graphically. My
thoughts were to range colors from A to B w/ an even (0) score lying in
the middle.
The first try was black to white.. but it seemed 1 sided.. the eye
sees black as zero not -1.. The second attempt was using two opposite
colors (red and green RGB) though this had the problem of having yellow
as the zero value.. This wasn't so bad, but didn't look quite correct
(in my eyes) another approach is the b/w one where you vary Luminosity
over a constant hue and saturation.. I have yet to try this approach.
So I'm not completely reinventing the wheel, my question is:
How have others implemented using colors for both a positive +
negative range? The more colors used the better as resolution is
important.. Any suggestions?
Chris Isaacson
Russ Williams
Chris Isaacson wrote in message <357B0C82...@mediaone.net>...
> I was thinking of an app that requires a range of values
>from like -1 to +1 (could be anything, as long as it goes 2
>directions), and I was trying to find out how this could be
>best shown graphically. My thoughts were to range colors
>from A to B w/ an even (0) score lying in the middle.
You'll get the most colours used by varying the hue, but
there's not really a saturated colour that suggests
neutral. Perhaps varying the hue and lowering the
saturation or brightness in the centre?
How about 2 opposite colours (red/green) with saturation
dependent on the magnitude of the value (ie: dull/grey in the
middle, bright at the ends). A similar thing could be done
with the intensity for red->black->green.
---
Russ
Amit Patel
Chris Isaacson <chrisi...@mediaone.net> wrote:
| I was thinking of an app that requires a range of values from like
| -1 to +1 (could be anything, as long as it goes 2 directions), and I
| was trying to find out how this could be best shown graphically. My
| thoughts were to range colors from A to B w/ an even (0) score lying in
| the middle.
|
| sees black as zero not -1.. The second attempt was using two opposite
| colors (red and green RGB) though this had the problem of having yellow
| as the zero value.. This wasn't so bad, but didn't look quite correct
| (in my eyes) another approach is the b/w one where you vary Luminosity
| over a constant hue and saturation.. I have yet to try this approach.
This wasn't for a game, but I was working on a program that displayed
information about the rocks underneath the Gulf of Mexico, and I had
set up a gradient from black to white, and my boss told me that the
way they want the gradient is red (255,0,0) to white (255,255,255) to
blue (0,0,255).
That way, the zeros in the middle are boring old white, and the
interesting stuff (near -1 or +1) had a bright color. Also, you could
easily tell whether something was negative or positive because it'd be
reddish or bluish.
So you might want to try the two-gradient approach -- have a color at
-1, another at 0, and another at +1.
- Amit
Gerry Quinn
>
>This wasn't for a game, but I was working on a program that displayed
>information about the rocks underneath the Gulf of Mexico, and I had
>set up a gradient from black to white, and my boss told me that the
>way they want the gradient is red (255,0,0) to white (255,255,255) to
>blue (0,0,255).
>
>That way, the zeros in the middle are boring old white, and the
>interesting stuff (near -1 or +1) had a bright color. Also, you could
>easily tell whether something was negative or positive because it'd be
>reddish or bluish.
>
I believe people think a rainbow colouration with blue meaning maximum
and red meaning minimum is the 'scientific' way to show values. In
fact it is utterly non-intuitive.
I recommend a 'thermal' scale, going from
black = cold
dark violet = warm
red = hot
yellow = very hot
white = hottest
Everyone can instinctively relate that to the temperature of a fire.
- Gerry
===========================================================
http://indigo.ie/~gerryq/Brewster/brewster.htm
Brewster Kaleidoscopic Screensaver for Windows 95
The only saver that simulates a real kaleidoscope
===========================================================
Jason Main
My two cents say to use the grad that Amit is sugesting except to knock
down the center value to 64,64,64 or some were around there (because of
responce you may have to alter these values. A light grey is what I
was trying for). The idea is to keep the zerozalue from overpowering
the R and B to the point where the eye thinks that the values are greater.
-Jason Main
Amit Patel wrote:
>
> Chris Isaacson <chrisi...@mediaone.net> wrote:
> | I was thinking of an app that requires a range of values from like
> | -1 to +1 (could be anything, as long as it goes 2 directions), and I
> | was trying to find out how this could be best shown graphically. My
> | thoughts were to range colors from A to B w/ an even (0) score lying in
> | the middle.
> |
> | The first try was black to white.. but it seemed 1 sided.. the eye
> | sees black as zero not -1.. The second attempt was using two opposite
> | colors (red and green RGB) though this had the problem of having yellow
> | as the zero value.. This wasn't so bad, but didn't look quite correct
> | (in my eyes) another approach is the b/w one where you vary Luminosity
> | over a constant hue and saturation.. I have yet to try this approach.
>
> This wasn't for a game, but I was working on a program that displayed
> information about the rocks underneath the Gulf of Mexico, and I had
> set up a gradient from black to white, and my boss told me that the
> way they want the gradient is red (255,0,0) to white (255,255,255) to
> blue (0,0,255).
>
> That way, the zeros in the middle are boring old white, and the
> interesting stuff (near -1 or +1) had a bright color. Also, you could
> easily tell whether something was negative or positive because it'd be
> reddish or bluish.
>
Sam Inala
Gerry Quinn <ger...@indigo.ie> wrote in article
<6lhrcs$kej$3...@news.indigo.ie>...
> I believe people think a rainbow colouration with blue meaning maximum
> and red meaning minimum is the 'scientific' way to show values. [..]
>
> I recommend a 'thermal' scale, [..]
This is a good recommendation. If you're interested in studying how to
best display information, you might look at Edward Tufte's books:
_The Visual Display of Quantitative Information_
_Envisioning Information_
_Visual Explanations_
If I were to choose one, it would be _Envisioning Information_.
--
Sam Inala < s a m i @ m i c r o s o f t . c o m >
Chris Isaacson
Gerry Quinn wrote:
> In article <6lhka8$mdf$1...@nntp.Stanford.EDU>, am...@Xenon.Stanford.EDU (Amit Patel) wrote:
>
> >
> >This wasn't for a game, but I was working on a program that displayed
> >information about the rocks underneath the Gulf of Mexico, and I had
> >set up a gradient from black to white, and my boss told me that the
> >way they want the gradient is red (255,0,0) to white (255,255,255) to
> >blue (0,0,255).
> >
> >That way, the zeros in the middle are boring old white, and the
> >interesting stuff (near -1 or +1) had a bright color. Also, you could
> >easily tell whether something was negative or positive because it'd be
> >reddish or bluish.
> >
>
> I believe people think a rainbow colouration with blue meaning maximum
> and red meaning minimum is the 'scientific' way to show values. In
> fact it is utterly non-intuitive.
>
> I recommend a 'thermal' scale, going from
> black = cold
> dark violet = warm
> red = hot
> yellow = very hot
> white = hottest
>
> Everyone can instinctively relate that to the temperature of a fire.
>
> - Gerry
>
> ===========================================================
> http://indigo.ie/~gerryq/Brewster/brewster.htm
> Brewster Kaleidoscopic Screensaver for Windows 95
> The only saver that simulates a real kaleidoscope
> ===========================================================
the problem here is that I need negative values of the same magnitude.. what is negative
heat if black = cold? (or are you suggesting a scale from black to white w/ red as the
neutral value?)
Chris Isaacson
Gerry Quinn
> the problem here is that I need negative values of the same magnitude.. what
> is negative
>heat if black = cold? (or are you suggesting a scale from black to white w/
> red as the
>neutral value?)
That is a bit trickier, I agree. It would be one solution, but maybe
it would be better to have just two colourized grey-scales
using colours of your choice. You could choose whether to have black
or white in the zero-range.
Amit Patel
Gerry Quinn <ger...@indigo.ie> wrote:
| In article <6lhka8$mdf$1...@nntp.Stanford.EDU>, am...@Xenon.Stanford.EDU (Amit Patel) wrote:
|
| >
| >This wasn't for a game, but I was working on a program that displayed
| >information about the rocks underneath the Gulf of Mexico, and I had
| >set up a gradient from black to white, and my boss told me that the
| >way they want the gradient is red (255,0,0) to white (255,255,255) to
| >blue (0,0,255).
| >
|
| and red meaning minimum is the 'scientific' way to show values. In
| fact it is utterly non-intuitive.
Actually I never thought of it as being the 'scientific' way. Rather,
I just have grown up in a culture that associates red with negative
and green or blue with positive,
I have to agree with Jason Main that going red to gray to blue would
probably be better for picking out the red and blue than red to white
to blue.
| I recommend a 'thermal' scale, going from
| black = cold
| dark violet = warm
| red = hot
| yellow = very hot
| white = hottest
|
| Everyone can instinctively relate that to the temperature of a fire.
I always associate 'blue hot' (gas stove) as being something hotter
than 'red hot' (candle), so for a fire scale I'd use:
black
dark red (embers)
red
orange
yellow
[argh, what goes in here?]
blue
white (just because it's really concentrated in ultraviolet but you
can't see that so you just see the other colors mixed together)
However, dropping the blue from that list would be more intuitive to
most people I think.
Maybe the scale should be based on the color of stars. Brown dwarfs
are the coldest; then red giants, yellow normals, and blue and white
superstars. (And then black holes! ha!)
The original question I believe was about representing both negative
and positive values, rather than just positive values (where a thermal
scale should work well). The two-gradient approach lets you easily
whether something is positive or negative, while using one gradient
makes it hard. (For example, if "red" was zero, then it's hard to
tell on which side of zero your value is.)
- Amit