5

I'm trying to generate a color palette which has 16 colors. i will display this palette in 4x4 grid.

so i have to find a way to rgb color palette which has 255*255*255 colors divided to 16 colors equally and logically.

i think it's gonna be a mathematical algorithm. because i'm tring to pick 16 vectors from 3x3 matrix which picked in equal scale.

Lazer
  • 90,700
  • 113
  • 281
  • 364
Mehmet Fatih Yıldız
  • 1,763
  • 18
  • 25
  • You're trying to pick 16 vectors from a 3D space with 255 elements in each dimension. This is not a 3x3 matrix. This will also be difficult to do uniformly because 3 is not a divisor of 16 (if it were this would be trivial) There might be something from color theory that comes to the rescue. As it stands, it strikes me as a sphere packing problem. – aaronasterling Sep 04 '10 at 22:32
  • Or rather, a variation of the sphere packing problem (sort of the inverse actually in that you want to put 16 spheres in three dimensional space as far apart from each other as possible. – aaronasterling Sep 04 '10 at 22:38
  • yes you are right, i'm not good at this actually, i thought there are some aproaches/known solutions for this problem. have you heard that kind of thing? – Mehmet Fatih Yıldız Sep 04 '10 at 22:39
  • Well it seems this is not a trivial question, but without too much thinking, why don't you create a linear vector of hue and saturation of 16 components? I mean 1 x 16 and show them a s cuadricule? – jsan Sep 05 '10 at 06:01

7 Answers7

7

actually i have found a way depends on this "dividing color palette" problem. i will use this color values with converting rgb values to hsv values.

hue, saturation, value

so i can use one integer value between 0-360 or i can use one integer between 0-100 (%) for my color palette.

finally, i can easily use this values for searhing/filtering my data based on color selection. i'm diving 0-360 range to 16 pices equally, so i can easily define 16 different colors.

but thanks for different approaches

Mehmet Fatih Yıldız
  • 1,763
  • 18
  • 25
  • but, as supercat suggested, you'll probably want to combine hue and value differences as either alone yield hard to distinguish items in 24-bit color. – msw Sep 05 '10 at 02:35
3

You are basically projecting a cube (R X G X B) onto a square (4 X 4). First, I would start by asking myself what size cube fits inside that square.

1 X 1 X 1 =  1
2 X 2 X 2 =  8
3 X 3 X 3 = 27

The largest cube that fits in the square has 8 colors. At that point, I would note how conveniently 8 is an integral factor of 16.

I think the convenience would tempt me to use 8 basic colors in 2 variants like light and dark or saturated and unsaturated.

bbadour
  • 616
  • 1
  • 4
  • 19
3

You can approach this as a purely mathematical equipartition problem, but then it isn't really about color.

If you are trying to equipartition a color palette in a way that is meaningful to human perception, there are a large number of non-linearities that need to be taken into account which this article only mentions. For example, the colors #fffffe, #fffeff, and #feffff occupy far corners of the mathematical space, but are nearly indistinguishable to the human eye.

msw
  • 42,753
  • 9
  • 87
  • 112
3

When the number of selected colors (16) is so small (especially compared to the number of available colors), you'll be much better off hand-picking the good-looking palette or using a standard one (like some pre-defined system or Web palette for 16 color systems) instead of trying to invent a mathematical algorithm for selecting the palette.

AnT stands with Russia
  • 312,472
  • 42
  • 525
  • 765
2

A lot depends on what the colors are for. I you just want 16 somewhat arbitrary colors, I would suggest:

black    darkgray   lightgray white
darkred  darkgreen  darkblue  darkyellow
medred   medgreen   medblue   medyellow
lightred lightgreen lightblue lightyellow

I used that color set for a somewhat cartoonish-colored game (VGA) and found it worked pretty well. I think I sequenced the colors a little differently, but the sequence above would seem logical if arranged in a 4x4 square.

supercat
  • 77,689
  • 9
  • 166
  • 211
2

This is a standard problem and known as color quantization. There are a couple of algorithms for this:

Objective: You basically want to make 16 clusters of your pixel in a 3 dimension space where the 3 axes varies from 0 to 255.

Methods are: 1) rounding of first significant bits. -- very easy to implement but does not give good result. 2) histogram method. - take median effort and give better result 3) quad tree. - state of the art data structure. Give best result but implementing the qaud tree data structure is hard.

There might be some more algorithms. But I have used these 3.

Master Yoda
  • 587
  • 3
  • 7
1

Start with the color as an integer for obvious math (or start with hex if you can think in base 16). Add to the color the number for each desired sample. Convert the color integer to hex, and then split the hex to RGB. In this code example the last color will be within the number of divisions to hex white (0xffffff).

# calculate color sample sizes
divisions = 16      # number of desired color samples
total_colors = 256**3-1
color_samples = int((total_colors) / divisions)
print('{0:,} colors in {1:,} parts requires {2:,} per step'.format(total_colors, divisions , color_samples))
# loop to print results
ii = 0
for io in range(0,total_colors,color_samples):
    hex_color = '{0:0>6}'.format(hex(io)[2:])
    rc = hex_color[0:2]  # red 
    gc = hex_color[2:4]  # blue 
    bc = hex_color[4:6]  # green  
    print('{2:>5,} -  {0:>10,} in hex {1} | '.format(io, hex_color, ii), end='')
    print('r-{0} g-{1} b-{2} | '.format(rc, gc, bc), end='')
    print('r-{0:0>3} g-{1:0>3} b-{2:0>3}'.format(int(rc,16), int(gc,16), int(bc,16)))
    ii +=1
MrBlank
  • 41
  • 2