2

I have two colors in hex form, #000000 and #ffffff. I want to approximate the first color to the second color by a percentage. Something like:

var percent=0.50;
var color1='#000000';
var color2='#ffffff';

var newcolor=approximateColor1ToColor2ByPercent(color1,color2,percent);
//newcolor should be a gray like #808080

how to do this?

2

3 Answers 3

9

For Additive Color mixing:

To mix the two colors, do this:

function approximateColor1ToColor2ByPercent(color1, color2, percent) {
  var red1 = parseInt(color1[1] + color1[2], 16);
  var green1 = parseInt(color1[3] + color1[4], 16);
  var blue1 = parseInt(color1[5] + color1[6], 16);

  var red2 = parseInt(color2[1] + color2[2], 16);
  var green2 = parseInt(color2[3] + color2[4], 16);
  var blue2 = parseInt(color2[5] + color2[6], 16);

  var red = Math.round(mix(red1, red2, percent));
  var green = Math.round(mix(green1, green2, percent));
  var blue = Math.round(mix(blue1, blue2, percent));

  return generateHex(red, green, blue);
}

function generateHex(r, g, b) {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  // to address problem mentioned by Alexis Wilke:
  while (r.length < 2) { r = "0" + r; }
  while (g.length < 2) { g = "0" + g; }
  while (b.length < 2) { b = "0" + b; }

  return "#" + r + g + b;
}

function mix(start, end, percent) {
    return start + ((percent) * (end - start));
}

Then this following code:

approximateColor1ToColor2ByPercent('#000000', '#ffffff', .50);

will return '#808080'

4
  • 1
    This will blend yellow + blue to grey, which may or may not be what is wanted. There are many other possible algorithms for mixing colours.
    – Stuart
    Jan 19, 2015 at 2:22
  • @Stuart - I just realized that when mixing colors such as pure yellow and blue on the additive color model, it results in grey. This is because you are basically mixing 50% red, 50% green, and 50% blue. You may need to look at subtractive mixing, which I will put in my answer.
    – vcapra1
    Jan 19, 2015 at 2:33
  • What happens if a resulting color is between 0 and 15 (0x0F)? Jan 19, 2015 at 3:10
  • @AlexisWilke - yeah, that's another thing I'm going to fix. Thanks.
    – vcapra1
    Jan 19, 2015 at 3:11
3

ES6 implementation:

Actually, I just re-write the right answer of this post in ES6 and typed with TypeScript language:

const generateHex = (r: number, g: number, b: number): string => {
  let R = r.toString(16);
  let G = g.toString(16);
  let B = b.toString(16);

  while (R.length < 2) {
    R = `0${R}`;
  }
  while (G.length < 2) {
    G = `0${G}`;
  }
  while (B.length < 2) {
    B = `0${B}`;
  }

  return `#${R}${G}${B}`;
};

const mix = (start: number, end: number, percent: number): number =>
    start + (percent / 100) * (end - start);

const blender = (color1: string, color2: string, percent: number): string => {
  const red1 = parseInt(`${color1[1]}${color1[2]}`, 16);
  const green1 = parseInt(`${color1[3]}${color1[4]}`, 16);
  const blue1 = parseInt(`${color1[5]}${color1[6]}`, 16);

  const red2 = parseInt(`${color2[1]}${color2[2]}`, 16);
  const green2 = parseInt(`${color2[3]}${color2[4]}`, 16);
  const blue2 = parseInt(`${color2[5]}${color2[6]}`, 16);

  const red = Math.round(mix(red1, red2, percent));
  const green = Math.round(mix(green1, green2, percent));
  const blue = Math.round(mix(blue1, blue2, percent));

  return generateHex(red, green, blue);
};

export default blender;

ATTENTION: The blender function merge two given colors with the percentage number, IT MEANS THE PERCEN NUMBER SHOULD BE BETWEEN 0 ~ 100, for a test you can use below code:

document.body.style.backgroundColor = blender('#ffffff', '#ff0000', 30);
2

I'm not professional, just share my efforts.

