Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Edit:</p> <p>I don't have any expertise in this area and my math skills are pretty average. But I have the opinion that the solution to this problem is more complex and interesting than many answers here suggest, since I tried to do something similar recently and didn't find a solution.</p> <h2>Color Difference</h2> <p>The perception of color is of course subjective, but there is significant agreement between humans. For example, we can all agree that red, green and blue are very different colors, and even colorblind people agree that black and white are very different.</p> <h3>RGB</h3> <p>The most common representation of color in computer systems is the vector <em>(r, g, b)</em> which suggests a simple distance function like</p> <p><img src="https://i979.photobucket.com/albums/ae274/OttoAlldgr/CodeCogsEqn.gif" alt="RGB color difference"></p> <p>Lets set the range for <em>r</em>, <em>g</em> and <em>b</em> to <em>[0, 1]</em> and see how this works:</p> <ol> <li>Red <em>(1, 0, 0)</em> and red <em>(1, 0, 0)</em> has the distance of <strong>0</strong>, which should be obvious</li> <li>Red <em>(1, 0, 0)</em> and yellow <em>(1, 1, 0)</em> has the distance of <strong>1</strong>, which is smaller than the distance of</li> <li>Red <em>(1, 0, 0)</em> and blue <em>(0, 0, 1)</em> which is <strong>sqrt(2)</strong>, which is plausible</li> </ol> <p>So far, so good. The problem however is that blue and red have the same distance <strong>1</strong> from black <em>(0, 0, 0)</em>, but when looking at the image this doesn't seem to hold true:</p> <p><img src="https://i979.photobucket.com/albums/ae274/OttoAlldgr/red-blue-black.png" alt="blue and red on black"></p> <p>Also yellow <em>(1, 1, 0)</em> and magenta <em>(1, 0, 1)</em> both have have the same distance <strong>1</strong> from white <em>(1, 1, 1)</em>, which doesn't seem to make sense either:</p> <p><img src="https://i979.photobucket.com/albums/ae274/OttoAlldgr/cyan-yellow-white.png" alt="yellow and magenta on white"></p> <h3>HSL and HSV</h3> <p>I think it is safe to assume that analogue metrics for the <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" rel="nofollow noreferrer">HSL and HSV color schemes</a> have the same problems. These color schemes aren't designed for comparing color.</p> <h3>CIEDE2000</h3> <p>Luckily, there are scientists already trying to find a good way to compare colors. They came up with some elaborate methods, the latest one being <a href="http://en.wikipedia.org/wiki/Color_difference#CIEDE2000" rel="nofollow noreferrer">CIEDE2000</a></p> <p><img src="https://upload.wikimedia.org/math/e/5/8/e58a504dd9eb3c85aac01bbf0f208cdb.png" alt="CIEDE2000"></p> <p>(the full formula described in the article is <em>huge</em>)</p> <p>This metric takes human perception into consideration, like the fact that we seem to be unable to discern shades of blue very well. So I'd say we use this as our color difference function.</p> <h2>The Color Picking Algorithm</h2> <h3>Naive solution</h3> <p>Some answers suggested the following algorithm</p> <pre><code>colors = [] for n in range(n): success=False while not success: new_color = random_color() for color in colors: if distance(color, new_color)&gt;far_enough: colors.append(new_color) success = True break </code></pre> <p>This algorithm has some problems:</p> <ol> <li><p>The spacing of the colors isn't optimal. If we imagine the colors to be like numbers on a line, three numbers would be optimally spaced like this:</p> <p>|a-----b-----c|</p> <p>Packing an additional one number in there without moving a, b, and c is clearly worse than realigning all the colors.</p></li> <li><p><strong>The algorithm isn't guaranteed to terminate</strong>. What if there is no color that is far enough form the existing colors in the list? The loop will continue forever</p></li> </ol> <h3>Proper solution</h3> <p>Well.. I don't have one.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload