Name: Password: Sign in

Color Overlay


const dec2hex = num =>
  Math.floor(num)
    .toString(16)
    .padStart(2, "0");

const hex2dec = num => parseInt(num, 16);

const hex2rgba = num => {
  const [_, r, g, b, a] = num.match(/(\w{2})(\w{2})(\w{2})(\w{2})?/);
  return {
    r: hex2dec(r),
    g: hex2dec(g),
    b: hex2dec(b),
    a: a ? hex2dec(a) / 255 : 1
  };
};

const rgba2hex = num => {
  const { r, g, b, a = 1 } = num;
  return `${dec2hex(r)}${dec2hex(g)}${dec2hex(b)}${dec2hex(a * 255)}`;
};

const overlay = (back, front) => {
  const rgbaBack = typeof back === "string" ? hex2rgba(back) : back;
  const rgbaFront = typeof front === "string" ? hex2rgba(front) : front;

  const { r: r1, g: g1, b: b1 } = rgbaBack;
  const { r: r2, g: g2, b: b2, a: a2 } = rgbaFront;
  return {
    r: r1 + (r2 - r1) * a2,
    g: g1 + (g2 - g1) * a2,
    b: b1 + (b2 - b1) * a2
  };
};

// calc color rgba(55, 85, 190, 0.2) appling on white
const rgbOverlayColor = overlay("ffffff", { r: 55, g: 85, b: 190, a: 0.2 }); // { r: 215, g: 221, b: 242 }
const hexOverlayColor = rgba2hex(rgbOverlayColor); // d7ddf2ff
Copyright (c) 2014-2016 Kyles Light.
Powered by Tornado.
鄂 ICP 备 15003296 号