The way of performance colors between nature and computer is different.To get color similar to what you want, you may use light blue(#00FFFF) instead of (#OOOOFF).

So I've tried two ways of color blending, first is the traditional additive mixing:

newColor.R = (color1.R + color2.R)/2

For alpha blending, color1 and color2 both have their own alpha channel which represents the transparency of itself.So alpha blending algorithm should be like(R,G,B ranges from 0 to 255):

newAlpha = 1 - (1-color1.Alpha) * (1-color2.Alpha)
newColor.R = (color1.R/255 * color1.Alpha / newAlpha + color2.R/255 * color2.Alpha * (1-color1.Alpha) / newAlpha)*255

I've implemented them, and you can see the result:

//Convert hex color into rgb color
function HexToRgb(hexcolor) {
  var hexR = hexcolor.substr(0, 2);
  var hexG = hexcolor.substr(2, 2);
  var hexB = hexcolor.substr(4, 2);
  var rgbColor = [];
  rgbColor[0] = parseInt(hexR, 16);
  rgbColor[1] = parseInt(hexG, 16);
  rgbColor[2] = parseInt(hexB, 16);
  return rgbColor;
}

//Convert rgb color int hex color
function RgbtoHex(rgbcolor) {
  var hexColor = rgbcolor[0].toString(16) + rgbcolor[1].toString(16) + rgbcolor[2].toString(16);
  return hexColor;
}

//Additive mixing two colors
function additiveMixing(color1, color2) {
  var rgbColor1 = HexToRgb(arguments[0]);
  var rgbColor2 = HexToRgb(arguments[1]);

  var newColor = [];
  for (var n = 0; n < 3; n++) {
    newColor[n] = Math.round((rgbColor1[n] + rgbColor2[n]) / 2);
  }
  return RgbtoHex(newColor);
}

//Alpha blending two colors with two alphas
function alphaBlending(color1, color2, alpha1, alpha2) {
  var rgbColor1 = HexToRgb(arguments[0]);
  var rgbColor2 = HexToRgb(arguments[1]);

  var newColor = [];
  var alpha1 = arguments[2];
  var alpha2 = arguments[3];
  var alpha = 1 - (1 - alpha1) * (1 - alpha2);
  for (var n = 0; n < 3; n++) {
    newColor[n] = Math.round((rgbColor1[n] / 255.0 * alpha1 / alpha + rgbColor2[n] / 255.0 * alpha2 * (1 - alpha1) / alpha) * 255);
  }
  return RgbtoHex(newColor);
}

//Show base color change
$("#color1, #color2").change(function() {
  var color = $(this).val();
  $(this).next().css("background-color", color);
});

//Mix color
$("button").click(function() {
  var color1 = $("#color1").val().substr(1);
  var color2 = $("#color2").val().substr(1);
  var alpha1 = parseFloat($("#alpha1").val());
  var alpha2 = parseFloat($("#alpha2").val());
  var additiveColor = additiveMixing(color1, color2);
  var alphablendColor = alphaBlending(color1, color2, alpha1, alpha2);

  $("#additive span").text("#" + additiveColor);
  $("#additive span").parent().next().css("background-color", "#" + additiveColor);

  $("#alpha span").text("#" + alphablendColor);
  $("#alpha span").parent().next().css("background-color", "#" + alphablendColor);
});
.color_block {
  width: 50px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid black;
}
#result {
  position: absolute;
  top: 15px;
  left: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
  <li>
    <label for="color1">Color 1</label>
    <br/>
    <input id="color1" type="text" value="#00FFFF" />
    <div class="color_block" style="background-color: #0000FF;"></div>
  </li>
  <li>
    <label for="color2">Color 2</label>
    <br/>
    <input id="color2" type="text" value="#FFFF00" />
    <div class="color_block" style="background-color: #FFFF00;"></div>
  </li>
  <li>
    <label for="alpha1">Alpha 1(0-1)</label>
    <br/>
    <input id="alpha1" type="text" value="0.5" />
  </li>
  <li>
    <label for="alpha2">Alpha 2(0-1)</label>
    <br/>
    <input id="alpha2" type="text" value="0.5" />
  </li>
</ul>
<br>
<button>Mix them!</button>
<div id="result">
  <p id="additive">Additive mixed color is <span>N/A</span>
  </p>
  <div class="color_block"></div>
  <p id="alpha">Alpha blending mixed color is <span>N/A</span>
  </p>
  <div class="color_block"></div>
</div>

Reference:

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.