rgb(a)と16進は互いに変換して、rgbaToHex、hexToRgb.


最近仕事があったらメモしてください.
実は正規表現を書く時、表現が一番大切だと思います.簡潔はその次です.
/*
  rgba(100, 200, 80, 0.7);
*/

function rgbaToHex (rgba) {
  rgba = rgba.replace(/\s+/g, "");  //          ,           \s*;   r  g  b(10, 2  0, 30)                。            。
  let pattern = /^rgba?\((\d+),(\d+),(\d+),?(\d*\.\d+)?\)$/,
   result =  pattern.exec(rgba);
  if(!result) {
    throw new Error(`   ${rgba}     `);
  }

  /* r:result[1], g:result[2], b:result[3], a: result[4] */
  let colors = [];
  for(var i=1, len=3; i<=len; ++i) {
    let str = Number(result[i]).toString(16);
    if(str.length == 1) {
      str = 0 + str;
    }
    colors.push(str);
  }

  return {
    color: "#" + colors.join(""),
    opacity: result[4] ? result[4] : "1",
  };
}

/*
      
  {color: "#010203", opacity: "1"}
  {color: "#64c850", opacity: "0.7"}
  {color: "#64c850", opacity: "1"}
*/
次に、16進数回転rgbを書きます.
function hexToRgb(hex) {
  /*
    hex: {String}, "#333", "#AF0382"
  */
  hex = hex.slice(1);
  if(hex.length == 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }

  return {
    r: Number.parseInt(hex.slice(0, 2), 16),
    g: Number.parseInt(hex.slice(2, 4), 16),
    b: Number.parseInt(hex.slice(4, 6), 16),
  }
}

console.log(hexToRgb("#555"));
console.log(hexToRgb("#AF3823"));

/*
      
  {r: 85, g: 85, b: 85}
  {r: 175, g: 56, b: 35}
*/