Hey I was wondering if anybody knew a way to generate some monochromatic colors based off a single color inputted in hex into a javascript fu开发者_运维技巧nction.
If you're looking to convert a color to some level of gray scale, try calculating the luminescence, like this:
function toGrayScale(color) /* color is an integer */ {
// Extract the red, green, and blue portions of the color
var red = (color >> 16) & 0xff;
var green = (color >> 8) & 0xff;
var blue = color & 0xff;
// Calculate the luminescence
var luminescence = red * 0.3 + green * 0.59 + blue * 0.11;
var lumInt = Math.floor(luminescence);
// Combine into a grayscale color
return (lumInt << 16) + (lumInt << 8) + lumInt;
}
What you want to do is calculate the relative value for each color component against the average luminescence, then multiply each of these by a pair of offsets to generate different brightness...
This is pseudo-code, I'm sure you can figure out the details:
function getColors(baseline) {
var offsets = [ 0x33, 0x66, 0x99, 0xCC ];
// Use Jake's suggestion on computing luminescence...
var lum = getLuminescence(baseline);
var redCoefficient = baseline[red] / lum;
var greenCoefficient = baseline[green] / lum;
var blueCoefficient = baseline[blue] / lum;
var output = [];
for (offsetInd in offsets) {
var offset = offsets[offsetInd];
output.push(new Color(offset * redCoefficient,
offset * greenCofficient, offset * blueCoefficient));
}
return ouptut;
}
Try:
// color looks like 0xRRGGBB
function(color){
R = color.substr(2, 2)
G = color.substr(4, 2)
B = color.substr(6, 2)
return "0x" + R + R + R
// or return ["0x"+R+R+R, "0x"+G+G+G, "0x"+B+B+B]
}
By the way: "monochromatic color" is an oxymoron, isn't it? ;-)
精彩评论