JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<br/>Matte: <input id="matte" value="rgb(255, 255, 55)" />
<br/>RGB Alpha: <input id="rgba" value="rgba(123, 21, 21, 0.5)" />
<br/>RGB Result: <input id="rgb" />

JavaScript

function rgba_to_rgb(rgba, matte) {
  //http://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb
  var alpha, rgb, fg, bg;
  matte = matte || {r: 255, g: 255, b: 255};
  $('<div>RGBA</div>').css('background', rgb_obj_to_string(rgba)).appendTo('body');
  alpha = rgba.a;
  rgb = {};
  fg = {};
  bg = {};
  // normalize the color values for computation
  fg.r = rgba.r / 255;
  fg.g = rgba.g / 255;
  fg.b = rgba.b / 255;
  bg.r = matte.r / 255;
  bg.g = matte.g / 255;
  bg.b = matte.b / 255;
  // do the computations on the normalized values
  rgb.r = ((1 - alpha * bg.r) + (alpha * fg.r));
  rgb.g = ((1 - alpha * bg.g) + (alpha * fg.g));
  rgb.b = ((1 - alpha * bg.b) + (alpha * fg.b));
  // convert back to RGB values
  rgb.r = rgb.r * 255;
  rgb.g = rgb.g * 255;
  rgb.b = rgb.b * 255;
  rgb.r = Math.round(Math.max(0, Math.min(255, rgb.r)));
  rgb.g = Math.round(Math.max(0, Math.min(255, rgb.g)));
  rgb.b = Math.round(Math.max(0, Math.min(255, rgb.b)));
  $('<div>RGB</div>').css('background', rgb_obj_to_string(rgb)).appendTo('body');
  return rgb;
}

function rgb_string_to_obj (str) {
  var obj = {}, val = (str).split(/[^0-9\.]+/g);
  obj.r = val[1];
  obj.g = val[2];
  obj.b = val[3];
  if (val.length > 4 && val[4]) {
      obj.a = val[4];
  }
  return obj;
}
function rgb_obj_to_string (obj) {
  return (obj.a ? 'rgba(' : 'rgb(') + obj.r 
    + ', ' + obj.g 
    + ', ' + obj.b 
    + (obj.a ? ', ' + obj.a : '')
    + ')';
}

function convert () {
  var rgba = rgb_string_to_obj($('#rgba').val());
  var matte = rgb_string_to_obj($('#matte').val());
  $('#rgb').val(rgb_obj_to_string(rgba_to_rgb(rgba, matte)));
}

$('body').on('change', '#rgba', convert).on('change', '#matte', convert);

convert();