StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The best solution when a gradient is required between two colors, is to use the <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" rel="noreferrer">HSV</a> representation (Hue Saturation Value).</p> <p>If you have the HSV values for your two colors, you just make linear interpolation for H, S and V, and you have nice colors (interpolation in RGB space always lead to "bad" results).</p> <p>You also find <a href="http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV" rel="noreferrer">here</a> the formulae to go from RGB to HSV and from HSV to RGB, respectively.</p> <p>Now, for your problem with the four corner, you can make a linear combination of the four H/S/V values, weighted by the distance from E to that four points A,B,C and D.</p> <p>EDIT: same method than tekBlues, but in HSV space (it is quite easy to test it in RGB and in HSV spaces. And you will see the differences. In HSV, you just turn around the chromatic cylinder, and this is why it gives nice result)</p> <p>EDIT2: if you prefer "speed and simplicity", you may use a L1-norm, instead of a L2-norm (euclidian norm)</p> <p>So, if <code>a</code> is the size of your square and the coordinate of your points are A(<code>0</code>,<code>0</code>), B(<code>0</code>,<code>a</code>), C(<code>a</code>,<code>0</code>), D(<code>a</code>,<code>a</code>), then the Hue of a point E(<code>x</code>,<code>y</code>) can be computed with:</p> <pre><code>Hue(E) = ( Hue(B)*y/a + Hue(A)*(1-y/a) ) * (x/a) + ( Hue(D)*y/a + Hue(C)*(1-y/a) ) * (1-x/a) </code></pre> <p>where <code>Hue(A)</code> is the Hue of point A, <code>Hue(B)</code> the Hue of B, etc...</p> <p>You apply the same formulae for the Saturation and Value.</p> <p>Once you have the Hue/Saturation/Value for your point E, you can transform it in RGB space.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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