selecting a pallete of unique colors

R

Rahul

This is more of a design and perception question so not sure what's a good
group to post it on. I'm trying to generate a automated php status page for
user-jobs running on our server-farm. Like so:

http://dl.dropbox.com/u/118481/web_colors.jpg

Each server name (eu001-eu261) is associated with exactly one jobnumber.
But some jobs can run across many servers. i.e. number of jobs < number of
servers. Many jobs use multiple servers.

I tried loading a sample of HEX color values but many send up being so
close to each other that often it gives an effect where servers seem to
have the same color when, in fact, they have a different job that just
randomly got assigned a similar color.

Is there a way to get a pallate of 50 or so fairly unique (to perception)
colors?
 
D

Denis McMahon

This is more of a design and perception question so not sure what's a good
group to post it on. I'm trying to generate a automated php status page for
user-jobs running on our server-farm. Like so:

http://dl.dropbox.com/u/118481/web_colors.jpg

Each server name (eu001-eu261) is associated with exactly one jobnumber.
But some jobs can run across many servers. i.e. number of jobs < number of
servers. Many jobs use multiple servers.

I tried loading a sample of HEX color values but many send up being so
close to each other that often it gives an effect where servers seem to
have the same color when, in fact, they have a different job that just
randomly got assigned a similar color.

Is there a way to get a pallate of 50 or so fairly unique (to perception)
colors?

Hmm

You might be able to simplify the problem:

1) Use a standard colour for any job that is only running on a single
server. This means that several jobs may be able to share a colour.

2) Use a standard colour for an unused server.

However, it might be that the way you're choosing to present the data
isn't the best way to do so.

Could you group the servers by job, with the jobs ordered by number of
servers?

Or perhaps a pie chart?

I think part of your problem is that you're trying to convey too much
information in a single graphic.

Rgds

Denis McMahon
 
J

Jerry Stuckle

Rahul said:
This is more of a design and perception question so not sure what's a good
group to post it on. I'm trying to generate a automated php status page for
user-jobs running on our server-farm. Like so:

http://dl.dropbox.com/u/118481/web_colors.jpg

Each server name (eu001-eu261) is associated with exactly one jobnumber.
But some jobs can run across many servers. i.e. number of jobs < number of
servers. Many jobs use multiple servers.

I tried loading a sample of HEX color values but many send up being so
close to each other that often it gives an effect where servers seem to
have the same color when, in fact, they have a different job that just
randomly got assigned a similar color.

Is there a way to get a pallate of 50 or so fairly unique (to perception)
colors?

PHP knows nothing about colors - that is strictly HTML.

You can pick any colors you want. And how to do it is up to you.

I guess I'm really wondering what your PHP question is.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
(e-mail address removed)
==================
 
B

Beauregard T. Shagnasty

Jerry said:
PHP knows nothing about colors - that is strictly HTML.

I guess I'm really wondering what your PHP question is.

Note where Rahul posted his question.
 
J

Jerry Stuckle

Beauregard said:
Note where Rahul posted his question.

I did, Beauregard. Just pointing out that c.l.p is not a good place to
ask such a question.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
(e-mail address removed)
==================
 
B

Beauregard T. Shagnasty

Jerry said:
I did, Beauregard. Just pointing out that c.l.p is not a good place
to ask such a question.

Why not? The PHP is going to have to generate the HTML (probably from
an array of color codes) ... seems logical to me. There's no way the
post-PHP script (the HTML) is going to be able to know what colors to
use for the points on the graph.
 
J

Jerry Stuckle

Beauregard said:
Why not? The PHP is going to have to generate the HTML (probably from
an array of color codes) ... seems logical to me. There's no way the
post-PHP script (the HTML) is going to be able to know what colors to
use for the points on the graph.

PHP knows nothing about color. It also knows nothing about HTML. That
is just strings to PHP.

Please show me where in the PHP manual it discusses text colors, for
instance. The only place you'll find such is in the GD libraries.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
(e-mail address removed)
==================
 
B

Beauregard T. Shagnasty

Jerry said:
PHP knows nothing about color. It also knows nothing about HTML.
That is just strings to PHP.

