4

Possible Duplicate:
Javascript color gradient

I have color one (let's say yellow) and color two (blue) - they make up a gradient.
Based on a value of 0 to 100, (0 being yellow and 100 being blue), I'd like to represent a mixture of color one and two.

I am trying to do this in a mobile browser (safari specifically).

Is there a way to do this in javascript?

Community
  • 1
  • 1
AngryHacker
  • 59,598
  • 102
  • 325
  • 594
  • I think this will also depend on how many pixels the gradient covers. More pixels = more colors. For instance, a 10px gradient can only have 10 possible colors. Are you looking for the "middle" color or do you seriously want "all" the colors? – Wesley Murch Jan 04 '12 at 19:02
  • @Madmartigan I am just looking for the color that corresponds to the number. – AngryHacker Jan 04 '12 at 19:04
  • OK, I *think* I get it. You want the range of (maximum) 100 colors? In any case I don't have a solution, I just thought the question was unclear. – Wesley Murch Jan 04 '12 at 19:06
  • Doesn't safari support gradients as part of html5? – jcuenod Jan 04 '12 at 19:10
  • If I understand the question correctly...I think you'd want to figure out how the gradient is made (I don't know), and basically write a function yourself that makes the gradient in 100 steps, and just returns the color it's on after X steps. – Kyle Gobel Jan 04 '12 at 19:14

1 Answers1

20

If what you're trying to do is to create a color that is some percentage (0-100) between two other colors, you can do that with this javascript:

function makeGradientColor(color1, color2, percent) {
    var newColor = {};

    function makeChannel(a, b) {
        return(a + Math.round((b-a)*(percent/100)));
    }

    function makeColorPiece(num) {
        num = Math.min(num, 255);   // not more than 255
        num = Math.max(num, 0);     // not less than 0
        var str = num.toString(16);
        if (str.length < 2) {
            str = "0" + str;
        }
        return(str);
    }

    newColor.r = makeChannel(color1.r, color2.r);
    newColor.g = makeChannel(color1.g, color2.g);
    newColor.b = makeChannel(color1.b, color2.b);
    newColor.cssColor = "#" + 
                        makeColorPiece(newColor.r) + 
                        makeColorPiece(newColor.g) + 
                        makeColorPiece(newColor.b);
    return(newColor);
}

This function assumes the gradient is made with linear interpolation between each r, g and b channel value of the two endpoint colors such that the 50% gradient value is the midpoint of each r,g,b value (halfway between the two colors presented). Once could make different types of gradients too (with different interpolation functions).

To assign this result to a background, you use the CSS color value I've added to the return result like this:

// sample usage
var yellow = {r:255, g:255, b:0};
var blue = {r:0, g:0, b:255};
var newColor = makeGradientColor(yellow, blue, 79);
element.style.backgroundColor = newColor.cssColor;
AngryHacker
  • 59,598
  • 102
  • 325
  • 594
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Great. How do I assign newColor to myDiv.style.backgroundColor? – AngryHacker Jan 04 '12 at 20:41
  • @AngryHacker - Are you trying to assign a solid color to your background that is in the range between your two other colors? Or, are you trying to actually make your background be a gradient? – jfriend00 Jan 04 '12 at 20:45
  • I am trying to assign a solid color to the background. Essentially, I am trying to assign the return value of your method to the background. – AngryHacker Jan 04 '12 at 20:48
  • I tried: `var decColor = newColor.r + 256 * newColor.g + 65536 * newColor.b;` `myDiv.style.backgroundColor = "#" + decColor.toString(16); ` Not sure why it's not working. – AngryHacker Jan 04 '12 at 20:52
  • @AngryHacker - I added more to my answer that adds a cssColor result to the return value and shows you how to use that to set the background color of an element. – jfriend00 Jan 04 '12 at 21:01