Color Filter

by Dennis Bauszus

HTML

<div id="org"></div>
<div id="chk"></div>
<p id="filter"></p>

CSS

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: #000;
}

/* #chk {
  filter: invert(21%) sepia(100%) saturate(1499%) hue-rotate(88deg) brightness(83%) contrast(108%);
} */

JavaScript

function hexToRgb(hex) {

  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;

  hex = hex.replace(shorthandRegex, (m, r, g, b) => {
    return r + r + g + g + b + b;
  });

  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  return result ? [
      parseInt(result[1], 16),
      parseInt(result[2], 16),
      parseInt(result[3], 16),
    ] :
    null;
}

const org = '#EC602D';

const rgb = hexToRgb(org);

const color = {};

function clamp(value) {
  if (value > 255) {
    value = 255;
  } else if (value < 0) {
    value = 0;
  }
  return value;
}

color.r = clamp(rgb[0]);

color.g = clamp(rgb[1]);

color.b = clamp(rgb[2]);

function hueRotate(angle = 0) {
  angle = angle / 180 * Math.PI;
  const sin = Math.sin(angle);
  const cos = Math.cos(angle);

  multiply([
    0.213 + cos * 0.787 - sin * 0.213,
    0.715 - cos * 0.715 - sin * 0.715,
    0.072 - cos * 0.072 + sin * 0.928,
    0.213 - cos * 0.213 + sin * 0.143,
    0.715 + cos * 0.285 + sin * 0.140,
    0.072 - cos * 0.072 - sin * 0.283,
    0.213 - cos * 0.213 - sin * 0.787,
    0.715 - cos * 0.715 + sin * 0.715,
    0.072 + cos * 0.928 + sin * 0.072,
  ]);
}

function grayscale(value = 1) {
  multiply([
    0.2126 + 0.7874 * (1 - value),
    0.7152 - 0.7152 * (1 - value),
    0.0722 - 0.0722 * (1 - value),
    0.2126 - 0.2126 * (1 - value),
    0.7152 + 0.2848 * (1 - value),
    0.0722 - 0.0722 * (1 - value),
    0.2126 - 0.2126 * (1 - value),
    0.7152 - 0.7152 * (1 - value),
    0.0722 + 0.9278 * (1 - value),
  ]);
}

function sepia(value = 1) {
  multiply([
    0.393 + 0.607 * (1 - value),
    0.769 - 0.769 * (1 - value),
    0.189 - 0.189 * (1 - value),
    0.349 - 0.349 * (1 - value),
    0.686 + 0.314 * (1 - value),
    0.168 - 0.168 * (1 - value),
    0.272 - 0.272 * (1 - value),
    0.534 - 0.534 * (1 - value),
    0.131 + 0.869 * (1 - value),
  ]);
}

function saturate(value = 1) {
  multiply([
  ...