Please show me where in the PHP manual it discusses text colors, for
instance. The only place you'll find such is in the GD libraries.

PHP knows what you write in the script.

You're getting off-track. Rahul wants to generate a chart. He will have
to code the colors in the PHP script for the various parts of the chart,
and generate the HTML to display to the browser. Simple enough to
realize what's necessary.
 
G

Geoff Berrow

Is there a way to get a pallate of 50 or so fairly unique (to perception)
colors?

I can't comment about perception (or the way different monitors
display colours) other than to say avoid the blue end of the spectrum.

But to get an even distribution of 64 colours is easy enough

000000, 000033, 000077, 0000BB 0000FF,330000,330033, etc

See http://www.4theweb.co.uk/test/colorpicker64.php

Even so, there just isn't enough difference

It's tough even with 27 colours
http://www.4theweb.co.uk/test/colorpicker27.php

You may have more luck changing the background colour as well
 
J

Jerry Stuckle

Beauregard said:
PHP knows what you write in the script.

You're getting off-track. Rahul wants to generate a chart. He will have
to code the colors in the PHP script for the various parts of the chart,
and generate the HTML to display to the browser. Simple enough to
realize what's necessary.

You're getting off topic. Please see his original question (which you
conveniently snipped):

"Is there a way to get a pallate of 50 or so fairly unique (to
perception) colors?"

Please show me where in the PHP manual it discusses such.

Also, I see nothing to indicate a chart. He could easily be talking
about a table, for instance.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
(e-mail address removed)
==================
 
M

matt

PHP knows nothing about color.  It also knows nothing about HTML.  That
is just strings to PHP.

That's garbage. It's an interesting thought experiment to see how one
could build an algorithm to generate a set of unique-looking colors.
If you don't have any positive suggestions, you *could* actually opt
to just leave the thread alone instead of declaring anything out of
your area of experience/interest to be off topic.

Getting back to the OP, I suppose the first step is to try and
identify a relationship between the color codes and perceptual
"distance" between colors. It wouldn't be particularly difficult to
treat the color code as a number (or 3 numbers) and say "give me a
color y that's 30% different than x." It's the perceptual part that
makes this a very interesting scenario.
 
1

123Jim

Rahul said:
This is more of a design and perception question so not sure what's a good
group to post it on. I'm trying to generate a automated php status page
for
user-jobs running on our server-farm. Like so:

http://dl.dropbox.com/u/118481/web_colors.jpg

Each server name (eu001-eu261) is associated with exactly one jobnumber.
But some jobs can run across many servers. i.e. number of jobs < number of
servers. Many jobs use multiple servers.

I tried loading a sample of HEX color values but many send up being so
close to each other that often it gives an effect where servers seem to
have the same color when, in fact, they have a different job that just
randomly got assigned a similar color.

Is there a way to get a pallate of 50 or so fairly unique (to perception)
colors?


How about dividing the cells into two cells with no dividing border .. one
has the colour for the server, one has the colour for the job .. so you can
quickly see the jobs of a certain colour and which servers are assigned to
which job.
That creates the task of choosing uniquely perceived colours ..here's a big
list:
http://en.wikipedia.org/wiki/Web_colors

Choose colours carefully and they will be sufficiently different to each
other .. don't leave it to random choice. make a big list of suitable
colours and then use only those randomly or as part of a queue of colour.
 
J

Jerry Stuckle

matt said:
That's garbage. It's an interesting thought experiment to see how one
could build an algorithm to generate a set of unique-looking colors.
If you don't have any positive suggestions, you *could* actually opt
to just leave the thread alone instead of declaring anything out of
your area of experience/interest to be off topic.

Getting back to the OP, I suppose the first step is to try and
identify a relationship between the color codes and perceptual
"distance" between colors. It wouldn't be particularly difficult to
treat the color code as a number (or 3 numbers) and say "give me a
color y that's 30% different than x." It's the perceptual part that
makes this a very interesting scenario.

Show me where in the PHP manual it speaks anything about text colors.
It doesn't, because it's not a PHP issue. It's an HTML issue.

Just like generating a SELECT box is not a PHP issue - it's html. Sure,
you may use PHP to generate the HTML for the SELECT box, but that's just
a string to PHP. As are text colors.



