Formula to Recompute Gradient Colors Based on Relative Difference Between Two Colors

Question

When given an arbitrary color value, how would I use the relative difference between that value and gradient offset 0 (below) to adjust the remaining offsets' colors so that they having the same relative relationship with the new color as they had with the original color?

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
    <GradientStop Color="#FFDB0000" Offset="0" />
    <GradientStop Color="#FFB74134" Offset="0.6" />
    <GradientStop Color="#FFBA5643" Offset="0.85" />
    <GradientStop Color="#93C11E00" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

My challenge is figuring out the mathematical formula to use to do the relative adjustments. Once I have this logic, it should be relatively easy to implement it in the particular technology I'm using (C#/.Net/WPF).

Thank you!

Answer 1

Solution:

Using the Hue-Saturation-Luminance (HSL) model, I determined:

• the relative hue difference between the template gradient's base color and each template stop color.
• the absolute saturation and luminosity values of each template stop color.

To generate the new gradient stops, I took the user-specified color and shifted its hue by the appropriate hue offset calculated above, then set its saturation and luminosity values to the values determined above.

http://en.wikipedia.org/wiki/HSL_and_HSV provides a RGB-HSL formula. http://blogs.msdn.com/b/cjacks/archive/2006/04/12/575476.aspx describes how to do the HSL-to-RGB conversion.