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:
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?
Use a
canvasandcreateLinearGradientmethod to draw the gradient and access the canvas directly to get the color value.
Any other options?
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:
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?
Use a
canvasandcreateLinearGradientmethod to draw the gradient and access the canvas directly to get the color value.
Any other options?
Share Improve this question edited Mar 27, 2013 at 21:22 Peter O. 32.9k14 gold badges84 silver badges97 bronze badges asked Mar 27, 2013 at 11:06 medihackmedihack 16.6k21 gold badges91 silver badges140 bronze badges 01 Answer
Reset to default 8I 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 bine 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 e 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.