--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
(e-mail address removed)
==================
 
R

Rahul

Hmm

You might be able to simplify the problem:

1) Use a standard colour for any job that is only running on a single
server. This means that several jobs may be able to share a colour.

That's a good idea. THanks!
2) Use a standard colour for an unused server.

Could do. On the other hand most of the time we are operating at around
100% utilization. So not many unused servers.

However, it might be that the way you're choosing to present the data
isn't the best way to do so.

Sure, I'm open to sugesstions.
Could you group the servers by job, with the jobs ordered by number of
servers?

May not work. The idea is to convey "job fragmentation". i.e. if a 10
server job uses 10 contiguous servers it is better than 10 dispersed
ones. This matters due to the way the network is set up. Servers closer
together can communicate with lower latency.

I think part of your problem is that you're trying to convey too much
information in a single graphic.

That may be true. I am just trying to push my boundaries of Information
Density.
 
R

Rahul

Getting back to the OP, I suppose the first step is to try and
identify a relationship between the color codes and perceptual
"distance" between colors. It wouldn't be particularly difficult to
treat the color code as a number (or 3 numbers) and say "give me a
color y that's 30% different than x." It's the perceptual part that
makes this a very interesting scenario.

Agreed! The way I took the colors I am currently using is of a pallete of
X11 colors. Before that I was toying with random RGB values. But the issue
always is perceptual mapping.

Two tuples can be both 10% off in some RGB-diff metric but humans might
regard one pair as "close" and the other as "different". That's the
challenge I am thinking about.
 
R

Rahul

Why not? The PHP is going to have to generate the HTML (probably from
an array of color codes) ... seems logical to me. There's no way the
post-PHP script (the HTML) is going to be able to know what colors to
use for the points on the graph.

Exactly that route. My php queries the job-server then for each unique job
in a hash-table it assigns the next color from a list of colors. The
question is : WHat's the best order and composition of this list.
 
R

Rahul

How about dividing the cells into two cells with no dividing border ..
one has the colour for the server, one has the colour for the job ..

That's an interesting visualization option but it only makes the color-
uniqueness problem worse. Now I end up having twice the number of colors,
right?
That creates the task of choosing uniquely perceived colours ..here's
a big list:
http://en.wikipedia.org/wiki/Web_colors

Thanks! I was currentyly using this list:

http://www.uize.com/examples/sortable-color-table.html
Choose colours carefully and they will be sufficiently different to
each other .. don't leave it to random choice. make a big list of
suitable colours and then use only those randomly or as part of a
queue of colour.

True. It is the composition of such a list that is difficult.
 
R

Rahul

(e-mail address removed) (www.1-script.com) wrote in

Coding that would not be a big deal - Google (or Bing) Web-Safe
Colors, fill an array with them and off you go - but 50 unique ones
would be tough to find, even among the web-safe ones. Many colors look
the same depending on the monitor contrast settings and if your users
will have to see it on an older LCD monitor, they are guaranteed to be
lost after the first 30. That's my guess. I do have both a good old
LCD and a bad old LCD monitors and the difference in color
reproduction is incredible. On the bad one you'd be hard pressed to
see the difference between magenta and violet colors (for example).

I was using the original X11 list (pasted below) but it doesn't seem to
be working out so well. A second point is that the composition of the
list is not the only parameter. THe order matters as well.

e.g. Let's say that at a particular instant in time only 3 jobs run on
the servers. Then it makes sense to use, say, red, orange, and yellow.

But as the number of jobs increases I'd slowly need to fallback to colors
that might be closer to something already on the list and then repeat the
process.

Eventually we might have 2 or 3 close colors and the idea is to minimize
such combinations.
You'll most likely have to also use some sort of unique captions or
unique shape icons if you need to show this many variations. Colors
alone may not do it for you.

Thanks! That's an option. Another idea I have is to exploit the cursor
use. i.e. if when a person moved his cursor above a particular server in
the image then if all other servers in the same job also got highlighted
in some fashion it'd be useful to draw out the similarity.

