开发者

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

开发者 https://www.devze.com 2022-12-20 11:04 出处:网络
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

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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号