Does anybody know how to generate 4 colors with new brightnesss based of a color in javascript?

Question

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 function.

Answer 1

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? ;-)

Answer 2

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;
}

Answer 3

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;
}