Get color value of specific position in colorbar with gradient

Question

I generated a gradient colobar with CSS3 styles (fiddle) and now want the color value of a specific location (by x and y coords) in that colorbar. As far as I know there is no direct way to do that.

I see two options:

1. Implement the gradient algorithm in JavaScript and calculate the value from scratch. Is there an exact definition how that algorithm works for multiple colors? Does the gradient look the same in every browser?

2. Use a canvas and createLinearGradient method to draw the gradient and access the canvas directly to get the color value.

Any other options?

Answer 1

I chose to implement your first solution (figure out the gradient with JavaScript). It means you don't need to rely on support for the canvas element, which may be important depending on your browser support.

Using the canvas methods would also be cool, and easier. You could render the color stops from the CSS, and then use getImageData() to figure out which color the pointer was over.

You can extract the CSS colours with a regex, and map any human ones to RGB with...

var background = window.getComputedStyle(element).getPropertyValue("background");

var colorStops = [];
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g;
var match;

var humanToHex = {
    "red": [255, 0, 0],
    "green": [0, 128, 0],
    "blue": [0, 0, 255]
};

while (match = matchColorStops.exec(background)) {
    if (humanToHex[match[1]]) {
        match[1] = humanToHex[match[1]];
    }
    colorStops.push({
        percentage: match[2],
        color: match[1]
    });
}

You can use this small JavaScript function to interpolate two colours if they are separated into their RGB values.

var getStepColor = function(colorA, colorB, value) {
    return colorA.map(function(color, i) {
        return (color + value * (colorB[i] - color)) & 255;
    });
};

You can combine that to get some code that will let you do this...

var getStepColor = function (colorA, colorB, value) {
    return colorA.map(function (color, i) {
        return (color + value * (colorB[i] - color)) & 255;
    });
};

var gradient = document.querySelector("#gradient");
var preview = document.querySelector("#preview");

var background = window.getComputedStyle(gradient).getPropertyValue("background");

var colorStops = [];
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g;
var match;

var humanToHex = {
    "red": [255, 0, 0],
    "green": [0, 128, 0],
    "blue": [0, 0, 255]
};

while (match = matchColorStops.exec(background)) {
    // If colour is *human-readable*, then
    // substitute it for a RGB value.
    if (humanToHex[match[1]]) {
        match[1] = humanToHex[match[1]];
    }
    colorStops.push({
        percentage: match[2],
        color: match[1]
    });
}

gradient.addEventListener("mousemove", function (event) {

    var x = event.pageX - gradient.offsetTop;
    var y = event.pageY - gradient.offsetLeft;
    var percentage = (x / this.offsetWidth) * 100;

    var i;
    for (i = 0; i < colorStops.length; i++) {
        if (colorStops[i].percentage > percentage) {
            break;
        };
    }

    var lowerIndex = i == 1 ? 0 : i - 1;
    var upperIndex = lowerIndex + 1;
    var value = x / (gradient.offsetWidth / (colorStops.length - 1)) % 1;

    color = getStepColor(colorStops[lowerIndex].color, colorStops[upperIndex].color, value);

    preview.style.backgroundColor = "rgb(" + color.join() + ")";
    preview.textContent = preview.style.backgroundColor;

});

jsFiddle.

This is just a quick hack-ish way to come up with this, there is probably a better foolproof method of extracting the colors, and for figuring out where the pointer is in relation to which gradient segment.