Not sure if there's a way in HTML to do this? Maybe via a color-inversion
etc? Or do I have to shift to AJAX or something fancier? All I need is
some form of a "onhover" event that can be linked to all similar cells.
Any tips?



#######Color list##########

bc8f8f
cd5c5c
a52a2a
b22222
f08080
800000
8b0000
ff0000
fffafa
fa8072
e9967a
a0522d
d2691e
8b4513
f4a460
cd853f
faf0e6
d2b48c
deb887
faebd7
f5deb3
fdf5e6
daa520
b8860b
f0e68c
eee8aa
bdb76b
f5f5dc
fafad2
ffe4e1
6b8e23
9acd32
556b2f
ff6347
8fbc8f
228b22
32cd32
90ee90
98fb98
2e8b57
3cb371
66cdaa
ff4500
ff7f50
ffa07a
40e0d0
20b2aa
48d1cc
2f4f4f
2f4f4f
afeeee
5f9ea0
b0e0e6
add8e6
87ceeb
87cefa
4682b4
708090
708090
778899
778899
b0c4de
6495ed
4169e1
191970
e6e6fa
483d8b
6a5acd
7b68ee
fff5ee
9370db
8a2be2
9932cc
ffdab9
ba55d3
d8bfd8
dda0dd
ee82ee
da70d6
c71585
ff8c00
ffe4c4
db7093
dc143c
ffdead
ffebcd
ffefd5
ffe4b5
ffa500
fffaf0
fff8dc
ffd700
fffacd
808000
ffff00
ffffe0
fffff0
adff2f
7cfc00
7fff00
006400
008000
00ff00
f0fff0
00ff7f
f5fffa
00fa9a
7fffd4
008080
008b8b
00ffff
00ffff
e0ffff
f0ffff
00ced1
00bfff
f0f8ff
1e90ff
000080
00008b
0000cd
0000ff
f8f8ff
4b0082
9400d3
800080
8b008b
ff00ff
ff00ff
ff1493
ff69b4
fff0f5
ffc0cb
ffb6c1
 
J

Jerry Stuckle

Rahul said:
Exactly that route. My php queries the job-server then for each unique job
in a hash-table it assigns the next color from a list of colors. The
question is : WHat's the best order and composition of this list.

Please explain where you find anything related to text color in the PHP
documentation.

The answer is - you can't, because this is not a PHP problem.

According to your logic, I should ask my Linux questions in a C language
newsgroup, because Linux is written in C.

But in this case, it's not a PHP question because it doesn't matter how
you create your HTML. It could be PHP, Perl, VBScript or any of a
couple of dozen languages. The result is the same. And the fact you
included alt.html in your crosspost indicates even you don't think this
is a PHP problem (hint; HTML is NOT PHP!).

A couple of people who would like to see this newsgroup turned into an
"anything goes" newsgroup have argued it is on topic. But they haven't
been able to show where such topics are referenced anywhere in the PHP
documentation.

Now please take your non-PHP questions to a more appropriate newsgroup.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
(e-mail address removed)
==================
 
D

Denis McMahon

That's a good idea. THanks!


Could do. On the other hand most of the time we are operating at around
100% utilization. So not many unused servers.


Sure, I'm open to sugesstions.


May not work. The idea is to convey "job fragmentation". i.e. if a 10
server job uses 10 contiguous servers it is better than 10 dispersed
ones. This matters due to the way the network is set up. Servers closer
together can communicate with lower latency.


That may be true. I am just trying to push my boundaries of Information
Density.

Someone else suggested using shapes.

Take some main colours (VGA safe pallet):

Red - #FF0000
Yellow - #FFFF00
Lime - #00FF00
Aqua - #00FFFF
Blue - #0000FF
Fuchsia - #FF00FF
Gray - #808080
Silver - #C0C0C0
Maroon - #800000
Olive - #808000
Green - #008000
Teal - #008080
Navy - #000080
Purple - #800080

Add some shapes:

Triangle
Square / Rectangle
Diamond
Inverted Triangle
Pentagon
Hexagon
Octagon
Circle / Oval

14 colours * 8 shapes = 112 combinations

Is that likely to be enough? It might give better differentiation.

Rgds

Denis McMahon
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top